是语义化主题分隔符，仅用于章节更替等明确语义断裂场景；必须用CSS重置默认样式（如border: none; height: 1px; background: #e0e0e0;），禁用已废弃属性，兼顾可访问性与响应式适配。
<hr> 是语义正确的做法，但直接写它只是开始，不是终点——浏览器默认样式不可靠，不加 CSS 几乎等于没分隔。
什么时候该用 <hr> 而不是 border-bottom
核心判断依据是：是否表示「主题转换」。比如从「产品介绍」切换到「用户评价」，或从「技术原理」跳到「使用示例」，这时 <hr> 有明确语义，对屏幕阅读器、SEO 和代码可维护性都有价值。
如果只是列表项之间加一条线、卡片底部划一道、或者某个 div 内部需要视觉锚点，border-bottom 更合适——它不带语义负担，定位更灵活，也不影响文档大纲结构。
- 误用场景：在每个
<li>后面塞<hr>—— 这不是主题分隔，是视觉装饰，应该用 CSS - 正确场景：
<h2>安装步骤</h2> <p>...</p><div class="aritcle_card flexRow"> <div class="artcardd flexRow"> <a class="aritcle_card_img" href="/xiazai/skill10828" title="财经HTML高端海报生成"><img src="https://img.php.cn/upload/skill/001/246/273/6adaf20dbae7c507.jpg" alt="财经HTML高端海报生成" ></a> <div class="aritcle_card_info flexColumn"> <a href="/xiazai/skill10828" title="财经HTML高端海报生成">财经HTML高端海报生成</a> <p>复杂得财经如何变成清晰，适合手机看的海报？如何加上你的IP</p> </div> <a href="/xiazai/skill10828" title="财经HTML高端海报生成" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div> <p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p> <hr> <h2>常见问题</h2> - 注意：HTML5 中
<hr>不再支持align、width、color等属性，写了也无效
<hr> 的 CSS 样式必须绕开的坑
很多人写 hr { color: #333; } 发现没反应，是因为 color 对 <hr> 不起作用（它不是文本元素）。真正生效的是 border 或 background。
- 实线推荐：
hr { border: none; height: 1px; background: #e0e0e0; } - 虚线/点线更稳：
hr { border-top: 1px dashed #999; height: 0; }（设height: 0避免多出空白） - 渐变线必须指定
height像素值，比如height: 2px，否则background: linear-gradient(...)可能不渲染 - 移动端缩窄宽度别只写
width: 80%，要配合margin: 1.5rem auto居中，且优先用max-width
响应式与可访问性容易被忽略的细节
<hr> 默认是块级元素，自带上下 margin，但各浏览器默认值不一致（Chrome 是 0.39rem，Firefox 是 0.5rem），直接依赖会导致布局错位。
- 务必重置：
hr { margin: 1.5rem auto; }（显式定义，不靠默认） - 不要用
display: inline或float改变它的行为——会破坏语义流和屏幕阅读器识别 - 如果内容区域有深色背景，记得测试对比度：
background颜色需满足 WCAG 4.5:1 文本对比度要求 - 避免在
<hr>上加tabindex或aria-label——它本身已是语义分隔符，额外标注反而干扰辅助技术
最常被跳过的动作，是忘记给 <hr> 加 class 并统一管理样式。放任它靠浏览器默认，等于把结构控制权交给了不可控变量。
