浏览器根据到的嵌套层级和顺序自动生成文档大纲，等sectioning root重置heading隐含层级，跳级写heading会导致大纲断裂，需用真实工具验证大纲合理性。
浏览器怎么生成文档大纲
HTML 文档大纲不是靠开发者手动编号或写目录生成的，而是浏览器根据 <h1></h1> 到 <h6></h6> 的嵌套层级和顺序自动构建的。这个大纲直接影响屏幕阅读器导航、SEO 结构理解，甚至部分浏览器的“文档概览”功能（如 Safari 的页面缩略图导航）。关键点在于：大纲只认 heading 元素，<section></section>、<article></article> 等语义标签本身不产生大纲节点，但能重置 heading 的隐含层级范围。
- 第一个
<h1></h1>是大纲根节点，后续所有 heading 按“最近上层 sectioning root”为边界计算层级 -
<section></section>、<article></article>、<aside></aside>、<nav></nav>是 sectioning root，它们内部的<h1></h1>被视为该区块的顶层标题，而非全局<h1></h1> - 跳级写 heading（如
<h2></h2>后直接写<h4></h4>）不会报错，但会导致大纲断裂——浏览器仍按数字顺序推断层级，可能把<h4></h4>当作<h3></h3>的子项，实际语义却脱节 - 没有 heading 的
<section></section>仍会出现在大纲中，但显示为“无标题”，对可访问性不利
为什么用 sectioning root 而不只是 h 标签
仅靠 <h1></h1>–<h6></h6> 无法表达“同一级标题下的并列区块”，比如产品页里“规格参数”和“用户评价”两个 <h2></h2>，它们逻辑上是同级内容块，但若都放在主 <main></main> 下，大纲里就只是两个兄弟节点；加上 <section></section> 包裹后，每个区块获得独立上下文，其内部 heading 重新计层，且能被辅助技术识别为独立可跳转单元。
-
<section></section>显式声明内容边界，避免 heading 层级被意外拉平（例如多个<h2></h2>连续出现时） - 没有
<section></section>时，<h3></h3>必须严格跟在<h2></h2>后才表示从属；有<section></section>后，<h3></h3>可以作为该区块内最高标题使用 - 过度嵌套
<section></section>（如三层以上）会让大纲树过深，屏幕阅读器需多次按键才能退出，反而降低效率
常见大纲错误与修复方式
最常踩的坑是“视觉优先”导致结构失真：用 CSS 把 <h3></h3> 样式调得比 <h2></h2> 大，或删掉 heading 只留 <div class="title">，结果大纲里根本没这个标题节点。
<ul><li>错误：用 <code><div> + class 模拟标题 → 修复：换回对应层级的 heading，哪怕样式重写
<li>错误：全页只用 <code><h1></h1>，靠 class 区分大小 → 修复：按内容关系补全 <h2></h2>–<h4></h4>，哪怕视觉一致
<section></section>，其中 <h3></h3> 被算进主内容层级 → 修复：用 <section></section> 包住整个表单，并确保它有 <h2></h2> 或更高级别标题<legend></legend> 或缺失 <legend></legend> 导致 <fieldset></fieldset> 不进入大纲 → 修复：每个 <fieldset></fieldset> 必须带非空 <legend></legend>，它会作为该组的标题出现在大纲中验证大纲是否合理的方法
别只靠肉眼检查，用真实工具跑一遍。Chrome 和 Firefox 开发者工具的“Accessibility”面板里都有“Document Outline”视图，能实时渲染当前大纲树；更轻量的方式是用 axe 浏览器插件一键扫描 heading 层级问题。
- 大纲里不应出现“跳级”节点（如
<h1></h1>→<h3></h3>中间缺<h2></h2>） - 同一 sectioning root 下，首个 heading 应为该区块逻辑顶层（通常是
<h2></h2>或<h3></h3>，取决于父级） - 所有交互区块（如
<fieldset></fieldset>、<details></details>）都应有可访问标题，否则大纲缺失关键导航点
