HTML 水平线（分割线）

在 HTML 中，我们可以使用 hr 标签来实现一条水平线（或分割线）。hr 是一个空标签，不需要有任何内容。

语法：

<hr />

说明：

hr，是 “Horizontal Rule（水平线）” 的缩写。在 HTML5 标准中，下面 2 种写法都是可行的。

<!--写法1（推荐）-->
<hr>

<!--写法2-->
<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 仅仅是一条线吗？

在 HTML5 标准中，hr 的全称虽然还是 “Horizontal Rule（水平线）”，但它的语义变成了 “Thematic Break（主题转换）”。

什么时候用 hr？当内容发生话题变更时（例如：故事场景切换、从正文切换到参考资料）。
什么时候不用？ 如果你只是单纯觉得 “这里加条线好看”，此时不应该使用 hr，而应该使用 CSS 的边框样式（border-bottom）。