HTML中使用hr标签添加水平线非常简单，以下是详细教程：基本用法在HTML中，标签用于创建一条水平线。它是一个自闭合标签，不需要结束标签。这会在页面中显示一条默认样式的水平线。设置宽度可以通过width属性设置水平线的宽度，可以使用像素值或百分比。<hrwidth="50%">或者：<hrwidth="300">调整高度使用size属性可以调整水平线的高度（即线条的粗细）

本文深入解析了HTML5中`

---

`标签的正确用法与常见误区，强调它作为语义化“主题分隔符”的本质而非单纯装饰线，澄清其无需闭合的空元素特性、默认样式原理及浏览器兼容细节，并手把手指导如何通过CSS精准控制外观（如清空默认边框后再设置虚线、颜色和间距），同时提醒开发者警惕语义滥用与样式丢失陷阱——帮你写出既结构清晰又视觉可控的真正专业级水平线。

HTML 里加水平线，直接用

为什么

---

不需要闭合

HTML5 规范里

• 写成

  ---

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

  ---

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

  ---

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

---

的默认样式和兼容性

所有现代浏览器对

• 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）。

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 后没补新样式，线就没了；或者在语义不该分隔的地方硬塞

到这里，我们也就讲完了《HTML中使用hr标签添加水平线非常简单，以下是详细教程：基本用法在HTML中，标签用于创建一条水平线。它是一个自闭合标签，不需要结束标签。这会在页面中显示一条默认样式的水平线。设置宽度可以通过width属性设置水平线的宽度，可以使用像素值或百分比。或者：调整高度使用size属性可以调整水平线的高度（即线条的粗细）。设置颜色通过color属性可以更改水平线的颜色。对齐方式使用align属性可以设置水平线的对齐方式，可选值为left、center、right。样式属性（推荐）虽然hr标签支持一些》的内容了。个人认为，基础知识的学习和巩固，是为了更好的将其运用到项目中，欢迎关注golang学习网公众号，带你了解更多关于的知识点！