标题层级重构是重建dom中内容逻辑路径，确保浏览器大纲算法生成正确语义树，以保障屏幕阅读器导航、seo和自动化工具识别准确；需通过devtools检查heading-level连续性，用sectioning root（如）隔离层级修复跳级，动态渲染时校验最终dom合规性，严格限定每页唯一且位于内。
先确认问题是否真实存在
别只看视觉效果。打开 Chrome DevTools →「Accessibility」面板 → 展开 heading-level 列，逐个点击页面标题，观察数值是否连续、是否突变（比如从 2 直跳到 4）。右键标题 →「Reveal in Accessibility Tree」，看它在无障碍树中的实际嵌套位置。如果显示为 “level 4” 但前一个是 h2，那已发生跳级，结构已断裂。
用 sectioning root 主动隔离层级
HTML5 的 、、、 都是 sectioning root，它们能让内部的 <h1>–<h6></h6>
</h1> 重新计层。这不是“加个容器好看”，而是修复跳级的合法手段。
- 错误写法：
<h1>产品页</h1> <h2>规格</h2> <h3>尺寸</h3>→ h1 到 h3 是跳级，大纲断裂 - 正确写法：
<h1>产品页</h1> <section><h2>规格</h2> <h3>尺寸</h3></section>→<h2></h2>成为该<section></section>的顶层标题，<h3></h3>是其合法子级 - 注意：三层以上嵌套
<section></section>容易让屏幕阅读器退出困难，优先用两层：外层<section></section>包功能区块，内层用<h2></h2>起始
动态渲染时守住层级底线
JS 插入标题、SSR 模板拼接、CMS 输出内容，最容易失控。关键不是“写了标签”，而是“最终 DOM 是否合规”。
- 服务端或构建阶段做校验：用
remark-lint-heading-increment检查 Markdown 渲染出的 HTML；或在 SSR 后用 jsdom 加载 HTML，跑脚本检查document.querySelectorAll('h1, h2, h3, h4, h5, h6')的 level 值是否逐级递进 - 禁止模板硬编码占位
<h1>MySite</h1>，再额外渲染一个<h1>订单确认</h1>—— 这直接导致双 h1，主标题语义被稀释 - 第三方组件（如 Card）若默认输出
<h3>标题</h3>且无意义，必须通过 props 禁用，或覆写为<div role="heading" aria-level="3"> <h3>确保 h1 位置与语义一致</h3> <p><code><h1></h1>应出现在<main></main>内部，代表当前页面最核心内容主题。它不该在<header></header>的 logo 区域里——那个位置属于品牌标识，不是主体内容。- 正确结构：
<header><h1>MySite</h1></header><main><h1>订单确认</h1> <p>您的订单已提交…</p></main> - 避免隐藏但保留：用
display: none或aria-hidden="true"把某个<h1></h1>隐藏了，DOM 里仍存在，上下文就断了——要么删掉，要么用<span></span>替代 - 每个页面有且仅有一个
<h1></h1>，且必须可被无障碍树读取，不能靠 CSS 视觉隐藏后又用 JS 动态 show
- 正确结构：
