浏览器看到的dom与源码不一致，是因为html解析器按规范自动补全缺失结构、纠正非法嵌套（如p内遇div即闭合p）、合并文本节点，生成的dom是修正后结果而非原始代码。
为什么浏览器看到的DOM和你写的HTML不一致
这不是你写错了，而是浏览器在解析时做了自动修复。HTML解析器不是“照本宣科”，它会按规范补全缺失结构、纠正嵌套错误、合并连续文本节点。
常见现象包括：<tr>被自动塞进<code><tbody>里，<code><p></p>里意外出现<div>会被截断并闭合前一个<code><p></p>，多个换行+空格会被压成单个空格文本节点。
<table>系列表格标签有强隐式包裹规则，手写时省略<code><tbody>没问题，但DOM树里一定存在 <li> <code><p></p>是“自闭合敏感型”块级元素：它不能包含<div> <code><h1></h1>等块级标签，一旦遇到，浏览器立刻闭合当前<p></p>再开新元素- 用
document.body.innerHTML读取时，拿到的是“修复后”的HTML，不是源码——调试时别拿它反推原始结构 - 缺
或，浏览器会自动补，但补的位置不可控（比如脚本可能被塞进执行，而你预期它在末尾） -
<meta name="viewport">没写？移动端页面默认缩放为桌面宽度，用户得双指放大才能看清 -
<title></title>缺失时，浏览器标签页显示为空白或文件名，SEO直接失效 -
<main></main>在整个文档中只能出现一次，重复会导致无障碍工具误判 - IE11 不识别
<main></main>，需用<div role="main">降级，或引入<code>main-polyfill -
<section></section>可以自由嵌套在<main></main>里，但它自己必须带<h2></h2>–<h6></h6>标题，否则和<div>无区别 <h3>如何快速判断嵌套是否合法</h3> <p>别靠肉眼数缩进，先看三件事：父容器是否允许包含该子元素、子元素是否属于“可中断”类型、有没有交叉嵌套。</p> <ul><li>查MDN文档中每个标签的“Permitted content”字段——比如<code><p></p>只允许内联元素，<span></span>能放进去，<div>不行 <li> <code><img><input><br>这类自闭合标签，一定是某个块级容器的子级，绝不会独立挂在下 - 交叉嵌套如
<div><p><span><em>text</em></span></p></div>是非法的，解析器会强制闭合并重排，结果不可预测
哪些标签必须存在，且顺序不能调换
必须顶格第一行，后面紧跟着<code>；必须在之前；<meta charset="UTF-8">必须出现在<title></title>之前——顺序错一环，中文标题就乱码，或触发怪异的混杂模式。
<main></main>为什么不能放在<article></article>或<aside></aside>里面
<main></main>代表整个页面唯一的主要内容区域，语义上不允许嵌套在任何具有局部上下文边界的标签内。规范明确禁止它作为<article></article><aside></aside><footer></footer><header></header><nav></nav>的子元素——否则逻辑矛盾：“全局主内容”怎么同时是“某篇文章的附属内容”？
真正容易被忽略的是：语义标签的边界感比视觉布局更硬。写<div class="main">看着像主内容区，但对屏幕阅读器、搜索引擎、甚至某些CSS重置规则来说，它就是个普通容器——<code><main></main>不是样式开关，是结构契约。
