br仅用于同一段内强制换行且无语义，如地址、诗歌；hr表示内容主题逻辑分隔，有语义且影响可访问性；二者均自闭合但不可混用，滥用会破坏结构、SEO与无障碍。
br 和 hr 都是自闭合标签，但语义完全不同：用错一个，结构就乱了，屏幕阅读器也会读错。
什么时候该用 br？只在需要“段落内折行”时
它不是分段工具，只是让同一段文字在指定位置换行。滥用 br 替代 p 会导致语义断裂、CSS 间距难统一、辅助技术无法识别段落边界。
- 适合场景：地址（
The White House<br>1600 Pennsylvania Avenue NW<br>Washington, DC 20500
）、诗歌、表单提示文案中需控制断点的位置 - 错误用法：
<p>第一段</p><br><p>第二段</p><div class="aritcle_card flexRow"> <div class="artcardd flexRow"> <a class="aritcle_card_img" href="/xiazai/skill5493" title="html-to-pptx"><img src="https://img.php.cn/upload/skill/000/000/081/179051045119472.jpg" alt="html-to-pptx" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a href="/xiazai/skill5493" title="html-to-pptx">html-to-pptx</a> <p>将多页 HTML 演示文稿转换为美化的 PPTX 文件，便于分享和分发。</p> </div> <a href="/xiazai/skill5493" title="html-to-pptx" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div>——这会让两个p被br“挤”在一起，视觉和语义都混乱 -
br不接受任何属性，写成<br>或<br />都可，但 HTML5 推荐不带斜杠；连续多个br（如<br><br><br>
）几乎总是 CSS 间距没设好，该用margin或padding解决
什么时候该用 hr？只在内容逻辑切换处
hr 表示“前面和后面属于不同主题或章节”，不是画线装饰。浏览器默认渲染为带上下外边距的水平线，且会被屏幕阅读器读作 “horizontal rule”。
立即学习“前端免费学习笔记（深入）”；
- 正确场景：文章小节之间、评论区与正文之间、表单分组之间
- 错误用法：仅为了加一条细线就用
hr；或把它塞进div里当分割线用——这时应改用<div style="border-top: 1px solid #eee;"></div> - 所有旧属性（
color、width、size、align、noshade）均已废弃，必须用 CSS 控制样式，例如：<hr style="width: 80%; border: none; border-top: 2px solid #333;"> - 务必写成
<hr>，不要写<hr />或<hr></hr>；后者在 XHTML 模式下可能报错，前者在某些 JS 动态插入场景会被浏览器误转为嵌套结构
br 和 hr 的常见混淆点
最常被忽略的是语义权重：br 是纯文本级操作，hr 是文档结构级标记。它们都不能用来“撑高容器”或“微调布局”——那是 CSS 的事。
- 想让两段文字离远点？用
p { margin-bottom: 1.5em; }，别堆br - 想在卡片底部加条浅色线？用
div+border-bottom，别硬套hr - 用
hr前先问一句：“这里前后的内容真的属于不同逻辑块吗？” 答案是否定的，就别用
