构建可靠文档大纲的前提是唯一h1并严格逐级嵌套h2→h3→h4，不跳级、不倒序、不伪装；h1须唯一且语义准确，SPA需同步更新，section可重置局部层级，样式与语义必须分离。
一个页面只用一个 h1，从它开始逐级向下嵌套 h2 → h3 → h4，不跳级、不倒序、不伪装，DOM 层级连贯，语义关系清晰——这就是构建可靠文档大纲的全部前提。
h1 必须唯一且直指核心
首页写“品牌名 + 主定位”，文章页就是文章标题本身，产品页就写具体产品名称。避免模板中轮播图、推荐栏、侧边栏各自塞一个 <h1>新品上市</h1>，否则读屏器和搜索引擎无法识别主次。SPA 路由切换时，必须同步更新 h1 文本，不能靠 CSS 隐藏旧的、显示新的；服务端首屏 HTML 里就得有真实有效的 h1，不能等 JS 加载完再插入。
h2–h6 必须严格按逻辑父子关系嵌套
每个 h2 应该是 h1 的直接子模块，每个 h3 必须隶属于某个 h2，依此类推。不是“字号越小层级越低”，而是“位置越深，从属关系越细”。
- 合法结构：
<h1>…</h1><h2>…</h2><h3>…</h3>或<h1>…</h1><h2>…</h2><h2>…</h2> - 非法结构：
<h1>…</h1><h3>…</h3>（跳过 h2）、<h2>…</h2><h4>…</h4>（跳过 h3）、<h3>…</h3><h1>…</h1>（倒序） - 真需要更细颗粒度？优先用
<details>、<dl>或带语义 class 的<div>，而不是硬塞 h5/h6
用 <section> 修复局部层级断裂
<section> 是唯一能重置标题层级的 HTML5 分组元素。它不生成大纲节点，但会让内部标题自成子单元。
立即学习“前端免费学习笔记（深入）”；
- 错误写法：
<h1>产品页</h1><h2>规格</h2><h3>尺寸</h3>→ h3 被判定为跳级（h1 → h3） - 正确写法：
<h1>产品页</h1><section><h2>规格</h2><h3>尺寸</h3></section>→ h2 是该 <section> 的顶层，h3 是其合法子级 - 别滥用：<nav>、<article> 同样具备子大纲能力，但语义不可互换；三层以上嵌套 <section> 反而会让屏幕阅读器退出困难
样式与语义必须彻底分离
可以用 CSS 把 h3 设得比 h1 还大，只要 DOM 结构正确，机器仍能读对层级。但千万别用 <div class="h3"> 模拟标题——语义为零，SEO 和无障碍全失效。
- 起步建议重置默认样式：
h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: normal; line-height: 1.2; } - 禁用
v-html或dangerouslySetInnerHTML拼接标题标签——拼错一个数字，整个大纲就垮了 - 动态渲染时，
level值必须校验为 1–6 的整数；非合规值统一 fallback 到 h2（比 fallback 到 h1 更稳妥）
