p标签内不能嵌套div或ul等块级元素，因HTML规范限定其仅接受phrasing content（行内内容），非法嵌套会导致浏览器静默闭合p并移出非法子元素，破坏DOM结构、样式和可访问性。
为什么
里不能放
或
标签在 HTML 规范中被定义为“只接受 phrasing content”，也就是行内级内容。这意味着它合法的子元素只有：strong、em、a、img、span、code 这类不打断段落流的元素。div、h3、ul、甚至另一个p，都不在白名单里。
浏览器解析时一旦遇到非法嵌套，会立刻终止当前p——不是报错，而是静默修复：把p提前闭合，再把非法子元素放到外面。比如写成：
<p>说明如下：<ul><li>支持 JSON</li></ul></p>
实际 DOM 变成：
<p>说明如下：</p> <ul><li>支持 JSON</li></ul> <p></p>
结果就是样式错位、querySelector('p + ul') 失效、屏幕阅读器读出两个空段落。
立即学习“前端免费学习笔记（深入）”；
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
怎么判断一个
是否被浏览器悄悄截断了
别靠肉眼猜，用 DevTools 的 Elements 面板直接看渲染后的 DOM 树：
- 展开某个
p节点，如果里面只有文本或strong/a等行内标签，说明结构干净 - 如果点开后发现子节点是空的，而紧跟着出现
div或ul，那基本就是被自动闭合了 - 留意浏览器是否插入了意外的
tbody（常见于 table 内部）、或把br转成换行符但没生成新节点——这些也是嵌套异常的副产品
另外，连续多个空<p></p>或<p> </p>，大概率是富文本编辑器把回车当段落硬生成的，语义已断裂，得从源头清理。
替代方案：什么时候该换标签，而不是硬塞进
想实现“段落+列表”“段落+警告框”这类视觉组合，p不是万能容器。该换就换：
- 需要包裹块级内容？用
div或语义化容器如section、article，再用 CSS 控制间距和字体 - 想让一段文字带图标/徽章？把
img或span放在p里，而不是整个div.alert - 要强调某句话并加操作按钮？拆成
p+div class="actions"，用相邻兄弟选择器p + div.actions做样式联动 - CMS 或编辑器输出不可控？加一层模板函数或 post-processor，在渲染前把非法嵌套替换掉，比如把
<p>...<div>...</div>...</p>重写为<p>...</p><div>...</div>
团队协作时怎么守住嵌套底线
单靠人盯人不现实，必须靠工具落地：
- 在
.htmlhintrc里启用"tag-pair": true和"attr-no-duplication": true，捕获错位闭合和复制粘贴导致的嵌套污染 - Prettier 可格式化缩进，但它不校验语义；真正起作用的是 HTMLHint 的
"spec-char-escape"和"id-unique"——重复 ID 常源于嵌套复制后忘了改名 - 在 CI 流程里加一步
htmlhint src/**/*.html，失败则阻断合并，比 Code Review 早发现问题
最易被忽略的一点：嵌套是否合法，最终取决于浏览器怎么解析，而不是你写的看起来多整齐。DOM 树永远比源码更真实，检查它比背规则管用。
