是唯一语义正确的主题分隔元素，仅用于相邻内容块存在逻辑主题切换时（如“产品介绍”后接“用户评价”），禁用color/width等废弃属性，样式须用border-top或background控制，纯视觉分隔应使用border-bottom或伪元素。
<hr> 是唯一语义正确的分割线元素，但它不是“画一条线”那么简单——用错位置、滥用样式、混搭 border，都会破坏结构可访问性。
什么时候必须用 <hr>
仅当两个相邻内容块在逻辑上属于不同主题或章节时才适用。比如「产品介绍」段落之后接「用户评价」区块，中间插一条 <hr> 才算合理。
- 错误用法：
<div> <button>登录</button><hr> <button>注册</button> </div>—— 按钮之间没有主题切换，纯属视觉分隔 - 正确用法：
<p>本季度销售数据如下：</p><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill6712" title="Wechat HTML Publisher"><img src="https://img.php.cn/upload/skill/000/000/081/179109368394970.jpg" alt="Wechat HTML Publisher" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/skill6712" title="Wechat HTML Publisher" class="overflowclass">Wechat HTML Publisher</a> <p class="overflowclass">直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。</p> </div> <a rel="nofollow" href="/xiazai/skill6712" title="Wechat HTML Publisher" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div> <table>...</table> <hr> <h3>客户反馈摘要</h3> - 屏幕阅读器会把
<hr>读作“分隔线”，若它出现在无关上下文中，会干扰信息流
为什么不能用 color 或 width 属性改样式
HTML5 已废弃 <hr color="#666"> 和 <hr width="80%"> 这类写法，现代浏览器可能忽略，或渲染不一致。
- 颜色必须用
border-color（不是color），因为默认样式本质是边框 - 高度控制要清掉默认边框：
hr { border: none; height: 2px; background: #333; } - 设
width: 100%在 flex 容器里容易溢出，应改用max-width: 100%+margin: 0 auto
替代方案：什么情况下该用 border 而不是 <hr>
当你只是需要一条视觉分隔线，且它不表达任何语义变化时，border-bottom 更轻量、更可控。
- 列表项之间：
<li style="border-bottom: 1px solid #eee;">选项一</li> - 卡片底部：
.card { border-bottom: 2px dashed #999; } - 响应式场景下，
border可随父容器缩放，而<hr>的margin常需重置才能对齐 - 伪元素方案（如
::after）适合带文字的分割线（如“或”居中），但不能用于 contenteditable 富文本内部
真正难的不是“怎么画一条线”，而是判断这条线是否该承载语义——一旦选错，后续所有样式、适配、无障碍处理都会走偏。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
