1. 什么是<hr>标签？
<hr>标签是HTML中的水平线标签，通常被用作文本或其他内容之间的分隔符。这个标签不需要结束标记。
<hr/>
2. 如何设置<hr>的颜色？
2.1 使用HTML内联样式
可以在<hr>标签中使用HTML内联样式来设置其颜色，如下所示：
<hr style="color: red;" />
这样将会使水平线变为红色。
2.2 使用内部样式表
可以使用内部样式表来为所有<hr>元素设置样式， like this:
<style>
hr {
color: blue;
}
</style>
2.3 使用外部样式表
可以使用外部样式表来设置所有<hr>元素的样式：
下面是一个外部样式表的示例：
/* 定义样式表 */
hr {
color: green;
}
然后在HTML文件中引用这个样式表：
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
...
<hr>
...
2.4 实例：使用渐变颜色设置<hr>的颜色
我们可以使用CSS渐变颜色来设置水平线的颜色。下面的例子中，水平线从左边到右边渐变为红色和蓝色：
hr {
background-image: linear-gradient(to right, red, blue);
}
下面是渐变的预览：
2.5 实例：使用伪元素实现下划线效果
我们可以使用伪元素来实现<hr>标签的下划线效果。
下面的代码演示了如何使用伪元素来创建下划线：
hr {
border: none;
height: 1px; /* 将高度设置为1像素 */
position: relative;
margin: 20px 0;
}
hr::before {
content: ""; /* 必须要有内容 */
border-bottom: 1px solid black; /* 下划线式样 */
width: 100%; /* 此处指定宽度：与水平线的宽度相同 */
position: absolute; /* 将伪元素定位到父元素位置 */
top: 0; /* 将伪元素的top属性设置为0，即位于水平线顶部 */
left: 0; /* 将伪元素的left属性设置为0，即位于水平线左侧 */
}
下面是下划线的预览：
小结：在HTML中，使用<hr>标签设置分隔线是一个简单而常见的方法。使用CSS样式表，您可以轻松地为水平线添加颜色、宽度、高度等样式，或者使用伪元素添加下划线效果。