是语义化标签，表示内容主题切换而非装饰线条，应在逻辑分隔（如正文与作者注释）时使用；滥用会干扰可访问性，样式定制需重置border并用border-top控制，保持height:0和语义完整性。

<hr> 是最直接的分割线实现方式，但它不是装饰性线条，而是语义化标签——浏览器默认渲染为水平线，但它的本质是「段落级内容主题切换」的标记。

什么时候该用 <hr> 而不是 <div style="border-top:1px solid #ccc"> <p>当两个区块在逻辑上属于不同话题、不连续的时间段、或作者意图明确切换上下文时，<code><hr> 才合适。比如：文章正文结束 → 作者注释；用户评论区 → 相关推荐；表单字段组之间存在语义断层。纯视觉分隔（如卡片间距、菜单项分隔）应交由 CSS 控制，滥用 <hr> 会干扰屏幕阅读器对内容结构的理解。

<hr> 的默认行为和常见误操作

现代浏览器中 <hr> 默认是块级元素、无 margin（部分旧 UA 有）、带阴影、宽度 100%、高度约 2px。容易踩的坑包括：

• 在 Flex 或 Grid 容器里直接放 <hr>，可能被压缩成一条细线甚至消失——需显式设置 align-self: stretch 或 width: 100%
• 用 color 或 background 改颜色无效，必须用 border-color（因为它是 border-based 渲染）
• 加 aria-hidden="true" 是反模式：它本就不是装饰元素，隐藏会破坏语义流
• 嵌套在 <p></p> 里是 HTML5 无效结构——<hr> 是段落级流内容，不能作为 <p></p> 的子元素

可控的样式定制方法（保留语义）

可以安全覆盖默认样式，只要不破坏其块级语义和可访问性：

<hr><style>
hr {
  border: none;
  border-top: 2px dashed #666;
  margin: 1.5em 0;
  height: 0;
}
</style>

关键点：

• 设 border: none 再单独定义 border-top，比只改 border-color 更可靠
• 用 margin 控制上下间距，避免依赖默认 UA 样式
• 保持 height: 0（而非设 height 像素值），防止某些浏览器渲染出额外空白
• 若需响应式粗细，可用 border-image 或媒体查询配合 border-width

真正难的是判断「这里到底需不需要一次语义分隔」——很多时候开发者插入 <hr> 只是因为设计稿画了一条线，却没想清楚内容是否真的发生了主题跃迁。