页面大纲脱节的根本原因是语义层级与dom嵌套不匹配。body必须直系包含header、nav、main等顶级语义块；main内只放核心内容；section/article须配h2–h6；nav仅含导航链接；避免div包裹语义元素。
为什么页面大纲会“脱节”——不是标签没用，是嵌套逻辑断了
页面大纲脱节的典型现象：Chrome 的「文档大纲」面板里出现空节点、跳级标题（h1后直接h3）、main里混着nav或aside、section没配h2却占了大纲位置。根本原因不是漏写标签，而是语义层级和 DOM 嵌套不匹配——比如把header塞进div class="wrapper"里，它就不再是body直系子元素，大纲解析器直接忽略其角色。
-
body必须直接包含header、nav、main、footer等顶级语义块，中间不能插任何div包裹 -
main内只放用户真正要读/操作的内容，广告、侧边栏、页脚链接一律剔除 -
section和article必须自带h2–h6，否则浏览器视其为无主题容器，仍计入大纲但无意义 -
nav只能包a或ul/li/a这类导航链接，搜索框、登录按钮、分页控件别硬塞进去
检查大纲是否连贯的三个实操动作
别等上线后再验，开发中就得实时盯住结构。打开 Chrome DevTools → Elements 标签页 → 右键任意元素 → 「Copy outerHTML」粘贴到文本编辑器里粗看嵌套；更关键的是用两个内置视图交叉验证：
- 在 Elements 面板顶部切换到「Accessibility」→ 点开「Landmarks」，确认
main、navigation、complementary等角色是否唯一且位置合理 - 回到 Elements → 右键
body→ 「Reveal in Outline」，看生成的大纲树有没有断裂、重复或空节点 - 控制台执行
document.body.children，输出列表里不该出现div开头的元素——如果有，说明顶层结构被人为打断
h1–h6嵌套错误的高发场景与修正方式
标题跳级不是样式问题，是结构信号污染。常见于 CMS 模板拼接、组件复用时忽略上下文：article组件自带h1，但被放进main后，整个页面就出现两个h1；或者小节内容直接从h3开始，因为开发者以为「视觉上小一点就该用h3」。
- 全站
h1必须唯一，且只出现在main或顶级article内部；子组件里的标题统一降级为h2起始 -
section和article内部可有自己的h1（HTML5 outline algorithm 支持），但实际项目中建议统一用h2，避免旧版读屏工具误判 - 动态渲染内容（如 React/Vue 组件）需在挂载前校验标题层级，例如用
useEffect检查document.querySelectorAll('h1').length是否≤1 - 绝对禁止用
h2模拟加粗段落、用h4当小提示文字——这些该用strong或span配 CSS
最容易被忽略的语义漂移点：那些「看起来像」但本质错位的标签
标签选错比不用更危险。比如把广告位塞进footer，表面看「在页面底部」，但它既不属于页面结尾也不属于某article的结尾；又比如用section包一个纯图标+短文案的卡片，没标题也没独立主题，纯粹为了栅格布局——这会让屏幕阅读器多出一个无意义的导航锚点。
-
aside用于补充信息（作者简介、相关文章、广告），不是所有「在旁边」的内容都算aside；若广告是主业务入口（如电商首页的「爆款推荐」），它属于main的一部分 -
figure必须同时含img和figcaption，缺一不可；单独一张图用img+alt即可 -
address只用于联系信息（邮箱、电话、地址），不能用来包裹文章作者名或发布日期 -
time的datetime属性必须是机器可解析格式（如2026-07-07），不能填「昨天」「3小时前」
main里混了导航、section缺了标题、body被div套了三层——这些细节不报错，但会让大纲树彻底失焦。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
