p 标签内不能嵌套块级元素

浏览器会自动修正错误嵌套，把本该在 p 里的块级标签“踢出来”，导致 DOM 结构和预期不一致。比如写成

这是 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 同样严格：它们也只接受行内内容。写

标题内容

这种限制不是浏览器“脾气大”，而是语义决定的——标题和段落都是内容层级的原子单位，本身不承载容器逻辑。想包裹结构，得用 div、section 或 article 这类真正的容器元素。

• dt 元素也遵循同样规则，只能含行内内容
• dd 相对宽松，可以包含块级元素（比如 div、p、ul）
• 别依赖 CSS 的 display: inline 来“骗过”解析器——HTML 解析发生在样式计算之前

常见误用场景与替代方案

开发中容易踩坑的地方，往往不是故意乱写，而是没意识到某些标签本质是块级。比如：

• 用
  ：虽然 svg 默认是行内，但若设了 display: block 或带宽高，就可能触发重排；稳妥做法是外层用 div 包裹再配 text-align 居中
• 试图在 p 里放 或 <select>：它们虽常被当“小控件”，但规范中属于“可替换行内元素”，部分浏览器允许，但不可靠；应改用 span + JS 模拟，或换容器
• 表单提示文字写成

  <input type="text">

  ：违反 form 子元素规则，也违反 p 嵌套规则；正确方式是
  用户名<input>

验证嵌套是否合法的最简方法

别靠肉眼或浏览器渲染效果判断——DOM 已被自动修复。打开浏览器开发者工具，切换到 Elements 面板，看原始 HTML 是否被重排。更可靠的是用 W3C Markup Validation Service 在线校验，或本地跑 html-validate 工具。

真正容易被忽略的一点是：p 标签的结束标签其实可以省略（HTML5 允许），但一旦你手动写了开始标签

，后续遇到另一个块级标签（如