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