<p>只允许嵌套短语内容标签，如<span>、、、、<img>、<time>、、<button>、<input>、<select>等；<div>、<h4>、<ul>、<p>等块级元素非法，浏览器会自动闭合<p>导致DOM断裂。
哪些内联标签能合法嵌套在 <p> 里
<p> 只接受 phrasing content（短语内容），不是所有“看起来小”的标签都能往里塞。浏览器解析时只看语义定义，不看 CSS 是否把它改成 display: inline。
合法子元素包括：<span>、<strong>、<em>、<a>、<img>、<time>、<code>、<button>、<input>、<select> 等——这些在 HTML5 规范中明确属于 phrasing content。
常见误判点：
-
<div>即使加了style="display: inline-block"，依然非法；浏览器会自动闭合<p>，导致 DOM 结构意外断裂 -
<h4>、<ul>、<section>、<p>自身，一律禁止直接嵌套 - 自定义标签如
<spoiler>无连字符，默认不被识别为合法 phrasing 元素
<p> 里嵌 <span> 的典型用途和坑
<span> 是最常用也最容易滥用的内联容器。它本身无语义，适合局部干预：比如高亮关键词、绑定 JS 事件、标注语言或包裹图标+文字组合。
立即学习“前端免费学习笔记（深入）”；
但要注意：
- 默认不换行、无 margin/padding，若想设宽高，必须显式加
display: inline-block或display: inline-flex - 如果只为改颜色/字体而写
<span style="color:red">，应优先用 class，否则后期维护要全局搜字符串 - 空
<span>（只含空格或 - 用
<span>绑定点击事件时，必须手动加tabindex="0"和role="button"，否则键盘用户无法聚焦
浏览器静默修复导致的 DOM 错位怎么发现
你写的 <p><div>xxx</div></p> 在开发者工具里可能“看起来正常”，但那只是浏览器修复后的渲染结果。真实 DOM 已被篡改。
验证方法：
- 打开 Elements 面板，逐层点开节点，看是否出现意外的
<p></p>空节点，或<div>跑到<p>外面 - 在控制台执行
document.querySelector('p').children，检查返回的HTMLCollection里有没有HTMLDivElement—— 如果有，说明已被修正过 - 用 W3C Validator（validator.w3.org）粘贴代码，它会明确报出 “Element div not allowed as child of element p” 这类错误
什么时候不该用 <p> 套内联标签
<p> 不是万能样式包裹器。它语义上专指“一个自然语言段落”，连续文本 + 逻辑完整 = 适合用 <p>；其他情况容易污染语义。
替代思路：
- 一段文字里有 5 个不同样式的词？考虑是否该拆成多个
<p>，或改用语义更强的标签（如<blockquote>、<figure>） - 内容含图标 + 描述 + 按钮？这不是段落，用
<div>+ Flex/Grid 更可控 - 只是为了加背景色或 padding？优先用
<div>或<section>，别硬套<p> - 搜索引擎和读屏软件靠
<p>判断正文密度，乱用会稀释主干内容权重
最常被漏掉的一点：嵌套语法没错，但人写完 <p> 后顺手敲 <span> 却忘了闭合 </span>——浏览器不报错，但后续样式或 JS 可能作用到错位节点上，调试时得从 DOM 树一层层确认。
