一个页面必须且只能有一个h1，h2–h6须严格逐级嵌套；跳级（如h2后直连h4）会导致w3c大纲算法失效，引发屏幕阅读器导航错乱、seo偏差及自动化工具报错。
一个页面只该有一个 <h1></h1>，且标题必须逐级递进——跳级（比如 <h2></h2> 后直接写 <h4></h4>）不是“看起来不太整齐”的小问题，而是会让浏览器大纲算法彻底失效，导致屏幕阅读器导航错乱、SEO 理解偏差、甚至部分自动化测试工具直接报错。
为什么 Chrome DevTools 的 Accessibility 面板里 heading-level 会突变？
浏览器严格按 W3C Outline Algorithm 解析标题：每个 heading 只能比前一个深一级，或回退任意级。<h2></h2> → <h3></h3> 合法，<h2></h2> → <h4></h4> 就算跳级。一旦跳级，Accessibility 面板里的 heading-level 值会突然从 2 跳到 4，但语义上它仍被当作 <h3></h3> 的子项处理，造成大纲断裂。
常见诱因包括：
- 模板中硬编码了
<h1>MySite</h1>，页面又渲染一个<h1>订单确认</h1> - JS 动态插入标题时，
props.level传入了 "4" 却没做范围校验 -
display: none或aria-hidden="true"隐藏了某个<h1></h1>，但 DOM 仍存在，上下文已丢失
如何用 <section></section> 修复标题层级断裂？
<section></section> 不是加样式的容器，它是 sectioning root，能让内部的 <h1></h1>–<h6></h6> 重新计层。没有它，<h3></h3> 必须紧跟在 <h2></h2> 后才合法；有了它，<h3></h3> 可以作为该区块内最高标题使用。
错误写法：<h1>产品页</h1>
<h2>规格</h2>
<h3>尺寸</h3> → <h3></h3> 被判定为跳级（<h1></h1> → <h3></h3>）
正确写法：<h1>产品页</h1>
<section><h2>规格</h2>
<h3>尺寸</h3></section> → <h2></h2> 是该 <section></section> 的顶层，<h3></h3> 是其合法子级
注意：<nav></nav>、<article></article>、<aside></aside> 同样是 sectioning root，但语义不可互换；三层以上嵌套 <section></section> 会让屏幕阅读器退出困难。
动态渲染和 SSR 场景下怎么确保标题结构不崩？
JS 插入的标题常忽略已有层级上下文，CMS 模板也容易输出无约束的深度。关键不是“写了标签”，而是“渲染后真实 DOM 是否合规”。
实操建议：
- 用浏览器 DevTools 的「Accessibility」面板检查「Heading level」是否连续，右键标题 → “Reveal in Accessibility Tree” 看层级值
- 服务端或构建时加校验：例如用
remark-lint+remark-lint-heading-increment检查 Markdown 渲染出的 HTML - SSR/静态生成中，确认每个页面的
<h1></h1>是动态注入的真实标题，而非模板里写死的占位符（如<h1>{{ title }}</h1>却没传值） - 第三方 UI 组件（比如 Card）可能默认渲染无意义的
<h3></h3>，必要时用属性禁用或覆写
最常被忽略的点是：标题层级不是视觉设计的副产品，而是内容逻辑的强制映射。哪怕所有标题字号一致，<h1></h1> 到 <h6></h6> 的嵌套关系也必须真实反映信息主次——否则，机器读不懂，人也难维护。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
