hr 是主题切换的语义标记，仅用于前后内容存在真实主题转换时（如“用户注册流程”跳至“密码重置说明”），须夹在两个语义明确的块级元素间，禁用 aria-hidden、width 等无效属性，样式应通过 border 相关属性控制。
hr 不是分割线生成器，它是主题切换的语义标记——用错位置，文档结构就塌了一角。
什么时候该用 hr 而不是 border-bottom
判断依据只有一条：前后内容是否发生了真实主题转换，比如从“用户注册流程”跳到“密码重置说明”，或从正文突然转入作者注释、法律声明、相关推荐等独立语义块。
- 同一主题下的段落间距（如两段产品描述之间）→ 用
margin或padding，别碰hr - 卡片列表项之间、导航菜单项之间 → 用
border-bottom或伪元素，hr会破坏流式语义 -
hr必须夹在两个已明确语义的块级元素之间，例如<hr> <section></section>，而不是<p></p> <hr> <p></p> - Flex 容器里直接放
hr很容易被压缩失效，需显式加align-self: stretch或width: 100%
hr 的样式定制必须绕开 color 和 height
hr 渲染本质是 border，不是文字也不是背景，所以 color、background、height（除非配合 border）多数无效或行为不可控。
- 改颜色？只用
border-color，例如hr { border-color: #555; } - 调粗细？设
border-top-width，而非height；若想极细线，用border-top: 1px solid #ddd+height: 0 - 要虚线/双线/渐变？保留
border-style或换background-image，但别删border: none前置重置 - 响应式场景下避免固定
width，它默认就是 100%，缩放时自动适配
嵌套、aria、内联属性——三个立刻翻车的点
hr 是流内容元素，不是装饰配件，任何试图“掩盖它语义”的操作都会让屏幕阅读器困惑、SEO 工具误判。
- 绝对不能放在
<p></p>里面，HTML5 验证直接报错：Element hr not allowed as child of element p - 删掉所有
aria-hidden="true"、role="separator"——它本就是role="separator"，加了反而冗余甚至冲突 - 禁用
width、noshade、size等 HTML4 属性，它们在 HTML5 中已废弃，部分浏览器会忽略或触发怪异渲染 - 如果真需要“仅视觉分隔”，就别用
hr，改用<div aria-hidden="true"></div>+ CSS border
最难的不是写对一行 <hr>，而是确认它前面那个 和后面那个 <section></section> 真的表达了不同主题——hr 自己不携带上下文，全靠邻居说话。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
