br标签仅在逻辑属同一段但需视觉断行时合法，如地址、诗歌、歌词、表单label内短提示；滥用会破坏语义、可访问性与响应式，应优先用css或语义化标签。
<br> 不是“按回车就能换行”的快捷键，它只在特定语义场景下合法有效；用错地方比不换行更麻烦。
什么时候该用 <br>？
它只适用于「逻辑上是一段内容，但视觉上必须断成多行」的少数情况：
- 地址（如
<p>北京市朝阳区建国路8号<br>邮编：100022</p>） - 诗歌或歌词（每行是语义单位，不能拆成多个
<p></p>） - 表单
<label></label>里的短提示（如<label>邮箱地址<br><small>请使用公司域名</small></label>） - 签名档、职称信息等无段落层级的连续文本
常见错误现象：<p>第一句<br>第二句<br>第三句</p> —— 这三句其实是三个独立陈述，该用三个 <p></p>，而不是塞进一个段落里靠 <br> 拆分。
<p></p> 和 <br> 到底差在哪？
核心不是“能不能换行”，而是“要不要语义”：
-
<p></p>是块级元素，自带上下外边距，告诉浏览器“这是一段完整、可独立理解的内容” -
<br>是行内换行符，不产生新段落、不加间距、不带语义，只是视觉断点 - 搜索引擎和读屏软件依赖
<p></p>结构理解页面逻辑；滥用<br>会让它们把整块内容当一句话读，中间硬插停顿 - 响应式设计中，
<p></p>的margin可统一用 CSS 调整；而一堆<br>得手动删改，无法用媒体查询控制显隐
长单词、URL 溢出怎么办？别硬塞 <br>
遇到英文长串、URL 或中文超长标题撑破容器，<br> 完全无效。正确做法是用 CSS 控制文本流：
-
overflow-wrap: break-word;或word-break: break-word;：让超长词在容器边界处折行 -
white-space: pre-wrap;：保留源码中的换行符和空格，同时支持自动换行（适合后端返回带\n的字符串） -
white-space: pre-line;：合并多余空格，但保留换行符（比pre-wrap更轻量） - 对按钮、导航项等内联元素，优先用
display: inline-block+width+white-space: normal，而不是在文字里插<br>
容易被忽略的细节：后端传来的字符串含 \n，直接 innerHTML 插入 HTML 不会生效——得配 white-space: pre-wrap，或前端做 \n → <br> 转义（但后者又绕回语义问题）。
<pre class="brush:php;toolbar:false;"></pre> 和空格为什么也不换行？
HTML 默认会把源码中连续空白符（空格、制表符、换行）压缩成一个空格，所以敲回车、打多个空格都没用。只有三种例外：
-
<pre class="brush:php;toolbar:false;"></pre>：原样保留所有空白和换行，但默认等宽字体、不继承父级样式，仅适合代码块、日志 -
white-space属性为pre/pre-wrap/pre-line的元素 -
<br>标签本身
真正卡住开发者的，往往不是标签选错，而是模板渲染时富文本编辑器（如 TinyMCE）默认输出 <br>，或 CMS 自动过滤了换行符——得在导出前清洗，或配置为输出 <p></p>。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
