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

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

2026-03-25 18:39:45 0浏览收藏

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

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

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学习网公众号，带你了解更多关于的知识点！