<br>仅强制换行，无语义、无间距、不参与布局流，滥用会导致可访问性差、响应式错位及维护困难；正确场景限于地址、诗歌等需保留原始断行的内容。
在 HTML 中插入换行为什么不能只用 <br>
因为 <br> 只是强制折行，不产生语义分隔，也不影响块级布局流。它常被误用于替代段落结构，结果导致样式难维护、屏幕阅读器体验差、响应式断点失效。
典型错误场景：
• 在标题后连打多个 <br> 实现“空行”
• 用 <br> 拆分地址或诗歌行，却没包裹在 <address> 或 <pre> 里
• 在 Flex/Grid 容器中滥用 <br>，实际该用 margin 或 gap
<hr> 不只是画一条线，它代表内容主题的切换
<hr> 是语义化分隔符，浏览器默认渲染为水平线，但它的核心作用是标记前后内容逻辑关系的中断——比如章节过渡、作者署名前的停顿、评论区与正文的分界。
容易踩的坑：
• 直接写 <hr> 而不加 CSS 重置，在现代设计中常显得突兀（默认有上下 margin 和 border）
• 用 <hr> 分隔导航菜单项——这里该用 border-bottom 或 gap
• 忽略可访问性：部分旧屏幕阅读器会播报 “horizontal rule”，若上下文无明显主题变化，反而造成干扰
真正需要控制文本流时，优先用 CSS 而非标签
换行和分割的本质是布局控制，HTML 标签只是语义载体。现代开发中，90% 的“换行需求”应由 CSS 处理：
• 行内元素换行：用 white-space: pre-line 或 display: block
• 段落间距：设 p { margin-block: 1em }，而非堆 <br>
• 响应式分割线：用伪元素 ::after + border-bottom，方便控制粗细/颜色/长度
• 避免 <hr> 的场景：卡片分隔、Tab 页签下方横线、表单字段间浅灰线——这些都不是语义分隔，纯视觉装饰
兼容性和渲染差异必须手动验证
<br> 在所有浏览器中行为一致，但 <hr> 的默认样式差异不小：Safari 默认带阴影，Firefox 的 margin 更大，IE11 甚至不支持 color 属性直接设线色。
实操建议：
• 重置 <hr> 样式时，至少覆盖 margin、border、padding、height
• 不要用 background-color 给 <hr> 上色（部分浏览器忽略），改用 border-color 或 background-image: linear-gradient()
• 在 email HTML 中慎用 <hr>——Outlook 对它的支持极不稳定，宁可用带 height: 1px 和 background 的 <div>
<br>，却没意识到这本该是 CSS 的 margin-top。 
