HTML - hr 标签

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

<hr> 元素采用用于为水平线着色的属性颜色。此标签支持 HTML 中的全局属性和事件属性。

语法


<hr>

属性

<hr> 标签支持 HTML 的全局属性和事件属性。还有一些特定的属性，这些属性在下面列出：

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

<hr> 标签示例

在下面的示例中，我们将使用 html <hr> 标签上的所有附加属性。我们将知道每个属性对<hr> 标签的影响。我们将使用 CSS 来设置我们的 <hr> 标签的样式。

定义 <hr> 标签元素

让我们考虑以下示例，其中我们正在创建一个 HTML 文档，该文档显示 <hr> 标签的行为。


<!DOCTYPE html>
<html>
<body>
	 <h2> 
			qikepu
	 </h2>
	 <hr />
	 <p> 
			Simply Easy Learning with qikepu.com
	 </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> 标签上应用css样式

在下面的示例中，我们将创建一个 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>qikepu.com</h2>
		<p>Simply Easy Learning </p>
		<hr>
		<h3>HTML hr Tag</h3>
		<p>It's creates a horizontal line.</p>
</body>

</html>

支持的浏览器

浏览器
<hr>	Yes	Yes	Yes	Yes	Yes

打印本页