仅在行内上下文中有效，遇块级元素自动换行后失效；语义上表段落，仅为强制折行；现代布局应优先用css（如margin、white-space）替代。
为什么 <br> 有时候换行没效果
因为 <br> 只在「行内上下文」里起作用，遇到块级元素（比如 <div>、<code><p></p>、<h3></h3>）自动换行后，再加 <br> 就没意义了。常见于把 <br> 写在 <p></p> 外面，或嵌套在 <pre class="brush:php;toolbar:false;"></pre> 里但被 CSS white-space 覆盖。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 只在纯文本流中用
<br>：比如地址、诗行、表单提示文案这类「本该是一段，但需人工断行」的场景 - 避免在 flex/Grid 容器里依赖
<br>换行——布局逻辑该交给 CSS - 检查是否被
display: contents或visibility: hidden等样式干扰了渲染
<p></p> 和 <br> 语义上根本不是一回事
<p></p> 表示一个段落，是语义化标签；<br> 是纯表现指令，告诉浏览器“这里强制折行”。搜索引擎、屏幕阅读器、打印样式都按这个区别处理。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 有逻辑分段就用
<p></p>，哪怕只有一句话——比如卡片里的标题+描述，两个<p></p>比<p>标题<br>描述</p>更合理 - 用
<br>的地方，复制到纯文本编辑器里应该仍保持原换行位置（比如歌词、代码注释说明） - 别为了“少写一个标签”硬凑
<br>——CSS 里加margin-bottom比滥用<br>更可控
CSS 替代方案比 <br> 更可靠
现代布局中，90% 的所谓“换行需求”其实该由 CSS 解决。比如列表项之间空一行、表单字段垂直对齐、响应式文案断行——这些用 <br> 会卡死维护性。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 段间距统一用
p { margin-bottom: 1em; }，而不是每个<p></p>后塞<br> - 需要响应式断行时，用
white-space: pre-line配合n字符，或word-break: break-word - 表格/表单中强行换行？优先考虑
display: block或flex-direction: column，而非塞<br>
服务器端模板里拼 <br> 很危险
用户输入带换行符（n），后端直接 .replace(/n/g, '<br>') 插进 html，容易触发 xss（如果没转义）或破坏结构（比如把 <br> 塞进 <textarea></textarea> value 里）。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 服务端输出前，先对内容做 HTML 实体转义（
<、>），再替换换行符 - 前端渲染富文本？用
textContent+innerText拼接，或信任内容时用innerHTML配合DOMPurify - 纯展示文本换行，CSS 的
white-space: pre-wrap通常比手动生成<br>更安全
真正难的不是选 <br> 还是 <p></p>，而是得一眼看出当前内容有没有独立语义、会不会被复用、是否要适配屏幕阅读器——这些没法靠快捷键解决。