HTML 中 <hr> 标签

2025 年 3 月 25 日 | 阅读 6 分钟

引言

本文介绍了 HTML hr 标签的语法及其在 HTML 文本中插入主题性换行的样式。在创建网页时，您应该包含一条水平线来表示不同部分之间主题的转变。您必须使用 HTML hr 标签在 HTML 中创建一条水平线。HR 是一个块级元素，它会将之后的所有元素移到另一行。本文将演示如何使用 HTML 水平线在页面中插入一条线。

HTML 中 <hr> 标签是什么？

HTML 中的块级元素 hr 标签会将它后面的所有项目移到新的一行。标签表示的水平线的显示方式取决于浏览器。它通常显示为带有边框，给人一种三维的印象。

HTML5 <hr> 标签定义了 HTML 页面中段落级元素之间的主题过渡。在早期的 HTML 版本中，它通过在页面上绘制一条水平线来在视觉上分隔页面内容。在 HTML5 中，它具有语义标签的含义。

作为 HTML 中的块级元素，<hr> 标签会占据页面的全部宽度并开始新的一行。块级元素前后都有换行符。HTML 中不需要为 <hr> 元素添加关闭标签。然而，XHTML 中的 (<hr>) 标签必须关闭 (<hr/>)。

HTML <hr> 标签语法

<hr> 标签为什么重要？

在网页中插入水平线或 HR 组件是一个好主意，因为它增强了页面布局的整体外观。在 HTML5 之前的 HTML 版本中，hr 元素是作为一种演示工具。HTML5 中的这个标签为页面布局提供了语义含义。我们可以使用 CSS 添加不同的布局效果并进行自定义。

何时使用 HTML <hr> 标签？

如果我们需要

进行主题切换。
分隔页面上的不同主题。

示例

<html>
<body>
    <h1>An example of the hr tag in HTML</h1>
    <p>Welcome to the page.</p>
    <hr>
    <p>Below are the contents.</p>
</body>
</html>

输出

<hr> 标签的属性

hr 标签支持多种参数，可以对水平线进行精美的定制，以增强用户体验。它支持 WIDTH、ALIGN、COLOUR、NOSHADE 和 SIZE 等属性。让我们通过 hr 标签探讨如何使用它们来设置 HTML 页面的样式。

1. WIDTH 属性

可以使用 WIDTH 属性更改水平线的宽度。WIDTH 属性可以用像素和百分比来定义。这些百分比是与它们的父组件进行比较的。

例如，如果父组件的宽度是 300 像素，那么 50% 将变成 150 像素。下面是一个使用 WIDTH 属性的 HTML HR 元素的示例：

示例

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the page</title>
  </head>
  <body>
    <p>A horizontal line without using the width attribute:</p>
    <hr>
    <p>A horizontal line using a width attribute of 40%:</p>
    <hr width="40%">
  </body>
</html>

输出

使用 <hr> 标签可以创建不同长度的水平线以满足我们的需求。然而，水平线会自动填充页面的整个宽度。

2. COLOR 属性

可以使用 COLOUR 属性更改 HTML 中水平线的颜色。我们有三种描述颜色的方式：颜色名称、十六进制代码或 RGB 值。然而，水平线默认是黑色的。为了更好地理解它，让我们看一个例子：

示例

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the page</title>
  </head>
  <body>
    <p>A horizontal line with red color</p>
    <hr color="red" />
    <p>A horizontal line with blue color</p>
    <hr color="blue"/>
  </body>
</html>

输出

因此，使用 <hr> 标签可以生成各种颜色的水平线，以满足我们的设计需求。

3. SIZE 属性

SIZE 属性可以更改 HTML 中水平线的高度或厚度。它只能以像素为单位定义。让我们用一个例子来解释：

示例

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the page</title>
  </head>
  <body>
    <p>A horizontal line with red color</p>
    <hr size="10px" color="red" />
    <p>A horizontal line with blue color</p>
    <hr size="40px" color="blue"/>
  </body>
</html>

输出

4. ALIGN 属性

