是唯一能直接在文本流中插入单次强制换行的html标签，仅适用于换行位置固定且属同一语义单元的场景，如地址、诗歌、歌词及表单内辅助说明；它无语义、无间距、不依赖css，滥用会损害可访问性、seo与响应式表现。
<br> 是唯一能直接在文本流中插入单次强制换行的 HTML 标签，它不产生语义、不带间距、不依赖 CSS，适合地址、诗行、表单提示等需精确控制行内断点的场景。
什么时候必须用 <br>？
只有当换行位置完全固定、且上下文属于同一语义单元时，<br> 才是合理选择。比如：
- 地址字段：
<p>北京市朝阳区<br>建国路8号</p>—— 两行同属一个物理地址 - 歌词或古诗：
<p>床前明月光<br>疑是地上霜</p>—— 行间无段落逻辑，仅视觉分行 - 表单旁的辅助说明：
<label>邮箱地址<br><small>请使用公司域名</small></label>
如果内容有独立陈述意义（如“第一段话。第二段话。”），该用 <p></p>，而不是堆砌 <br>。
<br> 的常见写法和坑
HTML5 中只接受 <br> 这一种写法（自闭合，不加斜杠，不写 <br> 或 <br>）。浏览器对错误形式兼容性差，尤其在 XHTML 模式或严格解析环境下会出问题。
容易踩的坑包括：
- 在
<pre class="brush:php;toolbar:false;"></pre>或设置了white-space: pre的容器里重复使用<br>—— 换行会叠加，造成多余空行 - 把
<br>当作垂直间距工具，在标题下方硬塞三个<br>—— 应该用margin-bottom - 服务端返回带
\n的字符串，前端直接innerHTML插入却没生效 ——\n不等于<br>，得手动替换或配white-space: pre-line
为什么不能只靠 CSS 实现“相同效果”？
CSS 的 white-space: pre-line 或 pre-wrap 能保留源码中的换行符，但前提是文本内容里真有换行字符（\n）。而 <br> 是主动注入换行指令，不依赖原始字符串结构。
这意味着：
- 模板渲染中，若后端返回的是单行字符串（如
"北京 上海 广州"），你无法靠 CSS 让它自动按空格断成三行 —— 得前端拆分+拼<br>，或改用display: block配合伪元素 -
<br>可被 JavaScript 动态插入/删除，CSS 方案则需操作 DOM 文本节点或重设样式，灵活性不同 - 读屏软件会把连续多个
<br>当作“停顿”，但不会朗读为“换行”，而<p></p>会被识别为段落边界 —— 无障碍支持逻辑完全不同
替代方案：什么情况下该放弃 <br>？
当换行行为需要响应式调整（比如小屏合并为一行）、或要适配不同语言（中英文混排时单词折行策略不同）、或内容来自不可控输入源（用户粘贴的富文本）时，<br> 就成了维护负担。
此时应转向 CSS 控制：
- 长 URL 或代码片段溢出：
overflow-wrap: break-word+ 显式width - 保持源码换行但允许折行：
white-space: pre-wrap - 纯中文标签需防截断又不想断字：
word-break: keep-all+text-overflow: ellipsis（配合white-space: nowrap和overflow: hidden）
真正难处理的不是“怎么换行”，而是“谁该负责换行”——内容结构归 HTML，表现逻辑归 CSS，语义边界归可访问性 API。混用三者，问题只会藏得更深。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
