hr标签是语义化主题分隔符，非装饰性画线工具；仅当前后内容存在主题、时空或说话人断裂时才应使用，否则应改用css边框或div，且必须通过css重置默认样式并添加aria-label提升可访问性。
hr 标签不是画线工具，而是告诉浏览器和辅助技术：“这里主题变了”——用错就破坏结构、干扰读屏、误导搜索引擎。
什么时候该用 hr 而不是 border-top 或 div？
判断依据只有一条：前后内容是否存在**主题、时空或说话人断裂**。
- 适用场景：
<p>他刚推开实验室的门。</p> <hr> <p>三年后，这扇门再没被打开过。</p>（时间跳跃） - 适用场景：
<section><h2>用户协议</h2> <p>…</p><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/xiazai/shouce/1862" title="使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件"><img src="https://img.php.cn/upload/manual/000/000/010/170901721079108.gif" alt="使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/shouce/1862" title="使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件" class="overflowclass">使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件</a> <p class="overflowclass">如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Andr​​oid友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Andr​​oid应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更</p> </div> <a rel="nofollow" href="/xiazai/shouce/1862" title="使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div></section><hr> <section><h2>隐私政策</h2> <p>…</p></section>（话题切换） - 不适用场景：卡片底部加细线、导航菜单项之间加竖线、表单字段组仅靠视觉分组——这些全该用 CSS 边框或伪元素
为什么不能写 <hr width="80%"> 或 <hr style="height: 2px">？
HTML5 已彻底移除 width、size、noshade、align 等所有内联属性；height 在多数浏览器里也不生效，因为默认样式中 border 和 margin 会覆盖它。
- 合法写法只有：
<hr>或<hr> - 样式必须走 CSS，且要先清掉默认边框：
hr { border: none; height: 1px; background: #ccc; } - 高 DPR 屏幕发虚？补一句：
transform: scaleY(0.5);
怎么让 hr 真正支持可访问性？
屏幕阅读器默认只读作“分隔线”，用户不知道断在哪、为什么断。加 aria-label 是最轻量也最有效的补救方式。
- 正确：
<hr aria-label="此处切换至作者注释"> - 错误：
<hr alt="分隔线">（alt对hr无效） - 错误：
<p></p> <hr>（触发自动闭合，实际解析为<p></p> <hr>，结构非法）
真正难的不是怎么调出那条线，而是每次想敲 <hr> 前，停下来问一句：前后两段，是不是真的换了主题、换了时空、换了说话人？答不上来，就别加。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
