在 HTML 中添加水平线

HTML 中的<hr>标签是水平线，用于定义 HTML 页面中的主题分隔符。它通常用于显示水平线以分隔内容或更改 HTML 页面中内容的显示方式。它在 HTML 中只包含开始标签。

语法

下面显示了在 HTML 中使用<hr>标签的方法：

<hr>………

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

属性

值

描述

align

left center right

指定水平线的对齐方式。

noshade

Noshade

移除大多数浏览器显示的常用阴影效果。

size

像素或 %

指定水平线的高度。

width

像素或 %

指定水平线的宽度。

示例

以下示例演示了在 HTML 中使用<hr>标签：

Open Compiler
<!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>标签的属性赋值来看一个例子：

Open Compiler
<!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>元素的示例：

Open Compiler
<!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>元素的高度：

Open Compiler
<!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>元素的宽度：

Open Compiler
<!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>

更新于：2023年10月10日

572 次浏览

启动你的职业生涯

完成课程获得认证

开始学习
广告