<hr />是HTML5明确认定的“主题性中断”语义元素，仅在内容逻辑发生主题切换（如章节更替、数据域转换）时使用；禁止嵌套于<p>内，须独立成行并用CSS重置样式以保障可访问性与一致性。
<hr> 是唯一被 HTML5 明确认定为“主题性中断”（thematic break）的语义化分割元素，不是装饰线，也不是视觉占位符——用错场景，就等于在结构里埋了个语义 bug。
什么时候必须用 <hr>？
只在内容逻辑发生主题切换时使用：比如文章中“前端基础”章节结束、“CSS 进阶”章节开始；表单里“个人信息”区块和“收货地址”区块之间；或者博客评论区上方那条分隔作者内容与用户留言的线。
常见错误现象：<p>用户名<hr>密码</p> —— <hr> 不能嵌在 <p> 里，浏览器会自动闭合前一个 <p>，导致 DOM 结构意外断裂。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 独立成行，前后都换行：写成
<p>上一段</p><hr><p>下一段</p> - 避免在纯 UI 容器（如
<div class="card">）内部硬塞<hr>，除非该容器本身承载了明确的主题转换 - 若用在表单中，检查是否真存在语义断层——两个字段组是否属于不同数据域？否则改用
border-bottom
为什么直接写 <hr> 默认样式难看？
浏览器默认给 <hr> 加了 border: none + height: 1px + background-color: #ccc 的组合，但实际渲染还受 user agent stylesheet 影响：比如 Chrome 会额外加 margin: 0.5em 0 和阴影，Safari 在高 DPR 屏上可能模糊发虚。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 重置必须做：
hr { margin: 0.75em 0; border: none; height: 1px; background-color: #e0e0e0; } - 老安卓 WebView 对
background-color渲染不稳定，补一句border-top: 1px solid #e0e0e0;更稳妥 - 别用已废弃的
size或width属性——它们在 HTML5 中无效，且无法响应式
<hr> 和 border-bottom 怎么选？
核心判断标准就一条：这条线，是告诉机器“这里主题变了”，还是告诉设计师“这里我需要一根线”？
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 语义优先：
<hr>会被屏幕阅读器读作 “section break”，border-bottom完全静音 - 性能无差别，但可维护性有落差：全站统一用
<hr class="section-break">，比散落在各处的border-bottom: 1px solid #eee更易全局调整 - Flex 布局里放
<hr>，记得加align-self: center，否则可能上下偏移 - 要两侧带文字（如 “或”），
<hr>不支持伪元素居中，得换<div class="divider-with-text"><span>或</span></div>
真正容易被忽略的，不是怎么画线，而是每次敲下 <hr> 之前，有没有花半秒想清楚：前面和后面的内容，真的属于不同主题吗？如果不是，那它就只是根 CSS 边框而已。
