<hr /> 是语义化主题切换标记而非画线工具，必须单独使用、禁用内联属性，样式通过 CSS 的 border 控制，仅在内容发生主题/时空/角色切换时使用。
hr 标签不是画线工具，是主题切换标记
它不负责“看起来像一条线”，而是告诉浏览器和屏幕阅读器：“前后内容已不属于同一主题”。比如小说里白天集市场景结束、深夜密室对话开始，<hr> 就是这个语义断点。用错会误导辅助技术、破坏文档结构、让搜索引擎误判内容连贯性。
怎么写才合法且语义正确
现代 HTML5 中，<hr> 必须是纯净标签，不带任何内联属性：
-
<hr width="80%">、<hr size="2">、<hr color="#ccc">全部无效 —— 浏览器可能忽略，或触发怪异模式 -
<p><hr></p>是非法嵌套 —— 解析器会自动闭合<p>，实际变成<p></p><hr> -
<hr alt="分隔线">或<hr aria-hidden="true">属于反模式 ——alt对<hr>无意义，隐藏则直接剥夺语义 - 正确写法只有两种：
<hr>或<hr />，单独成行，前后各空一行更易维护
样式必须用 CSS 控制，但别破坏语义
<hr> 默认渲染依赖 border（不是 background 或 height），所以改颜色/粗细要抓对属性：
- 设高度：用
border-top-width或height+border: none，但注意高 DPR 屏幕下height: 1px可能发虚，可补transform: scaleY(0.5) - 改颜色：必须用
border-top-color，color或background-color无效 - 居中或缩宽：用
margin: 0 auto+width: 80%，而非废弃的align属性 - Flex/Grid 容器里容易被压缩消失：需显式加
align-self: stretch或width: 100%
什么情况坚决不用 hr
只要没发生真正的主题、时空、角色或逻辑单元切换，就别用 <hr>：
立即学习“前端免费学习笔记（深入）”；
- 卡片底部那条细线 —— 用
border-bottom更合适 - 导航菜单项之间的竖线 —— 伪元素
::after或border-right - 两个普通段落之间（同属一篇技术说明）—— 靠
margin-bottom控制间距即可 - 想在中间加文字如“或者”—— 此时已不是语义分隔，该用
<div class="divider-with-text">或者</div>
真正难的不是怎么调样式，而是每次光标移到那儿准备敲 <hr> 之前，得停半秒问自己：前后两段，是不是真的换了话题、换了时间、换了说话人？答不上来，就删掉。
