📅 最后修改于: 2023-12-03 15:31:17.524000 🧑 作者: Mango
HTML水平线是一种用于向页面添加分隔线的元素。页面上的水平线可以用于各种目的，如分隔内容，指示页面的结构等等。
HTML水平线是用<hr>标签定义的。可以将其置于文档中的任何位置，并使用CSS样式对其进行自定义。
以下是HTML水平线的基本用法示例。
<!DOCTYPE html>
<html>
<head>
<title>HTML水平线示例</title>
<style>
/* 可以使用CSS来控制水平线 */
hr {
border-top: 1px solid black;
}
</style>
</head>
<body>
<h1>这是一个标题</h1>
<p>这是一个段落</p>
<hr>
<p>这是另一个段落</p>
</body>
</html>
这将在页面上显示一个水平线，分隔两个段落。
可以使用CSS为水平线定义各种样式，包括颜色，宽度，高度和边框样式等等。
以下是一些CSS样式，您可以在页面上使用它们来自定义水平线的样式。
/* 在水平线上添加背景颜色 */
hr {
background-color: black;
height: 2px;
}
/* 另外一种自定义水平线的颜色、宽度和风格的方法 */
hr {
border-top: 5px dotted gray;
}
你还可以使用HTML实体来在水平线中添加图标和文本。
以下是一些示例HTML实体：
<!-- 在水平线中添加星号图标 -->
<hr>
<p>★★★</p>
<!-- 将文本添加到水平线上 -->
<hr>
<p>这是上面的文本</p>
<hr>
<p>这是下面的文本</p>
在上面的示例中，我们使用HTML实体& #x2605;将星号添加到水平线中，并通过在水平线上下方的两个段落中添加文本来创建视觉上的分离效果。
HTML水平线是一个简单而强大的元素，可用于分隔内容，指示页面的结构并为网页添加一些视觉元素。通过在HTML标记中使用CSS样式和HTML实体，可以对水平线进行自定义，以满足各种需要。