HTML hr 标签 - 绿叶网

HTML hr 语法

在最新的 HTML5 中，hr 标签不仅代表一条水平线，更在语义上表示 “段落级别的主题转换”（Thematic Break），例如故事章节的切换或话题的变更。

hr 是一个空标签（自闭合标签），不需要有任何内容。

语法：

<hr>

说明：

在 HTML5 标准中，下面 2 种写法都是可行的。

<!--写法1-->
<hr>

<!--写法2-->
<hr />

提示:

hr 是 “Horizontal Rule（水平尺）” 的缩写。
常见的空标签（自闭合标签）有：img、input、link、meta、hr、br。

HTML hr 摘要

属于	HTML 水平线
使用频率	中
兼容性	查看
官方文档	查看
MDN	查看

HTML hr 示例

接下来，我们通过一个简单的例子来讲解一下 HTML hr 标签是如何使用的。

示例：使用 hr 标签实现水平线

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <h3>静夜思</h3>
    <p>床前明月光，疑是地上霜。</p>
    <p>举头望明月，低头思故乡。</p>
    <hr>
    <h3>春晓</h3>
    <p>春眠不觉晓，处处闻啼鸟。</p>
    <p>夜来风雨声，花落知多少。</p>
</body>
</html>

页面效果如下图所示。

HTML hr标签示例

分析：

在实际项目开发中，像上图这样的分割线，更推荐使用 CSS 的 border-top 属性或 border-bottom 属性来实现。