别只会用 ＜h1＞到 ＜h6＞加粗字体了！深挖 HTML 标题标签的底层逻辑

在 HTML 的浩瀚宇宙里，<h1>到 <h6>这六个标题标签绝对是最基础、最常见的一群“老演员”。很多刚入门前端的小伙伴，甚至一些老鸟，都习惯性地把它们当成“自带加粗和放大效果的文本工具”。

但如果你只拿它们当“字体放大器”，那就大材小用了！标题标签不仅是网页结构的骨架，更是搜索引擎和无障碍辅助工具的“导航地图”。今天，我们就来彻底盘一盘这六个家伙的正确打开方式。

一、 基础扫盲：认识 h1 到 h6

HTML 提供了六级标题，从 <h1>（最高级别，字号最大）到 <h6>（最低级别，字号最小）。
它们天生自带三个显著的“超能力”：

1. 加粗：默认字重较大。
2. 放大（或缩小）：h1 最大，h6 最小，中间逐级递减。
3. 霸道总裁范儿（独占一行）：作为块级元素，它们前后都会自动换行，独霸一整行空间。

基础代码示例：

<h1>这是一号标题（最大）</h1>
<h2>这是二号标题</h2>
<h3>这是三号标题</h3>
<h4>这是四号标题</h4>
<h5>这是五号标题</h5>
<h6>这是六号标题（最小）</h6>

(效果就是极其标准的黑体大字，自上而下依次变小)

二、 避坑指南：别碰的“古董”属性 align

在学习笔记中，可能会提到标题标签有一个 align属性，用来控制对齐方式（left、center、right）。

<!-- ⚠️ 警告：以下代码仅为历史回顾，请勿在现代项目中使用！ -->
<h1 align="center">居中标题</h1>

划重点：这个属性已经被 HTML5 标准正式废弃了！

如果你需要控制标题的对齐方式，请果断拥抱 CSS：

/* 正确的现代姿势 */
h1 {
  text-align: center;
}

三、 进阶核心：为什么不能“想用就用”？

标题标签真正的价值，不在于它的样式，而在于它的“语义”。这就好比你不能用饭碗来喝汤（虽然也能喝），但专门有个汤碗更好用。

1. SEO 的命脉：告诉搜索引擎谁是老大

搜索引擎的爬虫进入你的页面时，是顺着标题的层级来理清文章脉络的。

• <h1>通常代表页面的核心主题（比如一篇文章的标题）。
• <h2>到 <h6>则是层层递进的章节和小节。
  如果你的页面标题层级混乱，或者滥用 h1 只是为了把字变大，搜索引擎就会像看一盘散沙一样降低你网站的权重。

2. 无障碍访问（A11y）：做有温度的前端开发

这部分非常重要！很多视觉正常的开发者容易忽略：全球有大量用户依赖屏幕阅读器（Screen Readers）来“听”网页。

• 灾难现场：如果开发者为了省事，直接从 <h1>跳到了
  <h3>，屏幕阅读器会误以为中间丢失了一个二级标题，导致用户在导航时陷入“我到底在哪”的恐慌。
  天堂体验：规范的层级（h1 → h2 → h3…）能让屏幕阅读器自动生成清晰的“目录大纲”，视障用户可以像坐电梯一样，在楼层间自由跳转。

四、 最佳实践总结

为了写出专业、健壮的代码，请务必刻在 DNA 里的几条军规：

1. 名副其实：只在没有它就不行的“真正标题”上使用它。绝不要仅仅为了获得“加粗”或“变大”的视觉效果而去写 <h1>。
2. 阶级不可逾越：严格按照层级使用，不要跳级（比如 h1 下面直接跟 h3）。这不仅是礼仪，更是对 SEO 和辅助工具的尊重。
3. h1 唯一论：通常情况下，一个页面最好只有一个 <h1>标签，用它来宣告这个页面的核心主旨。
4. 样式交给 CSS：如果不喜欢默认的加粗或大字号，大胆地用 CSS 去覆盖它（比如 font-weight: normal;），保留它的语义即可。

读者互动：

• 如果你觉得文章有待改进，请在评论区留言，我会认真考虑每一条建议。
• 如果觉得文章有帮助，欢迎点赞鼓励。
• 想与我共同进步，欢迎关注我的技术账号。
  💬 感谢各位读者的支持与关注！期待与大家一起在前端开发的道路上共同进步！🎉