浏览器按HTML规范校验嵌套逻辑确定父子关系，忽略缩进与空白字符；必须是直接子元素，若被包裹则父节点变为，自闭合标签必属某容器子级。

浏览器解析HTML时如何确定父子关系

浏览器不看缩进，只按规范校验嵌套逻辑。你写的

标题

，DOM树里

就是

的直接子节点；但若写成

标题

，

的父节点就变成

，语义层级被人为打断。

常见误判：把源码中换行或空格当成层级分隔——其实浏览器会忽略这些空白字符，除非它出现在

或 里。真正决定父子关系的，是标签是否合法嵌套、是否在规范允许的父元素列表中。

哪些标签会强制改变DOM层级结构

不是所有标签都“平等”。有些标签自带强约束，写错位置就会触发浏览器静默修正：

• 和 必须是 的直接子元素；中间插个注释、空行甚至
  

  HTML Text Extract

  从HTML页面（URL、文件或标准输入）中提取主体内容文本，去除导航、页脚、广告和模板文本。可直接传递给readability_check或其他文本工具。

  下载
  ，Chrome 就会把它塞进 开头，生成一个匿名 #text 节点
• 只能出现一次，且必须是 的直接子元素；嵌套在
  或
  里，它就失去“主内容”语义，SEO 和无障碍访问权重归零

• 不能作为 子元素，也不能包
  或另一个

  ；否则会被提升、拆分或丢弃
• 、 等自闭合标签永远不是顶层节点——它们必属某个容器的子级，哪怕源码没写父标签，浏览器也会补上（比如自动包裹进
  ）

用Chrome DevTools验证真实DOM层级

别信源码缩进，要看渲染后的实际结构。打开 Elements 面板后：

• 右键任意
  ～
  → “Inspect ARIA attributes”，检查 aria-level 是否连续、是否符合预期
• 展开 ，看首层子元素是不是
  、
  、
  这类语义主干；如果不是，说明结构被意外包裹（比如多了一层
  ）
• 选中
  ，看它的第一个子元素是不是
  ～
  ；如果不是，它和
  没区别，不会产生独立大纲
• 注意右下角 Accessibility 面板里的警告——例如 “Heading level skipped” 或 “Multiple
  elements”，这些都是层级断裂的明确信号

服务端/框架输出常导致的层级错乱

动态生成 HTML 时，结构更容易失控：

• React/Vue 组件中，全局 Layout 硬塞一个

  Logo

  ，页面组件又输出一个

  文章标题

  → 实际两个
  ，大纲分裂
• 富文本字段渲染后自动加
  包裹，用户输入的
  变成

  xxx

  → 违反嵌套规则，读屏器可能跳过
• CMS 导出 HTML 时，把 错放到 里 → 中文乱码，且该 失去编码声明作用
• SPA 路由切换后未更新 或
  → 屏幕阅读器仍读旧内容，语义锚点失效

最易被忽略的不是“有没有标签”，而是“它在哪个上下文里”。同一个

，放在
下是二级主标题，放在
里就是三级子标题——浏览器靠容器而非标签名判断层级。