<hr /> 是语义化分隔符，仅用于主题切换（如章节更替），不可滥用；必须用而非 CSS 边框的场景是存在明确语义断裂；需用 CSS 安全定制样式并注意可访问性。
<hr> 不是用来“画线”的，它是语义化标签，只在内容发生主题切换时才该用——比如章节更替、话题转向、作者变更。滥用会干扰屏幕阅读器，破坏文档大纲结构。
什么时候必须用 <hr> 而不是 <div> 或 CSS 边框
仅当两个相邻区块之间存在明确的语义断裂：例如从“产品介绍”跳到“用户评价”，或从“技术原理”转为“部署步骤”。这时 <hr> 会向辅助技术传达“此处主题已变”，而 <div style="border-top:1px solid #eee"> 只是一条视觉线，无语义。
- ✅ 正确场景：
<h2>安装指南</h2><p>…</p><hr><h2>升级说明</h2> - ❌ 错误场景：
<p>第一段</p><hr><p>第二段（仍是同一话题）</p>→ 应该用margin-bottom - ⚠️ 注意：
<hr>不能嵌套在<p>内，HTML 解析器会自动闭合<p>，导致结构错乱
为什么直接写 <hr> 会出问题
HTML5 中 <hr> 已彻底移除所有表现属性（width、size、noshade、align），浏览器仍可能渲染，但属于兼容性残留，W3C 标准已不保证行为一致。
- Chrome 和 Safari 对
<hr width="50%">的处理可能不同，Firefox 可能直接忽略 -
<hr noshade>在部分旧版 Edge 中显示为阴影，在新版中完全无效 - XHTML 或 strict doctype 下，这些属性会导致校验失败
怎么用 CSS 安全定制 <hr> 样式
现代写法只依赖 border、height、background 和伪元素，避免用 outline 或 box-shadow（可能被读屏器误读为焦点状态）。
立即学习“前端免费学习笔记（深入）”；
hr {
border: none;
height: 2px;
background: linear-gradient(90deg, #333, #999, #333);
margin: 2rem auto;
width: 80%;
}
- 用
border: none清掉默认边框，再用background或border-top重绘 -
height配合background更可控；border-top在高缩放比下可能模糊 - 若需虚线：
border-top: 1px dashed #666，别用已废弃的noshade - 响应式建议加
max-width，避免窄屏上溢出
容易被忽略的可访问性细节
<hr> 默认 role 是 separator，但若你用 CSS 把它变成粗色块、图标分隔符甚至动画线，就得手动补 role="presentation" 或改用 <div> ——否则屏幕阅读器仍会播报“分隔符”，造成语义污染。
- 自定义成装饰性横幅？加
role="presentation" aria-hidden="true" - 想让它有标题说明？不要塞文字进
<hr>，用<section aria-labelledby="hr-label">+<h3 id="hr-label">相关资源</h3>配合 - 深色模式下记得用
@media (prefers-color-scheme: dark)调整颜色，别只靠默认灰
