一个页面只能有一个h1且必须位于主干开头附近，h2–h6须严格按逻辑嵌套；多h1会导致搜索引擎与读屏器无法识别主次，h1后直跳h4则造成结构断裂、导航“掉层”，引发摘要错误、无障碍报错及爬虫抓取空结构等问题。
一个页面只能有一个 h1，且必须出现在内容主干开头附近；h2 到 h6 必须严格按逻辑嵌套，跳级或倒序会破坏 SEO 和屏幕阅读器导航。
为什么不能多个 h1 或跳级用 h4
搜索引擎和读屏软件靠标题层级生成内容大纲。h1 是整页唯一主题锚点，出现两次（比如 CMS 模板里轮播图、商品卡片都硬写 新品上市
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 及以下极少需要；真要用，优先考虑
React/Vue 中动态生成标题要防什么
用 props.level 渲染 level=0 或 level=7）。必须加 fallback：
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 只接受 1–6 的整数，其他值 fallback 到
h2 - 服务端渲染时确保首帧 DOM 已含有效
h1，别等 JS 注入 - 组件库里的卡片、弹窗等复用单元，禁用
h1，改用h2或通过aria-labelledby关联语义
Vue 的 v-html 或 React 的 dangerouslySetInnerHTML 若拼接标题标签，更要校验 level 值——字符串拼错一个数字，就可能输出
样式重置和移动端兼容要点
浏览器默认 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 和无障碍优化都在补洞。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
