浏览器按HTML规范校验嵌套逻辑确定父子关系，忽略缩进与空白字符；必须是直接子元素，若被包裹则父节点变为，自闭合标签必属某容器子级。
浏览器解析HTML时如何确定父子关系
浏览器不看缩进，只按规范校验嵌套逻辑。你写的 <main><section><h2>标题</h2></section></main>，DOM树里 <section></section> 就是 <main></main> 的直接子节点；但若写成 <main><div><section><h2>标题</h2></section></div></main>，<section></section> 的父节点就变成 <div>，语义层级被人为打断。
<p>常见误判：把源码中换行或空格当成层级分隔——其实浏览器会忽略这些空白字符，除非它出现在 <code><pre class="brush:php;toolbar:false;"></pre> 或 <textarea></textarea> 里。真正决定父子关系的，是标签是否合法嵌套、是否在规范允许的父元素列表中。
哪些标签会强制改变DOM层级结构
不是所有标签都“平等”。有些标签自带强约束，写错位置就会触发浏览器静默修正：
-
和必须是的直接子元素；中间插个注释、空行甚至<p></p><div class="aritcle_card flexRow"> <div class="artcardd flexRow"> <a class="aritcle_card_img" href="/xiazai/skill10246" title="HTML Text Extract"><img src="https://img.php.cn/upload/skill/001/246/273/6adaf20dee630206.jpg" alt="HTML Text Extract" ></a> <div class="aritcle_card_info flexColumn"> <a href="/xiazai/skill10246" title="HTML Text Extract">HTML Text Extract</a> <p>从HTML页面（URL、文件或标准输入）中提取主体内容文本，去除导航、页脚、广告和模板文本。可直接传递给readability_check或其他文本工具。</p> </div> <a href="/xiazai/skill10246" title="HTML Text Extract" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div>，Chrome 就会把它塞进开头，生成一个匿名#text节点 -
<main></main>只能出现一次，且必须是的直接子元素；嵌套在<section></section>或<header></header>里，它就失去“主内容”语义，SEO 和无障碍访问权重归零 -
<p></p>不能作为子元素，也不能包<div> 或另一个 <code><p></p>；否则会被提升、拆分或丢弃 -
<img alt="如何使用HTML解析引擎识别标签层级" >、<input>等自闭合标签永远不是顶层节点——它们必属某个容器的子级，哪怕源码没写父标签，浏览器也会补上（比如自动包裹进<p></p>） - 右键任意
<h1></h1>～<h6></h6>→ “Inspect ARIA attributes”，检查aria-level是否连续、是否符合预期 - 展开
，看首层子元素是不是<header></header>、<main></main>、<footer></footer>这类语义主干；如果不是，说明结构被意外包裹（比如多了一层<div class="wrapper">） <li>选中 <code><section></section>，看它的第一个子元素是不是<h2></h2>～<h6></h6>；如果不是，它和<div> 没区别，不会产生独立大纲 <li>注意右下角 Accessibility 面板里的警告——例如 “Heading level skipped” 或 “Multiple <main> elements”，这些都是层级断裂的明确信号</main> </li> <h3>服务端/框架输出常导致的层级错乱</h3> <p>动态生成 HTML 时，结构更容易失控：</p> <ul> <li>React/Vue 组件中，全局 Layout 硬塞一个 <code><h1>Logo</h1>，页面组件又输出一个<h1>文章标题</h1>→ 实际两个<h1></h1>，大纲分裂 - 富文本字段渲染后自动加
<p></p>包裹，用户输入的<h3></h3>变成<p></p> <h3>xxx</h3>→ 违反嵌套规则，读屏器可能跳过 - CMS 导出 HTML 时，把
<meta charset="UTF-8">错放到里 → 中文乱码，且该<meta>失去编码声明作用 - SPA 路由切换后未更新
<title></title>或<h1></h1>→ 屏幕阅读器仍读旧内容，语义锚点失效
用Chrome DevTools验证真实DOM层级
别信源码缩进，要看渲染后的实际结构。打开 Elements 面板后：
立即学习“前端免费学习笔记（深入）”；
最易被忽略的不是“有没有标签”，而是“它在哪个上下文里”。同一个 <h2></h2>，放在 <main></main> 下是二级主标题，放在 <section></section> 里就是三级子标题——浏览器靠容器而非标签名判断层级。
