仅适用于语义上同一段内容需视觉断行的场景，如地址、诗句、签名；结构化数据应使用语义化标签，段落分离必须用多个而非。
HTML 里用 <br> 换行，但多数时候它不该是你第一选择。
什么时候必须用 <br>
只有语义上“同一段内容里需要视觉断行”时才合适。比如地址、诗、歌词、签名落款——这些本就是连续文本，但排版需要换行。
常见错误现象：<div>姓名：张三<br>电话：123</div> 被当成结构化数据写，其实该用 <dl></dl> 或 <div> + CSS；<code><p>第一段<br><br>第二段</p> 本质是两段，却硬塞进一个 <p></p>。
立即学习“前端免费学习笔记（深入）”；
- 真实使用场景：邮件签名、诗句排版、纯文本列表（无语义层级）
-
<br>是空元素，不闭合也行（<br>或<br>都可），但别写成<br>—— 浏览器会当成两个换行 - 它不产生块级盒，不影响布局流，也不触发 BFC，所以对浮动、flex 等几乎没干扰
<p></p> 和 <div> 为什么不能靠 <code><br> 模拟段落
因为语义错位。浏览器和读屏软件依赖标签含义理解内容，<br> 只是“这里压个车”，不是“这是新一段”。
使用场景：你想让搜索引擎知道这是两个独立观点，或希望屏幕阅读器停顿两次？那必须用两个 <p></p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/xiazai/skill11445" title="使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审"><img
src="https://img.php.cn/upload/skill/001/246/273/6adaf20e695c2374.jpg" alt="使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/xiazai/skill11445" title="使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审">使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审</a>
<p>使用经过文档化的设计技能，从真实的品牌或项目背景中生成HTML原生原型、幻灯片、动态演示、可视化图表和评审流程。</p>
</div>
<a href="/xiazai/skill11445" title="使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div>，而不是一个 <p></p> 加 <br>。
- SEO 和无障碍支持都更信任语义标签，
<br>在 aria-label 或语音节奏上不被识别为分隔 - CSS 控制段间距（如
margin-bottom）只对块级容器生效，<br>上加样式无效 - 移动端缩放时，
<br>换行位置固定，而<p></p>宽度变化后自动重排，更健壮
CSS 替代方案：哪些情况该用 white-space 或 display
当原始文本自带换行符（比如用户输入的评论、日志输出），又不想手动插 <br>，就该交由 CSS 处理。
常见错误现象：后端返回带 \n 的字符串，前端直接 innerHTML 渲染，结果所有换行消失——因为 HTML 默认合并空白符。
- 保留换行+空格：给容器加
style="white-space: pre-wrap;"，\n变成换行， - 严格等宽排版（如代码片段）：用
white-space: pre;，但注意不折行可能溢出 - 完全不用换行符：把块元素设为
display: inline-block;或用 flex 布局控制顺序，比塞一堆<br>更可控
React/Vue 里动态插入换行的坑
JSX 和模板语法里，\n 字符不会自动转成 <br>，也不能直接在 { } 里写 <br>（会报错或被当字符串）。
使用场景：渲染用户提交的带换行的富文本摘要、后台日志预览。
- React 中正确做法：
{text.split('\n').map((line, i) => <react.fragment key="{i}">{line}<br></react.fragment>)} - Vue 中避免用
v-html直接插<br>，除非你 100% 信任内容——XSS 风险高，优先用white-space: pre-wrap - 服务端返回的 HTML 字符串含
<br>？确保它已正确转义，否则<br>会显示为字面量
真正难的不是怎么换行，而是判断这一行到底该不该“换”——是内容结构变了，还是只是眼睛想歇一下。
