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