html标题标签h1–h6必须严格按语义层级使用，不可跳跃或滥用；一个页面仅一个h1作主标题，h2为一级分块，h3为h2子模块，样式应由css控制而非降级标签。
html 标题标签不是“选一个用就行”，而是语义结构的骨架——用错层级，屏幕阅读器会读错、seo 会降权、协作时别人得猜你哪段是章、哪段是节。
h1 到 h6 的层级关系不能跳着用
浏览器不拦你写 <h1></h1>
<h3></h3>，但语义上就断层了：h3 暗示它属于某个 h2 下的子节，可你没写 h2，等于逻辑塌方。实际场景里，这会让视障用户在导航时“掉进空层级”。
常见错误现象：document.querySelector('h2') 返回 null，结果发现页面里全是 h1 和 h4，中间缺了 h2/h3。
- 一个页面有且仅有一个
h1，代表主主题（比如文章标题、页面核心功能名） -
h2是一级分块（如“安装步骤”“配置说明”） -
h3是h2下的子模块（如“Linux 安装”“macOS 安装”） - 别为了样式好看降级用
h4代替h2——该用 CSS 调样式，不该用标签凑视觉
用 CSS 改样式，别用标题标签“假装”是标题
有人把 h6 当小字副标题用，或者给 h1 加 font-size: 12px 做页脚文字——这等于把语义和视觉绑死。搜索引擎和辅助工具只认标签名，不看字号。
使用场景：你需要一个小号加粗文字？用 span + class；需要强调一段话？用 strong；需要标题结构？老老实实按层级用 h1–h6。
立即学习“前端免费学习笔记（深入）”；
-
h1默认大而重，但它的价值不在大小，在“这是全文唯一主干” - 所有标题默认有上下 margin，想清空？用 CSS 重置
margin，而不是换标签 - 如果真要“视觉上像 h2，语义上是段落”，那就用
p+ class，别硬塞h2
SEO 和无障碍测试时，标题层级是第一道检查项
Google 的 Lighthouse、axe 插件、甚至 macOS 的 VoiceOver，一打开就先扫 h1–h6 是否连续、是否缺失 h1、是否有跳跃。报错常是：Heading levels should only increase by one 或 Page has no main landmark。
性能影响几乎为零，但兼容性影响直接：某些旧版读屏软件遇到 h1→h4 跳变，会直接跳过中间内容。
- 检查工具命令行跑一遍：
curl -s URL | grep -o '<h sort>，看有没有漏掉或乱序</h> - 本地开发时，浏览器插件 “HeadingsMap” 一点就出树状图，比肉眼扫 HTML 快得多
- SSR 页面尤其注意：服务端吐出的 HTML 必须保证层级正确，JS 后续补的标题不算数
真正难的不是记住 h1 最大、h6 最小，而是每次写新组件时，下意识问一句：“这个标题在整页大纲里排第几层？”——没人盯着你，但结构松动一次，后续加功能、改样式、做无障碍适配，都会多一层隐性成本。
