一个页面只能有一个h1且须位于内容主干开头附近，否则搜索引擎和屏幕阅读器无法锚定主题；h2–h6必须严格嵌套，跳级（如h2后直接h4）会导致语义断裂、读屏器“掉层”、爬虫抓取空结构。
一个页面只能有一个 h1，且必须出现在内容主干开头附近；h2–h6 必须严格按逻辑嵌套，跳级或倒序会直接导致 SEO 折损、读屏器“掉层”、爬虫抓到空结构。
为什么 h1 不能多个或延迟出现
搜索引擎和屏幕阅读器靠 h1 錨定整页主题。CMS 模板里轮播图、商品卡片硬塞 <h1>新品上市</h1>，会让算法无法判断主次；SSR 首屏 DOM 里没有 h1（比如加载中只渲染占位符），爬虫就可能抓到空大纲。常见现象包括：搜索摘要显示“联系我们”而非正文标题，无障碍测试报 heading-level-skipped 错误。
如何避免 h2→h4 这类跳级
跳级不是样式问题，是语义断裂。例如写完 <h2>执行时机</h2> 后直接跟 <h4>清理函数触发</h4>，读屏器会跳过缺失的 h3 层，用户语音导航时“掉层”。真实内容逻辑应是：
-
h2是h1的一级子节（如“副作用机制”） -
h3必须隶属于某个h2（如“mount 注册流程”） -
h4及以下极少需要；真要用，优先考虑<dl></dl>或带语义的 class，而非强行塞进标题流
动态生成标题时怎么防 h7 或 h0
React/Vue 中用 props.level 渲染 <h></h> 很常见，但传入非 1–6 的值（比如 level=0、level=7 或字符串 "2.5"）会导致非法标签。必须加 fallback：
- 只接受
1–6的整数，其他值 fallback 到h2 - 服务端渲染首帧 DOM 必须含有效
h1，别等 JS 注入 -
v-html或dangerouslySetInnerHTML若拼接标题标签，更要校验 level 值——拼错一个数字，就输出<h7></h7>这种浏览器不识别的标签
样式重置后仍要验证语义层级
重置 h1–h6 的 margin 和 line-height 是基础操作，但真正关键的是：别靠字体大小判断层级是否合理。打开 DevTools 的 Accessibility 面板，右键检查节点，看它被识别为第几级 heading 元素。视觉上 h6 比 h1 还大也没关系，只要 DOM 结构没乱，机器就能读对。
