<hr />是语义化标签，表示内容主题切换而非装饰线条，应在逻辑分隔（如正文与作者注释）时使用；滥用会干扰可访问性，样式定制需重置border并用border-top控制，保持height:0和语义完整性。
<hr> 是最直接的分割线实现方式，但它不是装饰性线条，而是语义化标签——浏览器默认渲染为水平线，但它的本质是「段落级内容主题切换」的标记。
什么时候该用 <hr> 而不是 <div style="border-top:1px solid #ccc">
当两个区块在逻辑上属于不同话题、不连续的时间段、或作者意图明确切换上下文时，<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>里是 HTML5 无效结构——<hr>是段落级流内容，不能作为<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> 只是因为设计稿画了一条线，却没想清楚内容是否真的发生了主题跃迁。
