<hr />是语义化标签，表示主题分隔而非装饰线；仅当存在明确主题切换（如场景转换、观点更替）时使用，需配合CSS定制样式并避免滥用以保障可访问性。
<hr> 不是用来“加装饰线”的，它是语义化标签，表示主题分隔。如果你只想要一条视觉上的横线（比如菜单下方、卡片底部），<hr> 往往不是最佳选择。
什么时候该用 <hr>？
仅当上下文存在明确的主题切换时才用：<hr> 告诉浏览器和屏幕阅读器：“这里内容逻辑变了”。例如：
- 一篇博客里，叙事段落结束，评论区开始
-
<section>内部两个子主题之间（如“产品特性”与“用户反馈”） - 表单中，“联系信息”区块和“偏好设置”区块的边界
若只是为“看起来有间隔”，它反而会干扰语义结构，对可访问性不利。
为什么直接写 <hr> 常出问题？
默认渲染是 1px 浅灰线，但实际表现受 CSS 重置/框架影响极大：
- 某些 CSS 框架（如 Bootstrap）会把
<hr>的margin设为 0，导致看不见 - 部分旧版 reset.css 会清除所有边框，
<hr>变成隐形 - 移动端缩放或高 DPI 屏幕下，1px 线可能模糊或被渲染为 2px
- 不能设
height—— 它是替换元素，高度由border-top或border-bottom控制
想自定义样式，必须用 CSS
HTML5 已废弃 width、color、size 等属性，所有样式必须走 CSS：
<hr class="fancy-divider">
.fancy-divider {
border: none;
border-top: 2px dashed #666;
margin: 1.5rem auto;
width: 80%;
}
关键点：
- 先清空默认
border（否则新样式会叠加） - 用
border-top或border-bottom控制线条样式 - 用
width和margin: 0 auto居中，别依赖align属性 - 响应式场景下，
width推荐用max-width+margin组合，避免小屏溢出
替代方案：什么情况下该换掉 <hr>？
以下场景更推荐用其他方式：
- 卡片底部线：
<div>+border-bottom（语义更准，且可绑定数据） - 导航栏下划线：
::after伪元素（便于 hover 动画） - 需要垂直线或斜线：
<div>+transform或 SVG - 纯装饰性横线（无语义）：用
<div class="deco-line"></div>，避免误传语义
真正容易被忽略的是：语义错误比样式难看更严重——屏幕阅读器会把 <hr> 读作“分隔线”，如果它出现在毫无逻辑断点的位置，用户会困惑“哪来的主题切换？”
