前端Web开发HTML5+CSS3（黑马学习笔记）-day01

王若卿

1150人浏览 · 2025-10-08 15:11:37

王若卿 · 2025-10-08 15:11:37 发布

HTML基础：

1. 概念：

HTML 超文本标记语言——HyperText Markup Language。

超文本：链接

标记：标签，带尖括号的文本

2.标签分类：

常见的单标签：

<br> 换行

<hr> 下划线

3.HTML骨架

在VSCode中创建一个.html文件，输入“!” ,再按“Enter”自动生成骨架。

html：整个网页

head：网页头部，用来存放给浏览器看的信息，例如 CSS

title：网页标题

body：网页主体，用来存放给用户看的信息，例如图片、文字

例如：
<html>

<head>

<title>网页标题</title>

</head>

<body>

网页主体

</body>

</html>

4.注释：

在 VS Code 中，添加 / 删除注释的快捷键：Ctrl + /

注释的样式：

5.标题的标签：

<h1>一级标题</h1>

<h2>二级标题</h2>

<h3>三级标题</h3>

<h4>四级标题</h4>

<h5>五级标题</h5>

<h6>六级标题</h6>

特点：主要体现在加粗、字号逐级减小、独占一行（换行）

6.段落的标签：

<p>段落</p>

显示特点：

独占一行

段落之间存在间隙

7.文本格式化标签：

strong 加粗

em 倾斜

ins 下划线

del 删除线

以上标签自带强调含义（语义）

b 加粗

i 倾斜

u 下划线

s 删除线

8.图像标签

<img src="图片的 URL">

图像的属性：

属性的语法：

9.路径

相对路径：从当前文件位置出发查找目标文件

绝对路径：从盘符出发查找目标文件

相对路径：

特殊的符号：

/ 表示进入某个文件夹里面 → 文件夹名/

. 表示当前文件所在文件夹 → ./

.. 表示当前文件的上一级文件夹 → ../

绝对路径：查找方式：Windows 电脑从盘符出发

<img src="C:\images\mao.jpg">（建议将"\" 统一写成“/”）

10.超链接标签

<a href="https://www.baidu.com/">跳转到百度</a>





<a href="./01-标签的写法.html" target="_blank">跳转到01-标签的写法</a>



<a href="#">空链接</a>

11.音频

<audio src="音频的 URL"></audio>

常见属性

例子：



<audio src="./media/music.mp3" controls loop autoplay></audio>

12.视频

<video src="视频的 URL"></video>

常用属性

例子：



<video src="./media/vue.mp4" controls loop muted autoplay></video>

码道开发者社区

码道开发者社区，聚焦华为云码道 CodeArts 代码智能体，沉淀 Agent、Skill、鸿蒙开发实战内容，供开发者查阅资料、交流技术、分享工程实践

更多推荐

AI 已经能直接改设计稿了:Windows部署Penpot，接入Codex MCP实测

码道开发者社区

【AI 业务流架构师】AI 业务流架构师方法论：Agentic AI 范式转移与业务编排思维

2026 年，Anthropic CEO Dario Amodei 在 Code with Claude 大会上的一个判断广为流传：一个人运营一家十亿美元级公司的概率是 70%–80%。这句话听起来像科幻小说的设定，但它背后是一个正在发生的结构性变化——AI 把"执行"的成本压到了历史低点，同时把"编排"的价值推到了前台。这意味着我们需要一套新的思考框架，来回答两个问题：一个人如何拥有一个公司的产