HTML: HTML 标题
标题标签为内容赋予了清晰的层级结构，这对于提升用户体验以及优化搜索引擎排名都至关重要。
1. 什么是标题标签
HTML 提供了从 <h1> 到 <h6> 共六个层级的标题标签。<h1> 表示最高级别（最重要），<h6> 表示最低级别（最不重要）。标题标签默认加粗显示，字号从 h1 到 h6 依次递减。
标题的语义意义远大于它的视觉样式。搜索引擎和辅助技术（如屏幕阅读器）依赖标题标签来理解页面的内容结构，因此正确使用标题对SEO（搜索引擎优化）和无障碍访问至关重要。
▶ 示例
<h1>一级标题（最重要）</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题（最不重要）</h6>
在上面的示例中，浏览器会自动为每个标题应用不同的字号和加粗样式。但请记住：不要为了改变字号而使用标题标签——应该用 CSS 来控制文字的样式，标题标签的职责是传达内容的层级结构。
2. 标题的使用规范
虽然标题标签用法简单，但在实际开发中需要遵循几条重要规范：
- 每个页面只应该有一个
<h1>：<h1>代表页面的核心主题，通常放置页面标题或站点 logo。搜索引擎会以<h1>的内容作为理解页面主旨的重要依据。 - 标题层级不能跳级：不要从
<h1>直接跳到<h3>。层级跳级会破坏文档结构的连贯性，对 SEO 和无障碍访问产生负面影响。 - 合理使用标题能提升搜索引擎排名：搜索引擎会分析标题标签中的关键词，合理组织标题层级有助于搜索引擎更好地理解页面内容，从而可能获得更好的排名。
▶ 示例
<!-- 正确的标题层级 -->
<h1>网站标题</h1>
<h2>文章分类</h2>
<h3>子分类一</h3>
<h3>子分类二</h3>
<h2>相关内容</h2>
<!-- 错误的标题层级（跳级） -->
<h1>网站标题</h1>
<h3>跳过 h2 直接用 h3</h3> <!-- 这里缺了 h2 -->
<h6>从 h3 跳到 h6，跳跃过大</h6>
<h6>，也不要为了大号文字而滥用 <h1>。标题的价值在于结构而非样式。样式问题交给 CSS 处理即可。
3. 标题的默认样式
浏览器为每个层级的标题内置了不同的字号和粗细，下面就来看看 h1~h6 在浏览器中的真实显示效果：
<div style="background:#f8fafc;border:1px solid #e2e8f0;border-radius:8px;padding:16px 20px;margin:16px 0">
<p style="font-size:2em;font-weight:bold;margin:0.67em 0">h1 标题 32px / 2em</p>
<p style="font-size:1.5em;font-weight:bold;margin:0.83em 0">h2 标题 24px / 1.5em</p>
<p style="font-size:1.17em;font-weight:bold;margin:1em 0">h3 标题 18.72px / 1.17em</p>
<p style="font-size:1em;font-weight:bold;margin:1.33em 0">h4 标题 16px / 1em</p>
<p style="font-size:0.83em;font-weight:bold;margin:1.67em 0">h5 标题 13.28px / 0.83em</p>
<p style="font-size:0.67em;font-weight:bold;margin:2em 0">h6 标题 10.72px / 0.67em</p>
</div>
一眼就能看出来：h1 最大最突出，h6 最小。这就是浏览器默认的标题样式，不同浏览器之间可能有微小的差异，但整体层级关系是一致的。
当然，这些默认样式可以通过 CSS 轻松覆盖。在实际项目中，开发者通常会重置浏览器的默认样式，然后根据设计稿重新定义标题的字号、颜色、间距等属性。
▶ 示例
/* CSS 自定义标题样式 */
h1 { font-size: 28px; color: #333; }
h2 { font-size: 22px; color: #555; }
h3 { font-size: 18px; color: #777; }
4. 标题与页面大纲
当你为一个页面设置好标题层级后，浏览器和搜索引擎会为这个页面生成一个"目录"——这就是页面大纲（document outline）。你可以把标题标签想象成 Word 文档中的"标题样式"：合理的标题层级能自动生成清晰的目录结构。
对于屏幕阅读器用户来说，标题层级就是他们在页面中导航的地图。一个好的标题结构可以让视障用户像阅读目录一样快速跳转到任意章节。如果标题层级混乱，他们就很难理解页面内容的组织方式。
对于搜索引擎来说，标题中的关键词是理解页面主题的重要信号。搜索引擎会给予合理使用标题标签的页面更高的权重。
▶ 示例
<!-- 一篇博客文章的标题大纲结构 -->
<h1>如何学习前端开发</h1>
<h2>一、前端三剑客</h2>
<h3>HTML — 结构</h3>
<h3>CSS — 样式</h3>
<h3>JavaScript — 交互</h3>
<h2>二、学习路线</h2>
<h3>初级阶段</h3>
<h3>中级阶段</h3>
<h3>高级阶段</h3>
<h2>三、推荐资源</h2>
上面这个例子中，h1 是整篇文章的主题，h2 是三大章节，h3 是每个章节下的细分内容。这个层级关系清晰的大纲，让人一眼就能看懂文章讲的是什么。
5. 标题与语义化标签配合
HTML5 中，语义化标签（<article>、<section>、<nav>、<aside>）和标题标签经常配合使用。每个独立的区块内部，标题层级应重新从 h1 到 h2 开始，而不是延续外层区块的层级。
▶ 示例
<body>
<h1>我的博客</h1>
<article>
<h2>第一篇文章标题</h2>
<p>文章内容...</p>
<section>
<h3>文章中的小标题</h3>
<p>细分内容...</p>
</section>
</article>
<article>
<h2>第二篇文章标题</h2>
<p>文章内容...</p>
</article>
<aside>
<h2>关于作者</h2>
<p>作者简介...</p>
</aside>
</body>
注意每个 <article> 和 <aside> 内部都有自己的 <h2>，它们彼此独立，互不干扰。这种写法既符合语义化规范，也让页面结构更加清晰。
6. 标题的常见错误
初学者在使用标题标签时经常犯以下几类错误，对照检查一下你的代码：
| 错误类型 | 错误示例 | 正确做法 |
|---|---|---|
| 用标题控制字号 | <h3>普通文字</h3>（只为小字号） |
用 <p> + CSS font-size |
多个 h1 |
一个页面写 3 个 <h1> |
只保留一个 <h1> 作为核心主题 |
| 跳级使用 | h1 → h3 → h5 |
按顺序 h1 → h2 → h3 使用 |
| 空标题 | <h2></h2>（没有文字内容） |
标题中必须包含有意义的文字 |
▶ 示例
<!-- 错误：为了把文字变小而用 h6 -->
<h6>底部版权信息</h6>
<!-- 正确：版权信息用 p 标签，用 CSS 控制字号 -->
<p style="font-size: 12px; color: #999;">© 2024 我的网站</p>
<!-- 错误：跳级使用 -->
<h1>网站标题</h1>
<h4>缺失了 h2 和 h3</h4>
<!-- 正确：按顺序递进 -->
<h1>网站标题</h1>
<h2>一级章节</h2>
<h3>二级小节</h3>
<!-- 错误：一个页面多个 h1 -->
<h1>第一部分</h1>
<h1>第二部分</h1>
<!-- 正确：只有一个 h1，其余用 h2 -->
<h1>页面标题</h1>
<h2>第一部分</h2>
<h2>第二部分</h2>
❓ 常见问题
<h1>标签吗？<article>和<section>内使用多个<h1>，但从SEO和无障碍访问的最佳实践来看，每个页面应该只有一个<h1>，它代表页面的核心主题。多个<h1>会让搜索引擎困惑，不知道哪个是主要内容。如果你需要多个大标题，用<h2>代替。记住：<h1>是页面的"主标题"，就像一本书的书名——一本书只能有一个书名。<h1>直接到<h3>？h1→h2→h3），跳级使用会破坏文档结构，影响屏幕阅读器用户的导航体验。屏幕阅读器用户依赖标题层级来快速浏览页面内容，跳级会让他们误以为漏掉了某个章节。搜索引擎也会对跳级的标题给予较低的权重。如果觉得默认字号太大，用CSS调整，而不是跳过标题层级。<h1>到<h6>的字号是固定的吗？可以自己改吗？<h1>到<h6>设置了默认字号（从大到小），但这只是默认样式，完全可以也必须用CSS自定义。标题标签的真正价值在于"语义"（表示内容的层级关系），而不是"视觉样式"。实际项目中，开发者通常会重置标题的默认样式，然后根据设计稿重新定义字号、颜色、间距。永远不要为了"让文字变大"而使用<h1>，也不要为了"让文字变小"而使用<h6>——这是初学者最常见的错误之一。📖 小节
<h1>~<h6>共六个层级，h1最重要，h6最不重要。- 每个页面只有一个
<h1>，标题不能跳级使用。 - 标题的语义意义比视觉样式更重要——影响 SEO 和无障碍访问。
- 标题与
<article>、<section>等语义化标签配合使用效果更好。 - 不要为了控制字号而使用标题标签，样式问题交给 CSS。
📝 作业
- 写一篇带标题的文章：用正确的
<h1>、<h2>、<h3>层级结构写一篇短文，主题自选（例如"我的兴趣爱好"）。要求至少用到h1、h2、h3三个层级。 - 找错题：以下标题层级有什么问题？把它改正确：
<h1>我的博客</h1><h3>文章一</h3><h5>小标题</h5><h1>文章二</h1> - 观察练习：打开一个新闻网站，用浏览器检查功能（F12）查看页面的标题层级结构，看看它们是否遵循了正确的标题规范。
