HTML 水平线——hr 标签示例

你可以使用 HTML <hr> 标签来分隔一个页面上的不同主题。

当我们想在 HTML 页面上创建主题中断或单独的项目时，我们经常使用这个标签。

在本文中，你将了解如何在 HTML 中使用这个标记。

基本语法

<hr> 标签是一个空元素。这意味着它只有一个开始标签 <hr>。

从 HTML5 开始，我们现在需要在空元素的标签上附加一个斜杠。因此，你应该将其写为 <hr />。

在浏览器中，<hr /> 标签显示为水平线，如下所示：

<hr /> 标签接受 width、color、size 和 align 等属性。

在向你展示各个属性之前，我将使用以下 CSS 代码将正文中的所有内容设置为居中：

body {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 100vh;
    }

width 属性用于指定 <hr /> 标签的宽度。它采用像素或百分比作为值。

<hr width="50%" />

color 属性用于指定 <hr /> 标签的颜色。

    <hr width="50%" color="green" />

如果我们将 <hr /> 标签设置为绿色，显示如下：

你可以使用 size 属性为 <hr /> 标签定义高度。该值必须以像素为单位。

<hr width="50%" color="green" size="50px" />

50px 高度如图所示：

align 属性用于设置 <hr /> 标签的对齐方式。它需要 left、center 和 right 的值。

默认值为 left——这意味着如果未设置对齐方式，<hr /> 标签会自动向左对齐。

    <hr width="50%" color="green" size="50px" align="right" />

设置 <hr /> 标签的对齐方式为 right，如图所示：

本文向你展示了 <hr /> 标签的用途以及它接受的属性。

由于 <hr /> 标签在浏览器中显示为水平线，你可能正在考虑使用它来画一条线。

但是你不应该这样做，因为水平规则只是在外观上，而不是在语义上。相反，你应该根据情况用 div 或 span 画一条线。

如果你觉得这篇文章有帮助，请与你的朋友和家人分享。