可以使用 ALIGN 属性将 HTML 页面的水平线对齐到左侧、右侧或居中。然而，如果线条宽度为 100%，则 ALIGN 属性不会影响水平线。让我们通过一个例子来看看：

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the page</title>
  </head>
  <body>
    <p>A horizontal line with red color</p>
    <hr align="left" width="70%" color="red">
   <p>A horizontal line with blue color</p>
   <hr align="right" width="70%" color="blue">
    <p>A horizontal line with orange color</p>
   <hr align="left" width="70%" color="orange"> 
</body>
</html>

输出

为了根据我们的需求将水平线对齐到左侧、右侧或居中，我们使用 <hr> 标签。

6. NOSHADE 属性

NOSHADE 属性可以消除 HTML 页面中水平线下方出现的阴影。它是一个布尔属性，因此，如果使用 HR 标签编写它，HTML 页面上将显示一条实线；否则，将显示一条阴影线。让我们通过一个例子来更好地理解它：

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the page</title>
  </head>
  <body>
    <p>A horizontal line with noshade </p>
    <hr noshade>
   <p>A horizontal line without noshade</p>
   <hr>
    <p>A horizontal line with orange color</p>
   <hr align="left" width="70%" color="orange"> 
</body>
</html>

输出

浏览器支持

以下浏览器能够使用 hr 标签：

Chrome
火狐
Opera
Safari
Microsoft Edge

水平线的样式指南

水平规则常用于将内容分成几个部分。<hr> 元素用于表示水平规则。<hr> 元素最初是使用属性进行样式设计的。如今，HTML5 中的 <hr> 元素会告知浏览器段落级主题的断点。请看下面 <hr> 元素的 CSS 样式：

更改水平规则的大小和位置

应调整水平规则的大小和位置。使用 CSS 规则而不是属性来设计 <hr> 元素，使用属性来设计 <hr> 元素，使用 CSS 规则。将 width 属性设置为修改水平线的宽度，然后使用 margin 属性将其居中。

例如，更改水平规则的位置和宽度：

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the page</title>
    <style>
      hr {
        width: 100%;
        margin-left: auto;
        margin-right: auto;
      }
    </style>
  </head>
  <body>
    <h1>Horizontal line</h1>
    <hr />
  </body>
</html>

输出

如果要更改水平线的高度或厚度，请将 height 属性添加到您的 <hr> 样式中。在这种情况下，也可以设置粗水平线的背景颜色属性。

以下是更改水平规则的背景颜色和高度的示例：

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the page</title>
    <style>
      hr {
        width: 100%;
        height: 50px;
        margin-left: auto;
        margin-right: auto;
        background-color: pink;
      }
    </style>
  </head>
  <body>
    <h1>Horizontal Line with Background Colour and Height</h1>
    <hr />
  </body>
</html>

输出

CSS 的 border 属性

CSS 中的 border 属性是一个快捷方式，用于确定元素四边的 border-width、border-style 和 border-color。不允许使用负值。

当我们要使所有四个边都相同时，您可以使用 border 简写属性。border-width、border-style 和 border-color 属性可以为每个边指定不同的值，用于修改边框。

通过指定颜色并更改 border-top 属性，我们可以更改水平线的颜色。通过以下示例查看其示例。

示例：使用 border-top 属性添加水平线

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the page</title>
    <style>
      hr {
        border-top: 7px solid pink;
      }
    </style>
  </head>
  <body>
    <h1>Horizontal Line with Background Color and Height</h1>
    <hr />
  </body>
</html>

输出

结论

<hr> 标签用于在页面中的项目之间添加一条水平线。
<hr> 标签在页面中的项目之间创建主题性中断。
它是一个自闭标签。
在 HTML 中，它与 Width、Size、Variety、NOSHADE 和 Align 等多个属性一起使用。
Width 属性可以以像素和百分比来确定。
Size 属性只能以像素为单位确定。
我们可以使用 Align 属性将水平线对齐到左侧、右侧或居中。
如果水平线的宽度为 100%，则 Align 属性不会影响该线条。

下一主题HTML html 标签

HTML 中 <hr> 标签

引言