<br>不该滥用但该用时必须用，仅用于地址、诗歌、歌词等自然语言需换行的语义场景；多数换行需求应由CSS（如display、margin、flex）解决，避免破坏无障碍与响应式。
HTML 中 <br> 该不该用？
不该滥用，但该用时必须用。它不是排版工具，而是语义断行标记——只在自然语言中本就需要换行的地方才合法，比如地址、诗行、歌词。
常见错误是拿 <br> 当 CSS 替代品：为了“让标题下面空两行”硬塞三个 <br>，结果响应式下错位、屏幕阅读器朗读卡顿、打印时断行异常。
真正该用的场景：
• 地址块中每行一个物理地址项（<p>北京市朝阳区XX路1号<br>邮编：100020</p>）
• 诗歌或歌词原文格式需保留换行
• 表单中 <label> 后紧跟说明文字且需强制分隔（但更推荐用 <div> 或 CSS display: block）
用 CSS 替代 <br> 的三种可靠方式
多数所谓“需要换行”的需求，本质是间距或布局问题，CSS 更可控、可维护、无障碍友好。
优先按这个顺序尝试：
• 行内元素需要视觉换行？改用 display: block 或 display: inline-block
• 段落之间要空隙？调 margin-bottom，别塞 <br>
• 表单控件对齐错乱？用 flex 或 grid 布局，而不是靠 <br> “推位置”
示例：把靠 <br> 对齐的按钮强行拉到下一行，改成
立即学习“前端免费学习笔记（深入）”；
<div style="display: flex; flex-direction: column; gap: 8px;"> <input type="text"> <button>提交</button> </div>
<br> 在不同 HTML 版本和渲染环境中的行为差异
HTML5 中 <br> 是自闭合标签，写成 <br> 或 <br/> 都合法；XHTML 要求必须自闭合，但现代浏览器基本不区分。
真正容易踩坑的是渲染一致性：
• 在 <pre> 或 white-space: pre 环境里，<br> 和换行符效果重叠，可能多出空行
• 在富文本编辑器输出的 HTML 中，用户粘贴内容常带冗余 <br>，导致段落间莫名其妙多空行
• iOS Safari 对连续 <br> 的垂直间距压缩比桌面 Chrome 更激进
检测方法：打开开发者工具，选中元素，看 computed 样式里 line-height 和 margin 是否被意外覆盖。
如何批量清理页面中无效的 <br>
无效指：连续多个、出现在 <p> 开头/结尾、包裹在空 <span> 里、或紧邻其他块级元素。
手动清理建议：
• 先禁用 CSS 查看原始结构，确认哪些 <br> 真正影响语义
• 用浏览器控制台执行：document.querySelectorAll('br').forEach(br => { if (!br.previousElementSibling && !br.nextElementSibling) br.remove(); }) 删掉孤立 <br>
• 正则替换（仅限源码编辑）：<br>\s*<br> → <br>，但别盲目全量替换，先查上下文
自动化处理注意：服务端模板（如 Jinja、Thymeleaf）或构建时 HTML 压缩工具（如 html-minifier）通常不清理 <br>，得靠代码逻辑或 lint 规则（如 eslint-plugin-jsx-a11y 的 no-redundant-roles 类规则变体）提前拦截。
最麻烦的其实是 CMS 导出内容——那些 <br> 往往藏在 WYSIWYG 编辑器的 HTML 输出里，改起来要动后端解析逻辑，不是前端加个 CSS 就能绕开的。
