HTML5 中 <hr /> 是自闭合标签，应写作 <hr /> 或 <hr />，不可写为 <hr /></hr>；它语义表示主题转换，非视觉分隔线，滥用会损害可访问性与文档结构。
HTML 里 <hr> 标签到底要不要闭合
现代 HTML5 规范中，<hr> 是自闭合标签，写成 <hr> 或 <hr/> 都合法，但浏览器一律按单标签处理。很多人写成 <hr></hr>，这不会报错，但属于冗余且语义错误——<hr> 没有内容模型，不能包裹任何东西。
常见错误现象：<hr>文字</hr> 看似“加了分割线”，实际渲染时浏览器会自动修正 DOM：把 </hr> 当作无效结束标签忽略，文字 被挤到 <hr> 后面显示，视觉上完全不像分割线。
- 用
<hr>就够了，别配</hr> - 如果用 XHTML 语法（极少场景），才需写
<hr/>，但当前绝大多数项目无需考虑 - 检查工具如 HTMLHint 会警告
<hr></hr>这类非法嵌套
用 CSS 控制 <hr> 样式比改标签更靠谱
<hr> 默认是浅灰细线，靠它原生样式做设计基本没得选。真正可控的方式是用 CSS 重置所有默认表现，而不是试图塞 class 到一个语义僵硬的标签里。
使用场景：需要虚线、渐变色、带 icon 的分隔、响应式粗细变化等。
立即学习“前端免费学习笔记（深入）”；
- 必须先清掉默认边框：
hr { border: none; }，否则 background 和 height 可能不生效 - 推荐用
height+background替代border，兼容性更好，也方便加径向渐变或 background-image - 若要垂直居中对齐文字（如“或者”），别用
<hr>包裹文字，改用 flex 容器 + 伪元素更稳定
hr {
border: none;
height: 1px;
background: linear-gradient(90deg, #eee, #999, #eee);
margin: 1.5em 0;
}
<hr> 的语义价值远大于视觉价值
搜索引擎和读屏软件会把 <hr> 解释为“主题转换”，不是“画一条线”。滥用它（比如每两段之间都加）反而破坏文档结构，影响可访问性。
容易踩的坑：用 <hr> 实现卡片间距、菜单项分隔、表单 section 分割——这些其实该用 margin、border-bottom 或更语义化的 <section> + heading。
- 只在内容逻辑发生明显切换时用，例如从正文跳到作者信息、从产品列表切到用户评价
- React/Vue 项目里，别为了“复用分割线组件”而封装
<HR />，多数时候直接写style={{ marginTop: '1rem' }}更轻量也更准确 - WCAG 2.1 不强制要求
<hr>，但若用了，就得确保它真代表语义断点，否则不如不用
替代方案：什么时候该放弃 <hr>
当你要的不是“换题”，而是“留空”“强调间距”或“装饰性线条”，<hr> 就是错的选择。它的存在本身就在暗示结构变化，强行压制语义只会让代码越来越难维护。
性能影响几乎为零，但可维护性损失明显：后续接手的人看到 <hr> 会下意识认为这里有逻辑分界，结果发现只是视觉占位。
- 纯间距？用
margin或gap（Flex/Grid） - 菜单分隔？用
border-bottom在<li>上 - 需要动画/交互的分割线？直接
<div class="divider">，不带语义更自由 - SSR 或静态站点生成器中，避免在循环里无条件插入
<hr>，易造成冗余 DOM 节点
真正麻烦的从来不是怎么画一条线，而是想清楚：这里到底需不需要被机器和人同时理解为“分界”。
