html层级即dom树结构，由标签嵌套关系决定；浏览器不依赖缩进，但人可通过下首层元素定位主干，缩进加深为子级、相同为兄弟，自闭合标签必属某容器，仅一次且不可嵌套于语义边界标签内。
HTML模板没有“模板层级”这个独立概念，所谓层级结构就是DOM树本身——它由源码中标签的嵌套关系直接生成，浏览器不认缩进，但人靠缩进快速定位父子关系。
怎么从HTML源码一眼看出DOM树层级
浏览器解析HTML时会自动修复部分错误（比如遗漏闭合标签），但原始缩进仍是最快判断父子/兄弟关系的视觉线索。关键不是“数空格”，而是盯住三处：
-
下首层缩进的元素（如<header></header>、<main></main>、<div class="container">）就是页面主干起点 <li>缩进加深一级，大概率是上一级的子元素；缩进相同，则为兄弟节点</li> <li>自闭合标签（如 <code><img>、<input>、<meta>）永远不可能是顶层元素，一定属于某个容器的子级 -
<main></main>只能出现一次，且不能嵌套在<article></article>、<aside></aside>、<footer></footer>、<header></header>、<nav></nav>内——否则语义冲突：一个“全局主内容”不可能同时是“某局部区块的内容” -
<section></section>必须有<h2></h2>–<h6></h6>标题，否则和<div> 无异，不会产生新的语义层级 <li> <code><article></article>可以嵌套<article></article>（如评论嵌套在文章里），但<main></main>里放多个<article></article>是常见且合法的 - 自动补全缺失的闭合标签（例如把
<p>hello</p><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill5117" title="HTML Extract"><img src="https://img.php.cn/upload/skill/000/000/081/179033952939354.jpg" alt="HTML Extract" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/skill5117" title="HTML Extract" class="overflowclass">HTML Extract</a> <p class="overflowclass">使用 MinerU 从 HTML 页面和文件中提取内容，将 HTML 转换为保持标题、列表、表格及文本层次结构的干净、结构化 Markdown。F...</p> </div> <a rel="nofollow" href="/xiazai/skill5117" title="HTML Extract" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div> <p>world</p>解析成两个独立<p></p>节点） - 修正非法嵌套（例如把
<div> <p></p> <div>xxx</div> </div>中的内层<div> 提升到 <code><p></p>外） - JS执行后动态插入或移除节点（比如
document.body.appendChild(...)），这部分DOM变化不会反映在原始HTML里
哪些语义标签会强制改变层级逻辑
HTML5语义标签不是装饰，它们自带隐含的层级约束，写错会导致DOM结构和预期不符：
为什么开发者工具看到的DOM和源码不一致
这不是bug，而是浏览器在解析阶段做了三类自动处理：
真正容易被忽略的是：自闭合标签的归属常被误判——<img> 看似孤立，但它在DOM树中必然挂载在某个父容器下；而 <svg></svg> 或 <canvas></canvas> 内部可能有完整子树，不能当成原子节点跳过分析。
