p标签内放div会失效，因HTML解析器强制闭合p并移出div，真实DOM变为<p></p><div>...</div>，导致document.querySelector('p div')返回null、CSS选择器p > div不匹配；p仅允许phrasing content（如<em>、<a>），禁止嵌套任何flow content（如<div>、<ul>、<h2>）。
为什么p标签里放div会直接失效
不是样式没生效，是浏览器压根不认这个结构。HTML解析器遇到<p><div>...</div></p>，会立刻在<div>前自动闭合<p>，真实DOM变成<p></p><div>...</div>。结果就是：document.querySelector('p div')永远返回null，p > div这类CSS选择器完全不匹配。
-
<p>只允许 phrasing content：比如<em>、<a>、<img>、<time>，连<button>都得是内联形态 - 禁止放入任何 flow content：包括
<div>、<section>、<ul>、<h2>、<form> - 想实现“段落后跟一个区块”，正确写法是分开：
<p>文字</p><div class="block-after">内容</div>
段落间距调不准？别碰line-height
改了margin-bottom还挤在一起，是因为相邻<p>的垂直外边距会合并（collapse）——不是相加，而是取较大值。设两个p都为margin-bottom: 20px，实际间距仍是20px。
- 只设
margin-bottom，别碰margin-top，避免首段顶部意外留白 - 父容器加
overflow: hidden或display: flow-root可阻止外边距合并 -
line-height只影响段落内部行高，和段间距无关；设line-height: 1.2不会让两段离得更近 - 移动端旧WebView可能忽略
em，关键布局建议兜底写margin-bottom: 16px
用什么替代p标签包裹复杂内容
当需要“一段文字+嵌套标题+列表+图片”这种组合时，<p>已超出语义能力。强行塞进去只会触发浏览器纠错，导致DOM断裂。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 优先用
<article>或<section>作为容器，它们允许包含<h2>、<p>、<ul>、<div>等混合内容 - 若只是视觉分组，用
<div>加语义类名（如class="prose"），再配CSS控制排版 - 富文本场景下，服务端或编辑器应把回车转为
<p>，而非把整块HTML塞进<p>里 - 检查源码中是否出现连续空
<p></p>——这是语义失控的典型信号
怎么快速验证嵌套是否合法
别只看源码缩进，浏览器开发者工具里的Elements面板显示的是真实DOM，它才是唯一可信依据。
立即学习“前端免费学习笔记（深入）”；
- 右键元素 → “Edit as HTML”，临时修改结构，观察实时变化比读代码更直观
- 用W3C Validator校验，它会明确报出
Element div not allowed as child of element p这类错误 - VS Code装
Auto Close Tag和Highlight Matching Tag，光标停在<div>上能立刻看到对应</div>位置 - 禁用编辑器“自动格式化”再粘贴代码——很多插件靠缩进猜结构，反而把合法但缩进不规整的代码改坏
