浏览器会静默修正非法嵌套（如 <p><div>），将结构改为 <p>文字</p><div>块内容</div><p></p>，导致 CSS/JS 失效、首屏计算偏差和无障碍问题；应通过 Elements 面板、控制台查询或孤立节点检测确认，并用语义化标签或 CSS 替代非法嵌套。
标签里塞了
、
或另一个
，浏览器会立刻中断并重写 DOM，你写的结构和实际渲染的完全不是一回事。
为什么改完 HTML 页面还是错位
浏览器不报错，但会静默修正非法嵌套：<p>文字<div>块内容</div></p> 实际变成三个节点：<p>文字</p> + <div>块内容</div> + <p></p>。CSS 选择器如 p > div 永远不匹配，JS 查询 document.querySelector('p div') 返回 null，多出的空 <p></p> 还会影响首屏计算和屏幕阅读器遍历。
怎么一眼确认是不是 p 嵌套惹的祸
别看源码，直接看 Elements 面板里的真实 DOM：
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 右键某个
<p>→ “Edit as HTML”，删个空格再回车：如果子元素突然“跳出去”或缩进变平，说明原始嵌套不合法 - 在控制台运行：
document.querySelectorAll('p > *').forEach(el => console.log(el.tagName))，如果输出里有DIV或H2，那看到的就是浏览器修复后的 DOM - 查孤立节点：
[...document.querySelectorAll('*')].filter(el => !el.parentElement)，被踢出来的<div>就会暴露出来
替换方案要按语义选，不是随便换标签
多数时候你并不是真需要“段落”语义，只是想加间距或分组：
立即学习“前端免费学习笔记（深入）”；
- 纯视觉分组：
<div class="paragraph"><p>文字</p><div>附加内容</div></div> - 需要段落语义 + 块级结构：
<section><p>导语</p><article>正文</article></section> - 仅为了换行/间距：用 CSS 控制
margin-top或display: block，别靠嵌套“撑结构” - 模板中动态拼接时，避免在
<p>标签里开<div>—— 先拼好内容，再整体包进<p>
真正难防的是团队协作中的“习惯性套 p”
它不报错、不警告，但 SSR 渲染时可能引发不可见的结构偏移。自动化检查必须卡在提交前：html-validate 配置规则 no-inline-element-with-block-content，VS Code 装 HTMLHint 并启用自定义校验，CI 流程里跑 nu-html-checker 报出 “Element div not allowed as child of element p”。最隐蔽的坑，永远藏在没人觉得是问题的那一行。
