网页就像一本书。如果全篇文字一样大、不分段，人类找不到重点，机器也无法解析。
HTML 标签的本质，是给内容“下定义”。不是为了视觉上的“字号变大”或“文字加粗”，而是向机器（浏览器、搜索引擎爬虫、屏幕阅读器）声明这段文字的结构属性。这就是“语义化”。
💡 核心定律：永远不要为了改变样式去使用 HTML 标签。样式问题全部交给 CSS。
一、标题标签 h1-h6：网页的骨架
HTML 提供了 <h1> 到 <h6> 共 6 个级别的标题标签。数字越小，层级越高，语义权重越重。
机器通过这些标签提炼页面的大纲。如果不遵守层级规则，机器提取出的目录就会逻辑错乱。
1. 核心约束规则
- 唯一性：
<h1>是页面的核心主题，一个页面只能有 1 个。 - 连续性：标题必须逐级向下拆分，不能跳级。
⚠️ 常见错误：跳级使用标题。
视觉上可能觉得<h2>字体太大，直接用<h4>代替。这会导致机器生成的目录中出现结构断层。
<!-- ❌ 错误示范：跳级使用 -->
<h1>苹果派食谱</h1>
<h4>食材准备</h4>
<!-- ✅ 正确做法：层级连续，样式用 CSS 改 -->
<h1>苹果派食谱</h1>
<h2>食材准备</h2>
⚠️ 常见错误：为了字号变大，滥用 h1 标签。
给所有看起来像标题的文字都加<h1>，会导致搜索引擎无法确认当前页面的唯一核心关键字。
二、段落标签 p 与换行标签 br
<p> 标签用于定义一个完整的文本段落。浏览器会自动在 <p> 之间处理间距（默认 margin）。<br> 标签仅用于在同一段落内进行强制视觉换行，它不具备拆分文本结构的物理意义。
⚠️ 常见错误：用 br 替代 p 进行分段。
连续使用多个<br>拉开间距，机器依然会将上下两行视为同一个段落的长句。
<!-- ❌ 错误示范：没有结构，只有视觉换行 -->
今天天气很好<br><br>我去公园散步
<!-- ✅ 正确做法：用独立的段落标签包裹 -->
<p>今天天气很好</p>
<p>我去公园散步</p>
三、遵守语义化规则的好处
遵守上述结构约束，直接决定了网页在非人类阅读器中的表现：
💡 核心定律：搜索引擎爬虫会优先提取
<h1>和<h2>中的文本作为页面关键字进行索引。纯<span>写出的“大字号标题”在爬虫眼里只是普通正文。💡 核心定律：屏幕阅读器会提取页面的全套标题生成快捷目录，供视障用户语音跳转。没有标题标签，视障用户只能被迫从页面的第一个字按顺序听到最后。
四、结构重构对比
一段无标签的纯文本，在机器眼中毫无主次。为其贴上正确的结构标签后，机器就能一目了然。
<!-- 改造前：一团散沙 -->
Favorite body parts
The brain
Lovely shape and color. Also does thinkin' stuff.
<!-- 改造后：大纲清晰的树状结构 -->
<h1>Favorite body parts</h1>
<h2>The brain</h2>
<p>Lovely shape and color. Also does thinkin' stuff.</p>
五、总结与下一步
📝 总结：
h1-h6用于搭建网页的骨干大纲，<p>负责划分内容的血肉区块。把“写给机器看”的结构与“仅供展示看”的样式彻底剥离开来，是前端编码的底层铁律。
既然结构和样式要严格分离，那当我们在一个段落里，想突出某几个极其重要的字时，该怎么办？
初学者的本能反应通常是“加粗”，也就是直接敲一个 <b> 标签。但这同样掉进了“用样式代替语义”的陷阱——眼睛看到字变黑了，但机器却毫无反应。
在下一篇《06.HTML文本强调标签》中，我们将继续深入段落内部，拆解 <strong>（语义强调）与 <b>（视觉加粗）在机器运行机制上的差别。
