关键不是“有没有用h1–h6”，而是浏览器和辅助技术能否生成逻辑连贯、无断裂的大纲；需用chrome devtools右键标题选“reveal in accessibility tree”查看真实解析结构，重点检查section等是否含显式标题、有无孤立标题、main内是否有可聚焦标题、标题嵌套是否合规、w3c报错如“section lacks heading”是否修复。
页面标题层级是否通过结构化校验，关键不是“有没有用 h1–h6”，而是浏览器和辅助技术能否据此生成逻辑连贯、无断裂的大纲。测试要围绕大纲生成规则展开，而非简单数标签。
用 Chrome DevTools 快速查看实际大纲树
打开开发者工具 → Elements 面板 → 右键任意标题（如 h2）→ 选择 “Reveal in Accessibility Tree”。这里显示的是浏览器真实解析出的结构化大纲，比肉眼数标签更可靠。重点关注：
- 每个 section、article、nav 是否都出现在大纲中，且有对应标题节点
- 是否存在孤立的 h2～h6（父容器既不是 section 也不是 main 或 article）
- main 内是否至少有一个可聚焦标题（h1 或带 aria-labelledby 的元素）
检查标题嵌套与语义归属是否合规
标题层级不只看标签名，更取决于它在哪个语义容器里。例如：
- section 内的 h3 是子级；div 包裹的 h3 会被识别为跳级，Accessibility 面板会标红警告
- main 下直接放 h1 是安全的；但若中间夹了 div class="wrapper"，就人为插入了一层无语义结构，破坏层级归属
- 多个并列 article 各自内部允许有 h1，它们构成独立大纲上下文，不参与外层计数
验证 W3C 结构性要求是否满足
访问 W3C Markup Validator 提交源码，重点排查以下报错：
- “Section lacks heading”：不是样式问题，而是该 section DOM 中确实没有 h1～h6。即使视觉隐藏，也要保留标题标签，可用 visually-hidden 类
- “Duplicate ID” 或 “Element header not allowed as child of element header”：说明语义容器嵌套违规，比如 header 套了 main 或另一个 header
- “Bad value … for attribute datetime”：若时间用于文章元数据，格式错误会影响结构化分发，间接拖累标题上下文可信度
人工核对三项硬性结构前提
无论工具结果如何，这三点必须手动确认：
- h1 唯一性与位置：全页只能有一个 h1，且应位于 main 内部（非全局 header 或 JS 动态插入的 logo）
- 无跳级现象：比如 h2 后直接出现 h4，中间缺 h3；或富文本输出把用户写的 h3 塞进了 p 标签里（p>h3 违反嵌套规则）
- 每个语义分区有显式标题：包括 section、article、aside、nav——不能靠 CSS 文字或 JS 插入补位，DOM 中必须存在可读标题节点
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
