标签内严禁嵌套块级元素（如 、、、）及交互式容器，因其内容模型限定为 phrasing content；浏览器会自动截断解析，破坏语义与可访问性。
HTML 嵌套不是“能闭上就行”，很多看似合法的结构会在语义、可访问性或浏览器解析中出问题。关键判断标准是：是否符合 HTML 规范定义的 content model（内容模型），而不是能否被浏览器“勉强渲染出来”。
哪些标签根本不能嵌套在 <p></p> 里？
<p></p> 的内容模型是 phrasing content，它明确排除了块级元素和交互式容器。常见误用：
<div>、<code><h2></h2>、<ul></ul>、<section></section>—— 浏览器会自动截断<p></p>，比如<p>abc</p> <div>def</div>实际解析为<p>abc</p> <div>def</div>-
<button></button>、<select></select>、<textarea></textarea>—— 虽然属于 phrasing content，但部分旧版 Safari/IE 会降级处理或触发 ARIA 检查警告 - 正确替代：用
<span></span>包文本，用@#@#@#@#@#@#@#@#@#@0 检查，别依赖浏览器渲染结果
真正容易被忽略的，是那些“浏览器没报错、页面看起来正常、但自动化测试全挂”的嵌套——它们往往卡在规范边缘，只影响可访问性、SEO 或未来浏览器版本的兼容性。每次写结构前，花 10 秒查下 MDN 上对应标签的 Permitted content 就能避开 80% 的坑。
