是 HTML5 中的空元素，无需闭合，因其无内容且浏览器忽略后续闭合标签；语义表示主题分隔，非纯装饰，CSS 控制需先清 border 再设新样式。

html 里加水平线，直接用

---

标签就行，不需要闭合，也不用写

---

（xhtml 风格在现代 html5 中不必要）。

为什么

---

不需要闭合

HTML5 规范里

---

是“空元素”（void element），和 、
一样，天生没有内容，也不能有子节点。浏览器遇到

---

就直接渲染一条分隔线，后面跟不跟 它都忽略——写了反而可能被解析为两个标签（第一个自闭合，第二个被当成无效开始标签）。

• 写成

  ---

  ：第二个 会被忽略，无害但多余
• 写成

  ---

  ：在 HTML5 文档中合法，但没必要，且容易和 XML/XHTML 习惯混淆
• 写成

  ---

  内容：内容不会显示， 被当作错误标签处理

---

的默认样式和兼容性

所有现代浏览器对

---

都有默认样式：浅灰色、带阴影的水平线，上下带 margin。但它不是“装饰性线条”，语义上表示“主题或段落的分隔”，所以搜索引擎和读屏软件会感知其结构作用。

• CSS 重置常见：很多 CSS reset 或框架（如 Normalize.css）会把 hr 的 border 设为 none，导致线消失——检查开发者工具里 border-top 是否被覆盖
• 旧版 IE（≤8）对 hr 的 margin 处理不一致，但如今基本可忽略
• 别用

  ---

  替代视觉分割线：如果只是 UI 上要一条细线（比如卡片底部），用 div + border-bottom 更可控、语义更准

怎么用 CSS 控制

---

的外观

直接给 hr 写 CSS 即可，重点改 border、margin 和 width。注意它默认是块级元素，宽度 100%，高度由 border 决定（不是 height）。

财经HTML高端海报生成

复杂得财经如何变成清晰，适合手机看的海报？如何加上你的IP

下载

hr {
  border: 0;
  border-top: 2px dashed #999;
  margin: 1rem 0;
  width: 80%;
}

• border: 0 必须先清掉默认边框，否则新样式会叠加
• 想改成虚线/双线/渐变？只改 border-top-style 和 border-top-color 就行
• height 对 hr 无效（除非设了 border 且用 border-image 等高级技巧）
• Flex 或 Grid 容器里，hr 可能被拉伸或压缩，加 align-self: center 或 width: fit-content 更稳

真正容易被忽略的是语义和样式耦合：删掉默认 border 后没补新样式，线就没了；或者在语义不该分隔的地方硬塞

---

，结果结构混乱。用之前先问一句：这里真的需要一个“主题切换”的信号，还是只是画条线？

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