HTML - <hr> 标签

HTML 的 <hr> 标签用于在网页上创建一条水平线。这个 hr 元素表示段落级元素之间的主题断开，例如故事中的场景变化或某个章节内的主题转换。

<hr> 元素接受一个 color 属性，用于设置水平线的颜色。此标签同时支持 HTML 中的全局属性和事件属性。

语法

<hr>

属性

HTML hr 标签支持 HTML 的全局和事件属性。也接受一些特定的属性，如下所示。

属性	值	描述
align	left center right	此属性用于对齐 hr 元素。
size	数值	此属性用于设置 hr 元素的高度。
width	数值	此属性用于设置 hr 元素的宽度。
color	颜色代码或名称	此属性用于设置 hr 元素的颜色。
noshade	无值	此属性用于指定实线水平线而不是阴影线。

HTML hr 标签示例

在下面的示例中，我们将对 html hr 元素使用所有附加属性。我们将了解每个属性对 hr 元素的影响，并将使用 CSS 来设置 hr 元素的样式。

定义 hr 元素

让我们考虑以下示例，我们创建了一个 HTML 文档，展示了 <hr> 标签的行为。

<!DOCTYPE html>
<html>
<body>
   <h2> 
      Tutorialspoint 
   </h2>
   <hr />
   <p> 
      Simply Easy Learning with Tutorialspoint
   </p>
</body>
</html>

在 hr 元素上应用属性

考虑以下示例，我们创建了一个 HTML 文档，并使用了 <hr> 标签及其属性。

<!DOCTYPE html>
<html>
<body>
   <p>
      This is a normal hr Element
   </p>
   <hr>
   <p>
      This is a noshade hr Element
   </p>
   <hr noshade>
   <p>
      This is size set to 10 & green hr Element
   </p>
   <hr size="10" color="green">
   <p>
      This is width set to 100 & right aligned hr Element
   </p>
   <hr width="100" align="right">
</body>

在 hr 元素上应用样式

在以下示例中，我们创建了一个 HTML 文档，并使用 CSS 属性修改了 <hr> 标签，如下所示：

<!DOCTYPE html>
<html>

<head>
    <style>
        hr {
            border: none;
            border-top: 3px solid #333;
            overflow: visible;
            text-align: center;
            height: 5px;
        }

        hr:after {
            background: #fff;
            content: 'HTML';
            padding: 4px;
            position: relative;
            top: -13px;
        }
    </style>
</head>

<body>
    <h2>TutorialsPoint</h2>
    <p>Simply Easy Learning </p>
    <hr>
    <h3>HTML hr Tag</h3>
    <p>It's creates a horizontal line.</p>
</body>

</html>

支持的浏览器

标签
hr	是	是	是	是	是

html_tags_reference.htm

打印页面