hr是语义分隔符，表示主题或逻辑单元切换；必须独立使用、禁止嵌套在p中；样式重置应清border后用border-top或background-color；纯视觉分隔须用CSS而非hr。

hr 是语义分隔符，不是画线工具

它代表前后内容发生了主题、场景或逻辑单元的切换——比如正文结束→作者注释、安装步骤→配置说明、白天叙事→深夜闪回。浏览器默认渲染成横线，但那只是表现形式；它的本质是告诉解析器“这里语义断开了”。

常见误用包括：只因设计稿有线就加 hr；用在 <p> 里面导致自动闭合前段；加 width 或 color 等已废弃属性。

hr 必须独立使用，不能嵌套在 p 或 div 里

hr 是块级流元素，必须直接位于块容器中（如 <main>、<article>、<section>），不能作为 <p> 的子元素。否则 HTML 解析器会自动提前闭合 <p>，造成结构错乱。

• ✅ 正确：<p>第一段</p><hr><p>第二段</p>
• ❌ 错误：<p>第一段<hr>第二段</p>（第二段实际被挤到段落外）
• ⚠️ 注意：Flex 或 Grid 容器中若未设 align-items: flex-start，hr 可能被压缩成不可见细线

样式重置必须先清 border，再选渲染路径

hr 是替换元素，浏览器默认靠 border-bottom 渲染那条线。直接改 color、height 基本无效。真正生效的只有两条路：

Wechat Article Html

将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。

下载

立即学习“前端免费学习笔记（深入）”；

• 用 border-top：兼容性好、控制精确、无盒模型陷阱，推荐优先使用
• 用 background-color + height：需同时设 border: none，否则旧样式残留
• 禁用 aria-hidden="true"——它本就不是装饰元素，隐藏会破坏语义流

纯视觉分隔一律用 CSS，不用 hr

卡片之间、菜单项之间、表单字段之间这类纯视觉间隔，应该用 border-top、伪元素 ::after 或 margin 实现，而不是塞一个 hr。

因为 hr 会被屏幕阅读器读作“分隔线”，但用户完全不知所云——前面是商品列表，后面还是商品列表，哪来的主题切换？这种用法既误导辅助技术，也污染 DOM 结构。

语义错位比样式难看更严重：它让机器无法理解页面意图，而这是现代前端绕不开的底线。