页面大纲是浏览器根据HTML标题标签（h1–h6）自动生成的语义层级视图，需满足全站仅一个h1、禁止跳级、每个语义区块必须有标题三条硬规则，并配合main/article/section等语义容器提升结构可信度。
页面大纲是浏览器或辅助工具根据 HTML 标题标签（h1–h6）及其嵌套结构自动生成的逻辑层级视图，它不依赖 CSS 样式，只反映语义结构。检验标题层级是否正确，关键就是让这个大纲清晰、连续、无断裂——它直接暴露你是否跳级、滥用或遗漏了标题。
用浏览器原生工具快速查看大纲
现代浏览器（Chrome、Edge、Firefox）都内置了大纲查看能力，无需插件：
- 在页面任意位置右键 → 选择“检查”打开开发者工具
- 切换到“元素”面板，点击右上角三个点 → More Tools → View page outline（Chrome/Edge）或Accessibility → Outline（Firefox）
- 立即显示当前页的标题层级树：h1 在顶，h2 缩进在其下，h3 再缩进，依此类推
如果看到某处出现“h1 → h3”跳级、多个 h1 并列、或某个 section 内没有标题，大纲里会直接标出断层，这就是最直观的错误信号。
确保大纲合法的三条硬规则
大纲不是“看起来整齐”就行，它必须符合 HTML5 语义规范：
立即学习“前端免费学习笔记（深入）”；
Wechat Article Html
下载
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
- 全站仅一个 h1：代表整页唯一核心主题，比如“产品首页”“用户个人中心”。不要为每个 banner、模块或卡片加 h1
- 禁止跳级：h1 后应接 h2；h2 下可接 h3，但不能 h2 直接跳 h4。跳级会让大纲出现“空档”，屏幕阅读器会误判内容归属
- 每个语义区块必须有标题：每个 section、article、nav（若为独立导航区）内部都应包含且仅包含一个 h1–h6。没标题的 section 是语义残缺，大纲中会显示为“无标题区块”
配合语义容器让大纲更可信
单纯靠 h1–h6 不足以支撑复杂页面的大纲可信度，需用 HTML5 区块标签锚定范围：
- 把主内容包裹在 main 中，并在其内用 h1 开始标题流
- 每个独立文章用 article 包裹，内部以 h2 起始（此时 h2 在 article 内相当于该文的“最高级标题”，不会和页面 h1 冲突）
- 用 section 划分逻辑章节，每个 section 必须带 h2 或更高级别标题（如该 section 是 article 的子部分，可用 h3）
这样生成的大纲会分层呈现：主大纲（main 下）、子大纲（article 下）、再下一级（section 下），结构一目了然，也经得起 SEO 和无障碍检测。
用验证工具交叉核对
人工看可能漏掉细节，推荐两个轻量验证方式：
- W3C Markup Validation Service：提交 HTML 源码，它会报出“Section lacks heading”“Heading level is too high”等具体语义错误
- axe DevTools 浏览器插件：运行后直接高亮“Incorrect heading order”“Missing document language”等问题，附带修复建议
这些工具不评判设计，只校验结构——它们输出的结果，就是你页面大纲是否真正“能被机器读懂”的最终凭证。
