用 <hr> 插入水平分割线，不是 <hr>
HTML5 中 <hr> 是一个**自闭合的换行级元素**，但语法上不写斜杠更稳妥。浏览器普遍支持 <hr>，而 <hr> 在某些旧文档类型或严格 XML 解析环境下可能出问题。
常见错误现象：
– 页面里 <hr> 看起来正常，但在 XHTML 模式下报解析错误
– 用 JS 动态插入时，innerHTML = '<hr>' 被某些浏览器自动修正为 <hr>，导致意外嵌套
- 始终用
<hr>，不加结束标签，也不加斜杠 - 如果项目强制 XHTML 兼容，改用
<hr>前需确认 DOCTYPE 和解析器行为 - 它默认是块级元素，前后自带换行，不需要额外
<br>
<hr> 的样式控制必须用 CSS，不能靠属性
老教程里写的 color、width、size 等 HTML 属性在 HTML5 中已废弃，浏览器可能忽略或表现不一致。
使用场景：
– 需要细线、虚线、带颜色、带阴影的分隔效果
– 在响应式布局中随容器缩放
立即学习“前端免费学习笔记（深入）”；
- 用
border控制线型：比如border: none; border-top: 2px dashed #999; - 避免只设
height：默认<hr>高度由边框和 margin 决定，直接设height容易塌陷 - 清除默认 margin：不同浏览器对
<hr>的上下 margin 不同，建议显式重置margin: 1rem 0;
语义别乱用：<hr> 表示主题/内容的**段落级分隔**，不是装饰线
错误现象：
– 在按钮组之间加 <hr> 当视觉分隔
– 在卡片 footer 里塞一条 <hr> 做下划线
这些场景更适合用 <div> + CSS 边框
<p>W3C 明确定义：<code><hr> 表示当前段落与下一个段落之间存在**主题转换**，比如章节切换、对话轮次变更、作者署名前的停顿。
- 博客文章末尾作者信息前可用
<hr>，表示内容主体结束 - 评论列表中每条评论之间不用
<hr>，那是结构重复，该用 margin 或 border - 无障碍工具会把
<hr>读作“分隔线”，滥用会干扰屏幕阅读器逻辑流
替代方案：现代布局中，CSS border 更灵活也更可控
如果你只是想要一条视觉上的横线，而不是语义上的主题分隔，<hr> 反而是绕路。
性能与兼容性影响：
– <hr> 是 HTML 元素，参与 DOM 树构建和样式计算
– 单纯装饰线用 border-top 在伪元素或容器上，减少节点数，也避免语义污染
- 在标题下方加线：用
h2::after+border-bottom - 列表项之间加线：给
li:not(:last-child)加border-bottom - 需要动画（如渐显）：CSS
border可以 transition，<hr>本身不能动
真正需要 <hr> 的时候其实不多，多数人只是习惯性敲了它。语义对了，样式才不会翻车。
