p标签不能嵌套块级元素，浏览器会强制修正为合法DOM结构；应使用语义化容器替代，验证须基于真实DOM而非源码。
直接说结论：p 标签不能嵌套块级元素，也不该被当成“万能容器”来用；你写的嵌套结构和浏览器实际生成的 DOM 很可能完全不同，这不是 bug，是规范强制行为。
怎么一眼看出 p 嵌套是否已被浏览器修正
别信源码缩进或编辑器高亮——它只显示你写的，不反映真实 DOM。打开 Chrome 或 Edge 的 Elements 面板，手动展开某个 p 节点：
- 如果看到子节点里突然出现 DIV、H2、UL，说明它已经被踢出去了（浏览器在 <p><div> 处提前闭合了 p）
- 如果 p 下面紧跟着一个空的 <p></p>，大概率是解析时补的“断尾”
- 在控制台运行 document.querySelector('p').children，输出中若含 HTMLDivElement，就坐实了非法嵌套已触发修复
p 里到底能塞什么，哪些看似合法实则危险
p 只接受 phrasing content（短语内容），核心判断标准是：它是否属于“自然语言流中的一段文字成分”。合法的包括：
- 纯文本、strong、em、span、a、img（带 alt）、time、code、button（表单上下文合理时）
- 即使把 span 设成 display: inline-block，它仍合法；但把 div 设成 display: inline，它依然非法——解析器看语义定义，不看 CSS
常见误判点：
- <p><div class="tip">⚠️</div>文字</p> → 实际变成 <p></p><div class="tip">⚠️</div><p>文字</p>
- <p>点击<a href="#"><img src="icon.svg"></a>继续</p> → 合法，HTML5 允许 a 包含替换元素
- <p><h4>小标题</h4>正文</p> → 非法，h4 是 heading content，不是 phrasing content
想加区块内容，但又不想破坏语义，该怎么替
多数时候你并不是真需要“段落”，只是想视觉上分组或留白。替代方案要按语义选，不是随便换标签：
- 想在一段话后加提示框/按钮组/图表？用 <div class="paragraph-group"><p>主文字</p><div class="block-content">…</div></div>
- 内容有明确逻辑区块（比如导语 + 列表 + 引用）？改用 <section> 或 <article> 包裹整块，再内部用合适标签
- 纯为控制间距？CSS 优先：p { margin-bottom: 1.2em; }，父容器加 overflow: hidden 防外边距合并
- CMS 或用户粘贴带来非法嵌套？用脚本清洗：遍历所有 p，检查 .children 中是否有 HTMLDivElement，有则剪切到 p 后作为兄弟节点插入
最容易被忽略的细节：空格、换行、自动注入
真正难防的不是手写错误，而是隐形干扰：
- <p>\n 文字\n</p> 首尾换行会被解析为文本节点，导致 textContent 带前后空白
- 某些 CMS 会静默插入空 <p></p>，它们撑开 flex 布局、干扰垂直居中、让屏幕阅读器多读一次“空段落”
- SSR 渲染时，模板引擎拼接出 <p>{{content}}<div>{{block}}</div></p>，服务端没报错，但客户端 DOM 已塌陷
验证必须落到真实 DOM 树，而不是源码或渲染效果；自动化卡点比人工 review 更可靠——CI 里跑 nu-html-checker，VS Code 装 HTMLHint 并启用 no-inline-element-with-block-content 规则。
