<br>是纯视觉换行无语义，<p>是语义化段落容器并自带默认间距；地址和诗歌等需保留换行的场景可用<br>，正文、SEO、无障碍等必须用<p>；滥用<br>导致样式不可控、可访问性断裂。
br 是强制换行，p 是语义段落，别混用
两者都能让文字跳到下一行，但本质完全不同：<br> 是纯视觉指令，不带任何语义；<p> 是结构化容器，表示“这是一个逻辑完整的文字段落”。浏览器默认给 <p> 加上下 margin（通常 1em），所以看起来有“空行”，但这不是换行本身带来的，而是语义附带的样式表现。
常见错误现象：<p>第一行</p><br><br><p>第二行</p>——中间两个 <br> 完全多余，<p> 之间已有默认间距；更糟的是用 <br> 堆出“段落感”，结果屏幕阅读器读不出段落边界，打印时也错乱。
什么时候必须用 p，什么时候只能用 br
必须用 <p> 的场景：
- 正文、协议条款、产品说明等需要被搜索引擎识别为独立内容单元的文字
- 需要 CSS 统一控制缩进（
text-indent）、行高（line-height）或响应式断行的文字 - 任何你希望屏幕阅读器能按“段”跳转、语音朗读时自然停顿的内容
只能用 <br> 的场景极少，且严格限定在「同一语义段内需保留特定换行位置」：
立即学习“前端免费学习笔记（深入）”；
- 地址：如
<p>北京市朝阳区建国路87号<br>中国尊大厦B座12层</p> - 诗歌或歌词：换行即语义，删掉就失义
-
<label>内嵌提示文字换行（但更推荐 Flex 或<div>）
滥用 br 导致样式失控和可访问性断裂
<br> 不参与盒模型，无法设置 margin、padding、border，也不能用伪元素修饰。想调某个换行的“高度”？做不到。只能靠前后元素的 line-height 间接影响，极易误伤。
<p> 则完全可控：p { margin: 0.75em 0; } 可全局统一段距；p:first-child { margin-top: 0; } 能精准收口；媒体查询里还能单独调移动端段落行高。
容易被忽略的一点：很多 CMS 或富文本编辑器把用户回车直接转成 <br>，而不是 <p>。输出 HTML 看似能看，实则语义残缺——后续加无障碍支持、SEO 优化、响应式排版都会卡在这里。
嵌套规则与 DOM 解析陷阱
<br> 可以合法出现在 <p> 内部，但 <p> 不能嵌套在另一个 <p> 中（HTML5 明确禁止）。漏写 </p> 会触发浏览器自动修复，但补全位置不可控：
比如写 <p>第一段<p>第二段<p>第三段，实际被解析为三个独立 <p>，DOM 结构已偏离预期，JS 查询 document.querySelector('p').nextElementSibling 可能失效。
务必手写完整闭合标签：<p>内容</p>，别依赖容错机制。这是后期维护最常踩的坑——看似渲染正常，实则埋下定位困难、样式穿透、脚本错位的隐患。
