html标签层级由规范强制定义，非缩进决定；写错嵌套会触发浏览器静默修正甚至丢弃内容：和必须为的强制直系子元素，中间不可插入任何内容；只能在内且仅含文本；不可在中，其合法父元素为等流式容器；必须唯一且为直接子元素，不得嵌套于等语义标签内。
HTML标签的层级关系不是靠缩进决定的，而是由规范强制定义的父子/兄弟关系；写错嵌套位置，浏览器不会报错，但会静默修正甚至丢弃内容。
为什么
浏览器解析时严格按标准校验结构。 和 是 的强制直系子标签，中间不能插任何东西——包括空格、注释、<p></p> 或 <div>。
<ul>
<li>Chrome/Firefox 会把非法内容移到 <code> 开头，并在开发者工具里显示一个匿名文本节点（#text）
<title></title> 若被挤到 <meta charset="UTF-8"> 落在
<p></p> 为什么不能放在
<p></p> 是流式内容元素，语义上只允许作为 及其子容器（如 <section></section>、<article></article>、<footer></footer>）的子元素。
- 如果硬写成
<p>test</p><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill4293" title="Doc To HTML"><img src="https://img.php.cn/upload/skill/000/000/081/178998486916110.jpg" alt="Doc To HTML" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/skill4293" title="Doc To HTML" class="overflowclass">Doc To HTML</a> <p class="overflowclass">使用 MinerU 文档处理引擎将 Word 文档（.doc、.docx）转换为保留结构和格式的干净 HTML。</p> </div> <a rel="nofollow" href="/xiazai/skill4293" title="Doc To HTML" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div>，浏览器会把它移出，塞进开头 -
<p></p>内部不能嵌套<div>、<code><h1></h1>、另一个<p></p>—— HTML5 允许极少数例外（如<span></span>），但多数场景下会导致验证失败或样式错乱 - 它的合法父元素列表是固定的，不是“能放进去就等于能用”
- 错误写法：
<section><main></main></section>—— 浏览器不报错，但语义失效，<main></main>的“唯一性”被破坏 - 正确做法：主干内容直接用
<main></main>包裹，内部再用<section></section>划分小节 - 实际影响：屏幕阅读器可能跳过
<main></main>的快捷导航，SEO 工具可能降权该区块 -
<main></main>在整个文档中只能出现一次，且不能是的孙级或更深节点 -
下首层缩进元素就是主干起点（如<header></header>、<main></main>、<div class="container">） <li> <code><img>、<input>这类自闭合标签一定属于某个容器的子级，哪怕源码里没写闭合或缩进混乱 -
<svg></svg>或<canvas></canvas>内部可能有完整子树，不能当成“原子标签”忽略 - 多个
<div> 堆叠时，优先查 <code>class或id，再结合语义标签反推意图，而非凭空猜父子关系最常被忽略的是：浏览器静默修正后，DOM 结构和你写的源码已经不同了。调试时盯着 DevTools 的 Elements 面板看，比反复检查缩进更可靠。
<main></main> 为什么不能套在 <section></section> 里
<main></main> 表示整个文档中唯一、可独立分发的核心内容区，W3C 明确禁止它被 <section></section>、<article></article>、<header></header>、<footer></footer> 等语义边界标签包裹。
怎么一眼看穿真实嵌套层级
缩进只是人眼辅助手段，真正要确认层级，得看浏览器 DevTools 中渲染后的 DOM 树，而不是源码格式。
