hr 是语义分隔符，表示主题或章节的逻辑中断，非装饰性线条；仅当存在内容主题断裂点时才应使用，否则宜用 CSS 实现视觉分隔，并注意无障碍与样式一致性。
hr 标签不是装饰性线条，而是语义分隔符
hr 的本质是表示主题或章节的**逻辑中断**，比如段落间话题切换、文档中不同作者内容分界、或文章末尾的署名分隔。浏览器默认渲染为一条浅灰色水平线，但这只是 UA stylesheet 的视觉 fallback —— 它本身没有“线”的语义，只有“分隔”含义。滥用 hr 替代 border-bottom 或纯 CSS 分隔线，会干扰屏幕阅读器对文档结构的理解，也可能影响 SEO 对内容层级的解析。
重置默认样式前先确认是否真需要 hr
很多场景下，用 CSS 实现视觉分隔更合理：
- 导航菜单项之间加线？用
li::after或border-bottom - 卡片底部装饰线？直接给卡片容器加
border-bottom - 仅为了留白？用
margin更语义清晰
只有当 HTML 结构上确实存在一个**内容主题的断裂点**（如「正文结束」→「参考资料」），才该用 hr。否则删掉它，改用 CSS。
保留 hr 时如何安全地自定义样式
现代浏览器支持直接对 hr 设置 border、background、height 等，但要注意兼容性和语义一致性：
立即学习“前端免费学习笔记（深入）”；
- 避免设
width: 100%——hr默认是块级元素，宽度由父容器决定，硬写 100% 可能触发意外盒模型计算 - 慎用
background-image—— 图片若含信息（如图标），需补充 ARIA label，否则屏幕阅读器无法传达 - 若需虚线/双线，优先用
border-style: dashed或double，而非背景图 - 高度控制用
height+background-color，或border；不要只靠margin模拟线条
示例（简洁可靠）：
hr {
border: none;
height: 2px;
background: #e0e0e0;
margin: 2rem 0;
}
无障碍与可访问性必须检查的点
hr 本身会被多数屏幕阅读器读作“分割线”或跳过，但它仍参与焦点顺序和 DOM 结构流。容易被忽略的问题：
- 在
hr前后添加空行或大间距，可能让键盘用户在 tab 导航时“掉进空白” - 如果
hr位于两个标题之间（如h2→hr→h3），应确保h3是h2的逻辑子级，否则破坏大纲层级 - 动态插入的
hr（如 JS 渲染评论分隔），需手动触发aria-live提示，否则视障用户不知内容已分隔
真正麻烦的从来不是怎么画一条线，而是这条线在 DOM 结构、CSS 渲染、辅助技术三者之间是否保持一致 —— 少一个环节，就可能变成看不见的陷阱。
