基础标签
使用 <p> 定义段落
<p>我是一个段落，千真万确。</p>
使用 <h1> ~ <h6> 定义标题
<h1>我是文章的标题</h1>
<h1>表示主标题<h2>表示二级子标题<h3>~<h6>依次表示更低级别的标题- 最佳实践：正常网站建议每页不超过三级标题
实现结构层级
利用 <p> 和 <h1> ~ <h6> 可以实现清晰的结构层级：
<h1>三国演义</h1>
<p>罗贯中</p>
<h2>第一回 宴桃园豪杰三结义 斩黄巾英雄首立功</h2>
<p>
话说天下大势，分久必合，合久必分。周末七国分争，并入于秦。及秦灭之后，楚、汉分争，又并入于汉……
</p>
<h2>第二回 张翼德怒鞭督邮 何国舅谋诛宦竖</h2>
<p>
且说董卓字仲颖，陇西临洮人也，官拜河东太守，自来骄傲。当日怠慢了玄德，张飞性发，便欲杀之……
</p>
<h3>却说张飞</h3>
<p>
却说张飞饮了数杯闷酒，乘马从馆驿前过，见五六十个老人，皆在门前痛哭。飞问其故，众老人答曰："督邮逼勒县吏，欲害刘公；我等皆来苦告，不得放入，反遭把门人赶打！"……
</p>
最佳实践
- 每个页面只使用一次
<h1>（顶级标题） - 按正确的顺序使用标题，不要跳级（如先
<h3>后<h2>） - 争取每页使用不超过三个标题层级
为什么我们需要结构化？
1. 方便用户阅读
- 用户往往快速浏览查找相关内容，通常只阅读标题
- 如果几秒内看不到有用内容，用户会沮丧并离开
2. SEO 优化
- 搜索引擎将标题内容视为影响排名的重要关键词
- 没有标题的网页 SEO 效果不佳
3. 无障碍性（非常重要）
- 视力障碍者使用屏幕阅读器听网页内容
- 屏幕阅读器通过朗读标题提供文档概述，让用户快速找到信息
- 如果没有标题，用户只能听到整个文档被大声朗读
4. 方便 CSS 和 JavaScript 操作
- 需要 HTML 元素来包裹内容，以便 CSS/JavaScript 有效定位
为什么需要语义？
语义化的含义
- 我们依赖以前的经验来判断物品的功能
- 例如：红灯表示"停止"，绿灯表示"通行"
- 如果运用错误的语义，会带来混乱
HTML 语义的重要性
- 语义化的元素给予内容正确的含义、作用和外形
<h1>是语义元素，表示"页面上的顶级标题"
<h1>这是一个顶级标题</h1>
- 浏览器会给它更大的字形（也可以用 CSS 改变样式）
- 重要的是它的语义值：被搜索引擎和屏幕阅读器使用
非语义化元素的问题
<!-- ❌ 不推荐 -->
<span style="font-size: 32px; margin: 21px 0; display: block;"
>这是顶级标题吗？</span
>
<span>是没有语义的元素- 可以用 CSS 让它看起来像标题
- 但没有语义值，失去了搜索引擎优化和无障碍访问的优势
结论
最佳方法：使用相关的 HTML 元素来标记内容，而不是用 CSS 模拟样式。
