是表示内容逻辑分隔的语义化空元素，非装饰用途；样式必须用 css 控制（如 border-top 或 background），禁用废弃属性；滥用会损害结构与无障碍，替代方案 更灵活可控。
怎么用 <hr> 插入分隔线
直接写 <hr> 就能插入一条默认样式的水平线，浏览器会自动渲染为浅灰色细线。它是个空元素，不需要闭合标签（<hr> 在 HTML5 中合法但不必要）。
常见错误是把它当作文本分隔“装饰”硬塞进段落中间，结果语义混乱——<hr> 的本意是表示主题或内容的**逻辑分隔**，比如章节切换、作者信息与正文之间，不是为了“多加一条线好看”。
- 别在
<p></p>里套<hr>，HTML 规范不允许 - 别用多个
<hr>叠加来“加粗”，该用 CSS 控制样式 - 如果只是视觉留白，优先考虑
margin，而非插入语义性分隔符
<hr> 的样式为什么改不动
因为老式写法如 color、width、align 等属性早已被废弃，现代浏览器可能忽略它们。想控制外观，必须用 CSS。
关键点：默认 <hr> 是个 display: block 元素，但它的背景、边框、高度都得靠 CSS 覆盖。直接设 height 没用，它本身没有内容高度；真正起作用的是 border 或 background。
立即学习“前端免费学习笔记（深入）”；
- 要细线：用
border: none; border-top: 1px solid #ccc; - 要虚线：用
border-top: 2px dashed #999; - 要渐变线：用
background: linear-gradient(90deg, #eee, #999, #eee); height: 1px; - 注意：设
margin比设padding更可靠，<hr>不接受padding
替代方案比 <hr> 更可控吗
多数情况下，是的。特别是需要响应式、动画、或与 Flex/Grid 布局配合时，用 <div> + CSS 更稳妥。
<p><code><hr> 的语义价值仅在确实存在内容逻辑断点时才成立。如果只是为了排版节奏，一个带 class 的 <div class="divider"></div> 更灵活：
div.divider {
height: 1px;
background: #e0e0e0;
margin: 1.5rem 0;
}
- 能自由加
transform、opacity动画 - 可设
max-width居中，而<hr>默认 100% 宽度且难约束 - 无障碍工具对空
<hr>的处理较统一，但若滥用反而干扰阅读流
兼容性和无障碍要注意什么
<hr> 本身兼容性极好，所有浏览器都支持。问题常出在自定义样式后丢失语义或可访问性。
屏幕阅读器会把 <hr> 读作“分隔线”或“水平规则”，这是它的优势。但如果用 CSS 把它隐藏（visibility: hidden 或 display: none），就同时抹掉了语义——此时不如删掉标签。
- 避免用
opacity: 0隐藏，它仍会被读出，但用户看不到 - 不要给
<hr>加role或aria-label，它已有内置语义 - 深色模式下，硬编码
#ccc可能看不见，建议用color-scheme: inherit或系统色变量
真正难的不是画一条线，而是判断这里到底需不需要一条有语义的分隔线。很多人加了 <hr> 只是因为“看起来像教程里那样”，结果破坏了结构层次。
