是语义化分隔符，仅用于主题切换（如章节更替），不可滥用；必须用而非 css 边框的场景是存在明确语义断裂；需用 css 安全定制样式并注意可访问性。
<hr> 不是用来“画线”的，它是语义化标签，只在内容发生主题切换时才该用——比如章节更替、话题转向、作者变更。滥用会干扰屏幕阅读器，破坏文档大纲结构。
什么时候必须用 <hr> 而不是 <div> 或 CSS 边框
<p>仅当两个相邻区块之间存在明确的语义断裂：例如从“产品介绍”跳到“用户评价”，或从“技术原理”转为“部署步骤”。这时 <code><hr> 会向辅助技术传达“此处主题已变”，而 <div style="border-top:1px solid #eee"> 只是一条视觉线，无语义。
<ul>
<li>✅ 正确场景：<code><h2>安装指南</h2>
<p>…</p>
<hr>
<h2>升级说明</h2>
<p>第一段</p>
<hr>
<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> → 应该用 margin-bottom
<hr> 不能嵌套在 <p></p> 内，HTML 解析器会自动闭合 <p></p>，导致结构错乱为什么直接写 <hr> 会出问题
HTML5 中 <hr> 已彻底移除所有表现属性（width、size、noshade、align），浏览器仍可能渲染，但属于兼容性残留，W3C 标准已不保证行为一致。
- Chrome 和 Safari 对
<hr width="50%">的处理可能不同，Firefox 可能直接忽略 -
<hr noshade>在部分旧版 Edge 中显示为阴影，在新版中完全无效 - XHTML 或 strict doctype 下，这些属性会导致校验失败
怎么用 CSS 安全定制 <hr> 样式
现代写法只依赖 border、height、background 和伪元素，避免用 outline 或 box-shadow（可能被读屏器误读为焦点状态）。
hr {
border: none;
height: 2px;
background: linear-gradient(90deg, #333, #999, #333);
margin: 2rem auto;
width: 80%;
}
- 用
border: none清掉默认边框，再用background或border-top重绘 -
height配合background更可控；border-top在高缩放比下可能模糊 - 若需虚线：
border-top: 1px dashed #666，别用已废弃的noshade - 响应式建议加
max-width，避免窄屏上溢出
容易被忽略的可访问性细节
<hr> 默认 role 是 separator，但若你用 CSS 把它变成粗色块、图标分隔符甚至动画线，就得手动补 role="presentation" 或改用 <div> ——否则屏幕阅读器仍会播报“分隔符”，造成语义污染。
<ul>
<li>自定义成装饰性横幅？加 <code>role="presentation" aria-hidden="true"
<hr>，用 <section aria-labelledby="hr-label"></section> + <h3 id="hr-label">相关资源</h3> 配合@media (prefers-color-scheme: dark) 调整颜色，别只靠默认灰
