br用于纯文本内强制换行，不产生新段落；hr表示内容逻辑分隔，有语义且影响可访问性。二者不可混用，应依语义而非视觉选择。

br 是强制换行，不是段落分隔

用 <br> 就是让文字在当前位置立刻断行，不产生新段落、不加空行、不改变语义结构。它只解决“这里要折行”的问题，比如地址、诗歌、表单提示文案里需要控制换行位置时才该用。

常见错误是拿 <br> 替代 <p> 来分段——这样会导致语义混乱，屏幕阅读器无法识别段落边界，CSS 也难统一控制间距。

• 它是自闭合标签，写成 <br> 或 <br/> 都可以，但 HTML5 推荐用 <br>
• 不要嵌套在 <div> 里强行撑高，该用 margin/padding 的地方别偷懒用 <br>
• 连续多个 <br>（如 <br><br><br>）几乎总是设计或结构问题，应改用 CSS 控制间距

hr 是视觉分隔线，有默认语义

<hr> 表示主题或内容的逻辑分隔，浏览器默认渲染为一条水平线，且自带上下外边距。它不是装饰性线条，而是告诉用户：“前面的内容和后面的内容属于不同部分”。

过去常用 width、size、color 属性直接控制样式，但现在这些属性已废弃，必须用 CSS 替代：

• 用 style="width: 80%; border: none; border-top: 2px solid #ccc;" 替代旧式 <hr width="80%" size="2" color="#ccc">
• 如果只是想加条细线但不想带语义，就别用 <hr>，改用 <div style="border-top: 1px solid #eee;"></div>
• <hr> 在可访问性上会被读作“horizontal rule”，所以滥用会干扰辅助技术理解页面结构

什么时候该用 br，什么时候该用 hr

判断依据不是“看起来像换行还是像线条”，而是“你想表达什么”：

• 纯文本内控制折行位置 → 用 <br>（如：

  <p>北京市朝阳区<br>建国路8号</p>

  ）
• 两个独立段落/章节之间需要视觉+语义分隔 → 用 <hr>（如：文章末尾作者信息前）
• 仅需视觉分隔但无内容层级变化 → 用 CSS 边框（border-top / border-bottom）更合适
• 表格单元格内换行？别用 <br>，改用 white-space: pre-line 或调整单元格布局

现代项目中容易被忽略的细节

很多人以为 <br> 和 <hr> 是“简单到不用想”的标签，结果在响应式、可访问性和维护性上埋了坑：

• <br> 在 flex/grid 布局里可能失效（父容器设了 flex-wrap: nowrap），此时换行逻辑得靠 CSS 实现
• <hr> 默认有 margin-top 和 margin-bottom，不同浏览器值略有差异，重置时建议统一写 margin: 1.5em auto;
• SSR（服务端渲染）或静态站点生成器中，连续 <br> 可能被压缩工具误删，导致显示异常
• 国际化项目里，某些语言排版规则（如阿拉伯语从右向左）会让 <br> 行为变得不可预测，优先用块级结构替代