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