最快方式是用chrome devtools elements面板右键标题元素选“inspect aria attributes”查aria-level是否连续合理；需检查h1唯一性及位置、有无跳级、section是否以标题开头，因语义容器决定标题层级归属。
直接打开 Chrome DevTools 的 Elements 面板，右键任意 <h1></h1>～<h6></h6> 元素 → “Inspect ARIA attributes”，看 aria-level 是否连续、是否符合内容逻辑——这是判断大纲是否健康的最快方式。
怎么用 Chrome DevTools 快速验证标题层级
浏览器不会主动报错，但结构问题会在 Accessibility 面板里标红。重点检查三处：
-
<h1></h1>是否唯一且位于<main></main>内部（而非被全局 header 或 JS 动态插入） - 是否存在跳级，比如
<h2></h2>后紧跟<h4></h4>，中间缺<h3></h3> - 每个
<section></section>是否以<h2></h2>～<h6></h6>开头；若用<div> 包裹 <code><h3></h3>，它会被当成跳级节点为什么
<section></section>会影响大纲解析标题的语义归属不是只看标签名，而是看它在哪个语义容器里。同一个
<h3></h3>，放在<section></section>内是子级，放在<main></main>直接子级就是平级。-
<main><h2>A</h2> <section><h3>B</h3></section></main>→ B 是 A 的子节 -
<main><h2>A</h2> <div><h3>B</h3></div></main>→ B 被识别为跳级，Accessibility 面板警告 - 多个
<article></article>并列时，各自内部的<h1></h1>不冲突——它们构成独立大纲上下文，不参与外层计数
CMS 或框架中动态插入标题容易踩的坑
服务端模板、React/Vue 组件、富文本编辑器输出，都可能在不知情时破坏层级。常见现象：
- 全局 Layout 组件硬写一个
<h1>Logo</h1>，页面组件又输出一个<h1>文章标题</h1>→ 实际两个<h1></h1>，大纲分裂 - 富文本字段渲染后自动包裹
<p></p>，把用户输入的<h3></h3>塞进<p></p>里 →<p></p> <h3>xxx</h3>违反嵌套规则，部分读屏器直接忽略 - SPA 路由切换后没更新
<h1></h1>文本，屏幕阅读器仍读旧标题
最常被忽略的结构性细节
不是“有没有用
<h1></h1>”，而是“它在哪儿、被谁包裹、和谁并列”。<main></main>下直接放<h1></h1>是安全的；但若中间夹了一个没语义的<div class="wrapper">，就等于人为加了一层不可见的结构干扰。同样，<code><article></article>内部允许<h1></h1>，但前提是它真能独立分发——如果只是个卡片样式容器，套<section></section>+<h2></h2>更准确。 -
