浏览器解析HTML时会强制修正非法嵌套，p标签内只允许phrasing content（如strong、em、span等），div、ul等块级元素会被移出；需用DevTools Elements面板、querySelector和W3C校验工具验证真实DOM结构。
直接看浏览器生成的真实 DOM 结构，别信你写的源码。<p></p>里塞<div>这种写法在编辑器里看着没问题，但 Chrome/Firefox/Edge 一解析就拆开——这是规范强制行为，不是 bug。
<h3>用 DevTools Elements 面板确认真实嵌套关系</h3>
<p>打开开发者工具（F12），切到 Elements 标签页，重点观察三点：</p>
<ul><li>如果<code><p></p>节点下面没有子元素，而旁边灰显一个独立的<div>，说明它已被浏览器踢出并作为兄弟节点插入
<li>右键某个<code><p></p>节点 → “Edit as HTML”，删个空格再回车：结构若突然跳变（比如子节点跑到外面），就是嵌套不合法的铁证
<tbody>这类节点——它们是浏览器加的，但不影响<code><p></p>合法性判断；真正要盯的是你手动写的子元素是否还在原位
用 document.querySelector 验证层级是否真实存在
控制台执行查询语句，结果比视觉更诚实：
-
document.querySelector('p div')返回null？那<div>根本不在<code><p></p>里，已被拆开 -
document.querySelector('p > strong')能拿到结果？说明<strong></strong>这类 phrasing content 是合法的 -
document.querySelectorAll('p').forEach(p => console.log(p.children.length))如果多数为 0，大概率内部被清空了 - 提交 HTML 到 validator.w3.org，错误提示像这样：
Line 42, Column 8: Element “div” not allowed as child of element “p” in this context. - 本地批量检查推荐
html-validateCLI：npm install -g html-validate，然后运行html-validate src/**/*.html - 关键要启用
element-permitted-content规则，它会按 HTML5 规范逐个检查父子组合，比如<p></p> <h4>标题</h4>会被标红 - 注意：文件开头必须有
<!DOCTYPE html>，否则可能进入怪异模式，让本该报错的地方“侥幸通过” - 纯文本、
strong、em、small、mark、a、img、code、span、time、button（注意表单上下文） -
br和input允许，但input放进<p>属于边缘用法，部分浏览器可能警告 -
div、ul、h4、section、table、form—— 全都不行，哪怕加了display: inline-block也没用 - 自定义元素如
<my-button>默认不被识别为合法子元素，需带连字符（如<my-button>）且开启no-unknown-elements规则才可能通过
用 W3C Validator 或 html-validate 定位具体错误行
靠肉眼或渲染效果判断会误判，必须用校验工具：
立即学习“前端免费学习笔记（深入）”；
哪些元素真的能放进 <p> 里
不是“看起来小”就能放，而是必须属于 HTML5 规范定义的 phrasing content：
最容易被忽略的是：HTML 解析发生在样式计算之前，所以任何靠 display 去“骗过”解析器的做法都注定失败。验证必须基于 DOM 实际结构，而不是你希望它是什么样子。
