正确：p标签内不能嵌套div等块级元素，浏览器会自动修正为hello
p 标签内不能嵌套块级元素
浏览器会自动修正错误嵌套，把本该在 p 里的块级标签“踢出来”，导致 DOM 结构和预期不一致。比如写成 <p></p>
<div>hello</div>
<p></p>
<div>hello</div>
<p></p> —— 原来的 p 被拆成两个空段落，div 被挤到外面。
这是 HTML 规范强制要求的：p 只能包含 文本节点 和 行内元素（inline-level elements），不能直接包裹任何块级元素（block-level elements）。
-
div、ul、ol、dl、h1–h6、table、form、blockquote等都禁止出现在p内部 -
br、span、a、strong、em、img、input、label这类行内元素是允许的 - 即使某个元素视觉上“看起来很小”（比如一个空
div或span里塞了display: block），只要它语义或默认是块级，就不能放进去
p 和 h1–h6 的嵌套限制是一样的
很多人只记得 p 不能包块级，却忽略 h1–h6 同样严格：它们也只接受行内内容。写 <h2><div>标题内容</div></h2> 会导致解析异常，div 会被移出，h2 变成空标签。
这种限制不是浏览器“脾气大”，而是语义决定的——标题和段落都是内容层级的原子单位，本身不承载容器逻辑。想包裹结构，得用 div、section 或 article 这类真正的容器元素。
-
dt元素也遵循同样规则，只能含行内内容 -
dd相对宽松，可以包含块级元素（比如div、p、ul） - 别依赖 CSS 的
display: inline来“骗过”解析器——HTML 解析发生在样式计算之前
常见误用场景与替代方案
开发中容易踩坑的地方，往往不是故意乱写，而是没意识到某些标签本质是块级。比如：
- 用
<p><svg>...</svg></p>：虽然svg默认是行内，但若设了display: block或带宽高，就可能触发重排；稳妥做法是外层用div包裹再配text-align居中 - 试图在
p里放<button></button>或<select></select>：它们虽常被当“小控件”，但规范中属于“可替换行内元素”，部分浏览器允许，但不可靠；应改用span+ JS 模拟，或换容器 - 表单提示文字写成
<p><input type="text"></p>：违反form子元素规则，也违反p嵌套规则；正确方式是<div> <label>用户名</label><input> </div>
验证嵌套是否合法的最简方法
别靠肉眼或浏览器渲染效果判断——DOM 已被自动修复。打开浏览器开发者工具，切换到 Elements 面板，看原始 HTML 是否被重排。更可靠的是用 W3C Markup Validation Service 在线校验，或本地跑 html-validate 工具。
真正容易被忽略的一点是：p 标签的结束标签其实可以省略（HTML5 允许），但一旦你手动写了开始标签 <p></p>，后续遇到另一个块级标签（如 <div>）时，浏览器会立即隐式闭合前面的 <code>p —— 这个“自动闭合时机”比你想象中更早、更机械。
