html文档大纲由至的连续嵌套层级决定，跳级（如后直接）、多、伪标题（如）或装饰性标题混入均导致大纲断裂；须用等语义分组元素构建子大纲，并通过axe devtools等工具验证真实解析结构。
HTML 本身不生成文档目录大纲，必须靠语义化标题标签的层级关系 + 正确嵌套结构，才能让浏览器、读屏软件和 axe 等工具解析出可用的大纲。手动写错一级，整个结构就失效。
为什么 document-outline 工具报“大纲断裂”或“跳级”
这是最常被忽略的底层问题：HTML 大纲不是靠视觉缩进或 class 名称决定的，只认 <h1></h1> 到 <h6></h6> 的连续嵌套顺序。
-
<h1></h1>后直接出现<h3></h3>→ 跳级，axe 报heading-order错误 - 多个
<h1></h1>→ 违反“主标题唯一”原则，部分读屏器只读第一个 - 用
<div class="h2"> 代替 <code><h2></h2>→ 完全不参与大纲，工具检测为“无标题” - 标题在
<aside></aside>或页脚里也写了<h2></h2>→ 被计入大纲，污染主体结构 - 没
<section></section>：<h1>主标题</h1> <h2>章一</h2> <h3>节一</h3>→ 节一被判定为跳级（h1→h3） - 加
<section></section>：<h1>主标题</h1> <section><h2>章一</h2> <h3>节一</h3></section>→ 章一为 h2，节一为合法 h3 子节 - 别滥用：没有逻辑分组意图时硬套
<section></section>，反而干扰大纲解析 -
<article></article>、<nav></nav>、<aside></aside>同样具备子大纲能力，但语义不同，不能互换 - 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 动态插入标题后，必须等内容完全挂载再运行检测，否则漏判
- 不要在
DOMContentLoaded就跑大纲检查 —— 组件可能还没 mount - 用
MutationObserver监听article或主内容容器，当新<h2></h2>出现时再触发 ID 补全和大纲校验 - 服务端若已知标题结构，优先在 HTML 中静态写出带 id 的
<h2></h2>，避免客户端补 ID 引入重复或空值 - 框架中慎用
v-if或ngIf切换整组标题 —— 可能造成大纲节点突然消失，读屏器中断播报
怎么用 <section></section> 修复子大纲断裂
<section></section> 是唯一能重置标题层级的 HTML5 分组元素。它不生成大纲节点，但会让内部标题自成子单元。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
怎么验证真实大纲结构（不是看 DOM 树）
DevTools 的 Elements 面板看到的只是 HTML 结构，不是屏幕阅读器实际读出的大纲。必须用模拟无障碍解析的工具。
动态渲染内容的大纲怎么不崩
React/Vue/SSR 页面里，标题常由组件异步注入，JS 扫描或 axe 检测容易错过，导致大纲错乱。
大纲不是“写完就能用”的功能，而是贯穿开发、测试、交付的持续验证项。ID 冲突、跳级、动态缺失这三类问题，90% 的线上文档目录失效都源于其中某一个，且往往直到 axe 扫描才暴露。
