至

的连续嵌套层级决定，跳级（如

后直接

）、多

、伪标题（如

）或装饰性标题混入均导致大纲断裂；须用

等语义分组元素构建子大纲，并通过axe DevTools等工具验证真实解析结构。 HTML 本身不生成文档目录大纲，必须靠语义化标题标签的层级关系 + 正确嵌套结构，才能让浏览器、读屏软件和 axe 等工具解析出可用的大纲。手动写错一级，整个结构就失效。 为什么 document-outline 工具报“大纲断裂”或“跳级” 这是最常被忽略的底层问题：HTML 大纲不是靠视觉缩进或 class 名称决定的，只认

复制

到

复制

的连续嵌套顺序。

复制

后直接出现

复制

→ 跳级，axe 报

复制heading-order

错误 多个

复制

→ 违反“主标题唯一”原则，部分读屏器只读第一个 用

复制

代替

复制

→ 完全不参与大纲，工具检测为“无标题” 标题在

复制

或页脚里也写了

复制

→ 被计入大纲，污染主体结构 怎么用

复制

修复子大纲断裂

复制

是唯一能重置标题层级的 HTML5 分组元素。它不生成大纲节点，但会让内部标题自成子单元。 没

复制

：

复制

主标题

章一

节一

→ 节一被判定为跳级（h1→h3） 加

复制

：

复制

主标题

章一

节一

→ 章一为 h2，节一为合法 h3 子节 别滥用：没有逻辑分组意图时硬套

复制

，反而干扰大纲解析

复制

、

复制

、

复制

同样具备子大纲能力，但语义不同，不能互换 怎么验证真实大纲结构（不是看 DOM 树） DevTools 的 Elements 面板看到的只是 HTML 结构，不是屏幕阅读器实际读出的大纲。必须用模拟无障碍解析的工具。 使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件 如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Andr​​oid友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Andr​​oid应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更 下载 立即学习 “ 前端免费学习笔记（深入） ”； Chrome：装

复制axe DevTools

扩展 → 点

复制Analyze

→ 查

复制Structure

下的

复制heading-order

和

复制heading-has-content

Firefox：右键 →

复制检查元素

→ 切到

复制Accessibility

面板 → 点

复制Outline

命令行：用

复制axe-cli https://yoursite.com --rules=heading-order

（需 npm install -g axe-cli） 注意：服务端渲染或 JS 动态插入标题后，必须等内容完全挂载再运行检测，否则漏判 动态渲染内容的大纲怎么不崩 React/Vue/SSR 页面里，标题常由组件异步注入，JS 扫描或 axe 检测容易错过，导致大纲错乱。 不要在

复制DOMContentLoaded

就跑大纲检查 —— 组件可能还没 mount 用

复制MutationObserver

监听

复制article

或主内容容器，当新

复制

出现时再触发 ID 补全和大纲校验 服务端若已知标题结构，优先在 HTML 中静态写出带 id 的

复制

，避免客户端补 ID 引入重复或空值 框架中慎用

复制v-if

或

复制ngIf

切换整组标题 —— 可能造成大纲节点突然消失，读屏器中断播报 大纲不是“写完就能用”的功能，而是贯穿开发、测试、交付的持续验证项。ID 冲突、跳级、动态缺失这三类问题，90% 的线上文档目录失效都源于其中某一个，且往往直到 axe 扫描才暴露。