标签是语义化主题分隔符，仅用于内容主题切换（如章节更替、视角转换），不可作视觉装饰；滥用会破坏可访问性与结构逻辑，样式须用CSS控制，禁止嵌套在内。

hr 标签不是画线工具，而是表示内容主题切换的语义分隔符。用错地方，屏幕阅读器会误报“分隔”，布局逻辑也会变混乱。

什么时候该用 hr？看内容是否真有主题断点

它只在两个区块之间存在明确语义断裂时才适用，比如话题转向、视角切换、章节更替。不是“两段文字之间需要空隙”就该加。

• ✅ 合理：

  上一节讲安装步骤

  ---

  本节讲配置参数

  —— 安装和配置是不同主题
• ❌ 错误：提交

  ---

  取消 —— 按钮组无主题变化，纯视觉分隔
• ⚠️ 模糊：表单中“用户信息”和“收货地址”两个
  之间 —— 若二者逻辑独立，hr 可接受；若只是视觉分组，用 margin-bottom 更准

hr 的样式必须用 CSS 控制，HTML 属性已废弃

别写

---

，这些属性在 HTML5 中无效，现代浏览器直接忽略。所有外观控制必须走 CSS。

• 改颜色：用 border-color 或 background-color（先清掉默认 border）
• 调粗细：设 height + border: none + background-color，比依赖 border-width 更可控
• 响应式适配高 DPR 屏幕：1px 边框在 iPhone 上易发虚，建议用 height: 2px; transform: scaleY(0.5)
• 注意 box-sizing 差异：Chrome 默认 border-box，Firefox 是 content-box，统一写 box-sizing: border-box 避免高度不一致

为什么不能把 hr 塞进

使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审

使用经过文档化的设计技能，从真实的品牌或项目背景中生成HTML原生原型、幻灯片、动态演示、可视化图表和评审流程。

下载

里？

这是常见手误：

文字

---

文字

是对的，但

文字

---

文字

会破坏 HTML 结构合法性 —— hr 是块级、段落级语义元素，不允许嵌套在 p 中。

• 浏览器会自动闭合前面的 p，导致 DOM 结构意外展开
• 可访问性 API 可能无法正确识别分隔意图
• 某些 SSR 框架或静态生成器会报解析警告
• 修复方式很简单：确保 hr 独立成行，前后都是块级容器（如 div、section、p）

真正难的不是写出一条线，而是判断这条线背后有没有值得表达的主题断裂。一旦把它当装饰用，后续可访问性、SEO、维护成本全都会悄悄变重。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！