参考文章：前端 HTML - CSDN
前言：初识 HTML
HTML 的全称为 超文本标记语言（HyperText Markup Language），它并非编程语言，而是一种标记语言。通过一系列标签（Tags），HTML 将网络上的文档格式统一，使分散的 Internet 资源连接为一个逻辑整体。HTML 命令可以描述文字、图形、动画、声音、表格以及超链接等。
效率工具：前端快捷键 (VS Code)
在开发过程中，熟练使用快捷键能极大提高编码效率：
| 功能描述 | 快捷键 |
|---|---|
| 向上或向下复制一行 | Shift + Alt + ↑/↓ |
| 向下依次选中相同单词 | Ctrl + D |
| 添加多个光标（多列编辑） | Ctrl + Alt + ↑/↓ |
| 全局替换某个单词 | Ctrl + H |
| 快速定位到某一行 | Ctrl + G |
| 选定某个区块操作 | Shift + Alt + 鼠标拖动 |
| 注释 / 取消注释 | Ctrl + / |
基础语法：字符实体与注释
字符实体
在 HTML 中，某些字符具有特殊含义（如 < 和 >）。如果想在网页中直接显示这些字符，或者输入多个空格，需要使用字符实体：
- 空格：
- 小于号 (<)：
< - 大于号 (>)：
>
注释
注释用于解释代码，不会在浏览器中显示。
路径引用
-
相对路径：
- 同级目录：
./ - 上一级目录：
../ - 下一级目录：
文件夹名/
- 同级目录：
-
绝对路径：
- 磁盘本地路径（如
C:/Users/...） - 网络完整的 URL 地址
- 磁盘本地路径（如
标签体系
标签种类
- 双标签：成对出现，如
<p>内容</p>。 - 单标签：单独出现，如
<br>（换行）、<hr>（水平线）。
标签关系
- 并列（兄弟关系）：标签处于同一级别。
- 嵌套（父子关系）：一个标签包含在另一个标签内部。
常用内容标签
标题与段落
- 标题：
<h1>到<h6>，字号依次递减，重要性依次降低。 - 段落：
<p>，会自动开启新的一行并带有间距。
图像标签 (img)
<img src="./bg.jpg" alt="描述文字" title="鼠标悬停文字" width="300" />alt：图片加载失败时显示的文字（SEO 和无障碍关键）。title：鼠标悬停在图片上时显示的提示。
多媒体标签
| 标签 | 常用属性 | 作用 |
|---|---|---|
| audio (音频) | src, controls, loop, autoplay | 支持 MP3, Wav 等格式 |
| video (视频) | src, controls, muted, autoplay | 支持 MP4, WebM 等格式 |
提示：由于浏览器安全策略，
autoplay通常需要配合muted（静音）才能在页面加载时自动播放。
超链接 (a 标签)
<a href="https://example.com" target="_blank">点击跳转</a>href：跳转的目标地址（#表示空链接）。target="_blank"：在新窗口打开页面。
列表与表格
列表 (List)
- 无序列表：
<ul>嵌套<li>。 - 有序列表：
<ol>嵌套<li>。 - 定义列表：
<dl>嵌套<dt>（标题）和<dd>（描述）。
表格 (Table)
<table border="1">
<tr>
<th>姓名</th>
<th>年龄</th>
</tr>
<tr>
<td>张三</td>
<td>20</td>
</tr>
</table>- 单元格合并：
rowspan：跨行合并。colspan：跨列合并。
表单控件 (Form)
Input 系列
通过不同的 type 属性实现不同功能：
text：单行文本框。password：密码框（显示星号）。radio：单选框（需设置相同的name属性来实现互斥）。checkbox：多选框。file：文件上传。
其他控件
- 下拉菜单：
<select>嵌套<option>。 - 文本域：
<textarea>，用于多行输入。 - Label 标签：通过
for属性绑定 ID，点击文字即可选中对应的控件，增大点击范围。