br标签仅用于内容必需的换行，如地址、诗歌等语义化分行；禁用其控制间距或布局，应改用CSS；无效br需脚本清理，避免影响响应式、无障碍及国际化。
br 标签只干一件事：在当前文本流里插一个换行符，不新建段落、不带语义、不加间距。它不是排版工具，也不是“空两行”的快捷键。用错地方，轻则响应式错位，重则让屏幕阅读器把地址读成三段独立内容，甚至在阿拉伯语 RTL 环境下彻底失效。
什么时候真该用 <br>？
只有当换行是内容本身的一部分，且无法被更语义化的标签替代时，<br> 才合法：
- 地址块中省市区街道分行显示（如
<p>北京市朝阳区建国路87号<br>邮编:100022</p>） - 诗歌或歌词原文需保留原始断行（
<p>明月松间照<br>清泉石上流</p>） - 命令行输出模拟、HTML 邮件模板中为兼容老客户端做的降级处理
- 表单
<label>后紧跟简短说明，且必须视觉分隔（但优先考虑display: block）
为什么不能用 <br> 控制段落间距？
连续多个 <br> 看似“空两行”，实则是把表现逻辑硬塞进 HTML 结构里：
- 响应式下无法缩放：桌面正常，iOS Safari 可能压缩掉中间的
<br>，导致塌陷 - 富文本编辑器粘贴后常带冗余
<br>，段落间莫名多空行 - 屏幕阅读器会逐个播报 “line break”，打断内容节奏，低视力用户难定位
-
<pre>或white-space: pre环境中，<br>和换行符效果重叠，易多出空行
替代 <br> 的 CSS 方案怎么选？
多数所谓“需要换行”的场景，本质是布局或间距问题，CSS 更可控：
立即学习“前端免费学习笔记（深入）”；
- 段落之间留白 → 改
margin-bottom，别塞<br> - 行内元素要视觉换行 → 用
display: block或inline-block - 表单控件对齐错乱 → 用
flex-direction: column+gap，而不是靠<br>“推位置” - 长文本防溢出 → 用
overflow-wrap: break-word或word-break: break-all，而非手动插<br>
怎么快速清理无效的 <br>？
别靠肉眼扫。先禁用 CSS 查看原始结构，确认哪些 <br> 真正影响语义；再执行这行脚本干掉孤立的：
document.querySelectorAll('br').forEach(br => { if (!br.previousElementSibling && !br.nextElementSibling) br.remove(); })
批量处理还要注意：<br> 出现在 <p> 开头/结尾、紧邻其他块级元素、或包裹在空 <div> 里的，基本可删。复杂点在于——它看起来最简单，但一旦混进富文本、国际化、无障碍链条里，就不再是“换行”这么轻量的事。
