只有在同一语义块内需手动断行时才用，如地址、诗歌；用于语义分段，滥用会破坏结构、影响可访问性和CSS控制。
什么时候该用 <br>，而不是 <p></p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/xiazai/skill10828" title="财经HTML高端海报生成"><img
src="https://img.php.cn/upload/skill/001/246/273/6adaf20dbae7c507.jpg" alt="财经HTML高端海报生成" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/xiazai/skill10828" title="财经HTML高端海报生成">财经HTML高端海报生成</a>
<p>复杂得财经如何变成清晰，适合手机看的海报？如何加上你的IP</p>
</div>
<a href="/xiazai/skill10828" title="财经HTML高端海报生成" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div>
只有在**同一语义块内需要手动断行**时才用 <br>。比如地址、诗歌、表单提示这类内容，逻辑上是一段，但视觉上必须分多行显示。<p></p> 是语义化分段，自带上下间距和可访问性支持；滥用 <br> 替代 <p></p> 会导致结构松散、屏幕阅读器误读、后续 CSS 难以统一控制。
- ✅ 合理场景：
<p>北京市朝阳区建国路8号<br>邮编：100022</p>
- ❌ 错误写法：
<div>第一段内容<br>第二段内容</div>—— 这该用两个<p></p> - ⚠️ 注意：
<br>是空元素，必须写成自闭合形式：<br>或<br>，不能写<br>
<br> 不生效？先查这三处 CSS 干预
看起来没换行，大概率不是标签写错了，而是父容器的 CSS 把它“压平”了。
-
white-space: nowrap：哪怕写了<br>，整行不溢出就不会视觉换行（实际 DOM 已换，只是没位移） -
display: flex（默认flex-direction: row）：文本流换行被 Flex 布局接管，<br>失效；改用flex-direction: column或换为<div> + <code>display: block - 某些 CSS 重置库（如 old normalize.css）可能给
<br>加了margin: 0，但标准行为本就不带 margin，所以不是问题，只是你预期有空白——别依赖它出间距 - ✅ 推荐做法：用
white-space: pre-line+ 原始字符串直接赋值innerHTML - ❌ 避免：
text.split('\n').map(line => `<span>${line}</span><br>`).join('') - ⚠️ 如果必须用 JS 插入，确保对用户输入做 HTML 转义，或用
textContent+appendChild(document.createElement('br'))更安全 - 想保留源码中的回车换行？用
<pre class="brush:php;toolbar:false;"></pre>或white-space: pre-line - 长 URL / 单词撑破容器？加
overflow-wrap: break-word或word-break: break-all - 多行文本垂直居中？别靠堆
<br>，用display: flex; align-items: center; flex-direction: column - 表格内换行？用
table-layout: fixed+word-wrap: break-word，不是塞<br>
动态插入换行：JS 拼字符串不如 CSS 控制
后端返回带 \n 的字符串（如地址、日志），别用 JS 拆成数组再拼一堆 <br> —— 容易 XSS，也难维护。
立即学习“前端免费学习笔记（深入）”；
比 <br> 更靠谱的换行替代方案
真正需要 <br> 的场景其实很少。多数所谓“换行需求”，本质是排版控制问题，CSS 才是正解。
一旦发现页面里 <br> 超过 3 个，基本说明语义结构或 CSS 规则没理清——这时候该重构，不是补更多 <br>。
