在 HTML 中添加水平线

htmlweb developmentfront end technology更新于 2024/7/25 7:40:17

HTML 中的 <hr> 标签是一条水平线，用于定义 HTML 页面中的主题分隔符。它通常用于显示水平线来分隔内容或更改 HTML 页面中内容的显示方式。它仅由 HTML 中的开始标签组成。

语法

HTML 中 <hr> 标签的用法如下所示 −

<hr>………

HTML <hr> 标签支持以下附加属性 −

属性	值	描述
align	left center right	指定水平对齐方式规则。
noshade	Noshade	移除大多数浏览器显示的常见阴影效果。
size	像素或百分比	指定水平规则的高度。
width	像素或百分比	指定水平规则的宽度。

示例

以下示例演示 HTML 中 <hr> 标签的用法−


<!DOCTYPE html>
<html>
<head>
   <title>HTML hr Tag</title>
</head>
<body>
   <p>This text will be followed by a horizontal line</p>
   <hr>
   <p>Another horizontal line</p>
   <hr>
</body>
</html>

示例

现在，让我们通过为 <hr> 标签的属性分配值来查看示例 -


<!DOCTYPE html>
<html>
<head>
   <title>HTML hr Tag</title>
</head>
<body>
   <p>This text will be followed by a horizontal line</p>
   <hr style="width:30%;text-align:left;margin-left:0">
   <p>Continue another sentence here....</p>
</body>
</html>

示例

以下是 CSS 的 非阴影 <hr> 元素的示例 -


<!DOCTYPE html>
<html>
<body>
   <p>Demonstrating noshaded horizontal line:</p>
   <hr>
   <p>Applying styling sheet</p>
   <hr style="height:2px;border-width:0;color:grey;background-color:red">
</body>
</html>

示例

以下是示例，使用 CSS 演示 <hr> 元素的高度 −


<!DOCTYPE html>
<html>
<body>
   <p>Height of horizontal line:</p>
   <hr>
   <p>A horizontal line with a height of 50 pixels:</p>
   <hr style="height:50px">
</body>
</html>

示例

在下面的例子中，我们使用 CSS 属性更改 <hr> 元素的宽度 −


<!DOCTYPE html>
<html>
<body>
   <p>Normal horizontal line:</p>
   <hr>
   <p>A horizontal line with a width of 30 %:</p>
   <hr style="width:30%">
</body>
</html>