<p>是语义化段落容器，必须包裹完整自然段；<br>仅强制换行无语义，滥用会导致可访问性断裂、SEO权重丢失、CSS控制失效及响应式错乱。
直接用 <p> 包裹自然段落，别当换行符或占位符用——这是语义正确、渲染稳定、无障碍友好的唯一做法。
为什么不能用 <br> 代替 <p>
常见错误是连续写多个 <br> 来“模拟段落”，比如：<p>第一段</p><br><br><p>第二段</p>。这会导致：
• 屏幕阅读器把两段读成同一段，中间只停顿毫秒级；
• 搜索引擎无法识别段落边界，影响内容权重；
• 响应式缩放时，<br> 不随字体变化，间距错乱；
• CSS 无法统一控制段距（<br> 没有 margin，只能靠父容器硬撑）。
<p> 里能嵌套什么元素
HTML 规范只允许 <p> 包含「phrasing content」（短语级内容），也就是纯文本和行内元素：
• ✅ 合法： <strong>、<em>、<code>、<a>、<img>（带 alt）；
• ❌ 非法：<div>、<h2>、<p> 自身、<ul>；
• ⚠️ 浏览器会自动修复非法嵌套，例如 <p>文字<div>块内容</div></p> 实际解析为：<p>文字</p><div>块内容</div><p></p>，结构断裂、样式错位、SEO 失效。
怎么调段距才不翻车
段落默认上下各带约 1em 的 margin，改它就对了：
• 统一重置：p { margin: 0.8em 0; }；
• 首段去顶边距：.article p:first-child { margin-top: 0; }；
• 末段去底边距：.article p:last-child { margin-bottom: 0; }；
• 别碰 padding 或靠 line-height “凑”段距——padding 是往段落内部撑，line-height 只管行内高度，两者都不影响段与段之间的空白；
• 中文首行缩进用 text-indent: 2em，不是 32px，否则高 DPI 屏幕下缩进失效。
空 <p></p> 是个危险信号
看到空段落，基本等于代码在喊“我不知道该怎么组织内容”。它带来的问题很隐蔽：
• 辅助技术会播报“空段落”，打断阅读流；
• 默认 margin 仍存在，造成不可控的空白；
• 未来加样式时，容易误以为它是“占位符”，结果被全局 p 规则污染；
• 正确替代方案：用 margin 控制容器内间距，或用 <div class="spacer"></div> 显式表达意图。
真正难的不是写 <p>，而是判断一段文字是否真的构成一个语义完整的段落——它得有独立信息、完整句意、自然停顿。这点，机器不会帮你做决定。
