课时06：HTML 基本语法¶
学习目标：掌握 HTML 标签的书写规范、属性定义规则、空白折叠现象及代码缩进约定，能够编写结构清晰、符合规范的 HTML 代码。
一、标签的基本语法与分类¶
1.1 标签书写规则¶
HTML 标签必须书写在一对尖括号 < > 内部，基本形式如下：
1.2 双标签（Paired Tags）¶
双标签必须成对出现，包含开始标签和结束标签：
- 结束标签必须在标签名前添加关闭符
/（如</h1>） - 内容存放在开始标签与结束标签之间的区域
1.3 单标签（Void / Empty Tags）¶
单标签没有内容区域，无需结束标签，在 HTML5 中可省略自闭合斜杠：
1.4 标签分类：容器级 vs 文本级¶
| 分类 | 定义 | 可嵌套内容 | 典型标签 |
|---|---|---|---|
| 容器级标签 | 内部可存放任意标签（包括其他容器级或文本级标签） | 任意标签、文本 | <div>、<ul>、<li>、<table> |
| 文本级标签 | 内部只能存放文本或其他文本级标签 | 文本、文本级标签 | <span>、<a>、<img>、<br> |
1.5 标签嵌套规则¶
<!-- 正确嵌套：外层 div 包裹内层 p 标签 -->
<div>
<p>这是一段文字</p>
</div>
<!-- 错误嵌套：p 标签不能包裹块级元素（浏览器会自动修正） -->
<p><div>错误嵌套</div></p> <!-- 浏览器会拆分为多个独立 p 标签 -->
重要提示：HTML 对非法嵌套不会报错，但浏览器会强制修正解析结构，导致实际 DOM 与源码不一致，引发难以排查的样式问题。
二、属性的含义与书写规范¶
2.1 属性的定义¶
属性是标签的附加特性，用于赋予标签特定功能或修改默认行为。每个属性都是键值对（Key-Value）结构。
2.2 属性书写位置¶
属性位于开始标签名之后（或单标签名之后），与标签名之间用空格分隔：
<!-- 双标签的属性写在开始标签中 -->
<a href="https://www.example.com">链接文字</a>
<!-- 单标签的属性直接写在标签名后 -->
<img src="image.png" alt="图片说明">
2.3 键值对结构¶
属性名（key）：属性标识符（如href、src、class）属性值（value）：属性的具体设置，必须用双引号或单引号包裹
示例解析：
href是属性名，"https://www.baidu.com"是属性值title是属性名，"访问百度"是属性值
2.4 多属性书写规则¶
多个属性之间必须用空格分隔，不可连写：
<!-- 正确写法 -->
<a href="#" title="链接说明" target="_blank">点击</a>
<!-- 错误写法（缺少空格分隔） -->
<a href="#"title="链接说明">点击</a>
2.5 属性的作用域¶
属性仅对具备该能力的标签生效。为不支持某属性的标签添加该属性，不会产生任何效果：
<!-- a 标签支持 href 属性，表现为超链接 -->
<a href="#">有效链接</a>
<!-- p 标签不支持 href 属性，添加后无效果 -->
<p href="#">无效属性</p>
三、标签对空白、换行、缩进不敏感¶
3.1 核心特性¶
HTML 标签与标签之间的空白、换行、缩进不会影响浏览器的加载效果。浏览器解析 HTML 时，仅识别标签的开始与结束标记及嵌套关系，不依赖源码的排版格式。
3.2 代码可读性 vs 生产环境¶
开发阶段：建议合理使用缩进和换行，提升代码可读性，便于团队协作与后期维护。
生产阶段：常通过构建工具压缩 HTML，移除冗余空白以减小文件体积。
四、空白折叠现象¶
4.1 现象定义¶
在普通文本内容中，连续的空格、换行、制表符等空白字符，在浏览器渲染时会被自动折叠为单个空格显示。
4.2 示例验证¶
4.3 解决方案：字符实体 ¶
当需要强制显示多个空格时，使用不间断空格字符实体：
书写规范：
- 必须以 & 开头
- 以 ; 结尾
- 中间为 nbsp（全小写）