浏览器不报错但会静默修正非法嵌套，导致实际dom与源码不一致：触发强制闭合，生成，使document.queryselector('p div')返回null、css选择器失配、ssr hydration失败。
为什么 p 里放 div 不报错却查不到元素
浏览器根本不会按你写的结构建 DOM——它在解析 HTML 字符串时就强制修正了。p 只允许包含 phrasing content（如 span、em、a、img），而 div 是 flow content，一出现就会触发自动闭合。
- 错误写法：
<p>文字</p> <div class="card">区块内容</div> - 实际生成的 DOM 是：
<p>文字</p> <div class="card">区块内容</div> -
document.querySelector('p div')永远返回null - CSS 选择器
p > div完全不匹配 - 后续 JS 若依赖
p包含该div做位置计算或事件委托，逻辑直接失效
ul 和 ol 里为什么不能直接放 p 或 div
ul 和 ol 的合法子元素只有 li。其他任何标签（包括 p、div、h3）或空白文本若未包裹在 li 中，都会被浏览器视为非法内容，触发自动拆分逻辑。
- 错误写法：
<ol> <p>Item one</p><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill6712" title="Wechat HTML Publisher"><img src="https://img.php.cn/upload/skill/000/000/081/179109368394970.jpg" alt="Wechat HTML Publisher" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/skill6712" title="Wechat HTML Publisher" class="overflowclass">Wechat HTML Publisher</a> <p class="overflowclass">直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。</p> </div> <a rel="nofollow" href="/xiazai/skill6712" title="Wechat HTML Publisher" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div> Item two</ol> - 实际解析为：
<ol></ol> <p>Item one</p> <ol><li>Item two</li></ol> - 序号重置、语义丢失、
list-style样式失效 -
document.querySelectorAll('ol li')可能漏掉第一个“item”，因为它已不在ol内 - 想让段落作为列表项？用
<li><p>...</p></li>，而不是反过来
table 看似能省略 tbody，但为什么显式写出更稳妥
浏览器确实会自动补 tbody，但这不是“可选”的宽容，而是强制合规的兜底行为。真实 DOM 路径是 table > tbody > tr，而非你写的 table > tr。
- 错误假设：
document.querySelector('table tr:first-child')能命中第一行 → 实际匹配的是tbody下的第一个tr -
querySelectorAll('tr')返回的节点顺序可能跨多个tbody，与视觉顺序不一致 - 服务端渲染（SSR）做 hydration 校验时，HTML 字符串不含
tbody，但客户端 DOM 含有，导致校验失败 - 旧版 IE 对自动补全行为不一致，表格可能整行消失或错位
- 正确写法：始终显式写出
<tbody>，哪怕只有一组数据 <h3>自闭合标签加 <code>/>或多余会怎样img、input、br、hr是 void 元素，在 HTML5 中禁止闭合。写成<img src="x">合法，但写成<img src="x">就变成两个标签：前者被忽略，后者被当作未知容器处理。- 错误写法：
<div> <img src="a.jpg"><p>文字</p> </div> - 实际 DOM 可能是：
<div><img src="a.jpg"></div> <img><p>文字</p> - 后续
div突然变成img的子元素（DevTools 缩进异常） -
document.body.children数量变多且类型混乱 - Vue/React hydration 失败，报 “Hydration failed”
- 统一用
<img src="x">（HTML5 推荐省略/>），不要加
- 错误写法：
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
