一个页面只能有一个h1且必须位于主干开头附近，h2–h6须严格按逻辑嵌套；多h1会导致搜索引擎与读屏器无法识别主次，h1后直跳h4则造成结构断裂、导航“掉层”，引发摘要错误、无障碍报错及爬虫抓取空结构等问题。
一个页面只能有一个 h1，且必须出现在内容主干开头附近；h2 到 h6 必须严格按逻辑嵌套，跳级或倒序会破坏 SEO 和屏幕阅读器导航。
为什么不能多个 h1 或跳级用 h4
搜索引擎和读屏软件靠标题层级生成内容大纲。h1 是整页唯一主题锚点，出现两次（比如 CMS 模板里轮播图、商品卡片都硬写 <h1>新品上市</h1>）会让算法无法判断主次；h1 后直接 h4 会导致结构断裂——读屏器可能跳过中间缺失的 h2 和 h3，用户语音导航时直接“掉层”。
常见错误现象包括：
- 搜索结果摘要里显示的是“联系我们”而不是文章标题
- 无障碍测试工具报
heading-level-skipped错误 - SSR 首屏无
h1（比如加载中占位），爬虫抓到空结构
h2–h6 怎么对应真实内容逻辑
别把 h2 当“大号字”，h3 当“中号字”——它们是父子关系信号。例如一篇技术文档：
立即学习“前端免费学习笔记（深入）”；
-
h1：useEffect 依赖数组为空数组时的陷阱 -
h2：执行时机与清理逻辑 -
h3：mount 时的副作用注册 -
h3：unmount 时的清理函数触发 -
h2：常见误用场景 -
h3：误将 props 放入空数组 -
h3：忽略函数引用变化
注意：h4 及以下极少需要；真要用，优先考虑 <dl></dl> 或带语义的 class，而非强行塞进标题流。
React/Vue 中动态生成标题要防什么
用 props.level 渲染 <h></h> 很常见，但风险在于传入值不连续或越界（比如 level=0 或 level=7）。必须加 fallback：
- 只接受 1–6 的整数，其他值 fallback 到
h2 - 服务端渲染时确保首帧 DOM 已含有效
h1，别等 JS 注入 - 组件库里的卡片、弹窗等复用单元，禁用
h1，改用h2或通过aria-labelledby关联语义
Vue 的 v-html 或 React 的 dangerouslySetInnerHTML 若拼接标题标签，更要校验 level 值——字符串拼错一个数字，就可能输出 <h7></h7> 这种非法标签。
样式重置和移动端兼容要点
浏览器默认 h1–h6 的 margin 和 line-height 不一致，尤其旧版 iOS Safari 对 h6 行高处理异常。建议项目起步时统一重置：
h1, h2, h3, h4, h5, h6 {
margin: 0;
font-weight: normal;
line-height: 1.2;
}
真正关键的是：别靠字体大小判断层级是否合理——打开 DevTools 的 Accessibility 面板，右键检查节点，看它被识别为第几级 heading 元素。视觉上 h6 比 h1 还大也没关系，只要 DOM 结构没乱，机器就能读对。
最常被忽略的一点：标题层级不是“写完再补”，而是在写第一段正文前，就得想清楚整个内容骨架——因为一旦结构错了，后续所有 SEO 和无障碍优化都在补洞。
