hr标签是语义分隔符而非装饰线，应严格用于逻辑分隔已明确主题的块级元素之间，避免滥用导致可访问性与SEO问题，必要时需保留aria-label确保辅助技术正确识别。
hr 标签不是装饰线，而是语义分隔符
直接用 <hr> 画一条线，浏览器默认渲染没问题，但问题常出在语义错位或样式失控上。它本意是表示「主题、章节或内容的逻辑分隔」，不是用来当视觉分割线的万能工具。滥用会导致屏幕阅读器误读、SEO 语义稀释，甚至被某些 CMS 或静态生成器自动过滤。
避免用 class 或 style 粗暴覆盖默认行为
很多人一上来就写 <hr class="divider"> 然后在 CSS 里重置所有属性，结果发现 Safari 下仍残留阴影、Firefox 对 border 渲染不一致、或者打印时消失——这些都不是 bug，而是浏览器对 <hr> 的语义保留策略。
- 不要用
border: none+background模拟线条，改用background-color+height更稳妥 - 避免设置
margin为负值来“贴边”，改用margin-block控制上下间距，兼容性更好 - 若需响应式粗细，用
height配合min-height，别依赖border-width
真正需要主题过渡时，优先检查是否该用 heading
很多场景下，你以为需要 <hr> 分隔两个板块，其实更合适的是加一个 <h2> 或 <h3>。比如「用户评论」区块前加 <hr>，不如改成 <h2>用户评论</h2>——既满足语义，又自带分隔感，还支持锚点跳转和大纲生成。
-
<hr>应出现在两个**已具明确主题的块级元素之间**，例如<section>和<aside>之间 - 同一页面中连续出现超过 2 次
<hr>，大概率说明结构层级没理清 - 如果前后内容属于同一逻辑单元（如 FAQ 列表项），用
border-bottom在<li>上更合理
必须用 hr 时，最小化干预并保留可访问性
真要保留 <hr>，就让它干好本职：分隔、无干扰、可被辅助技术识别。下面这段是经测试在 Chrome/Firefox/Safari/Edge 及 NVDA/JAWS 中表现一致的写法：
立即学习“前端免费学习笔记（深入）”；
<hr aria-label="分隔：上文为产品介绍，下文为用户评价">
注意：
- 不要删掉
aria-label——默认情况下，部分读屏器会把<hr>读作“水平线”，毫无上下文 - 不要包裹在
<div>里再设宽高，<hr>是替换元素，自身支持width和height - 若需两端留空，用
margin-inline: 2rem，而不是靠父容器 padding 挤压
真正难的不是怎么画那条线，而是判断此刻到底需不需要它——多数时候，删掉 <hr> 反而让结构更干净。
