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