一、hr标签是什么？
hr标签全称为Horizontal Rule（水平分割线）标签，用于在HTML文档中绘制一条水平线。
该标签仅需一个单一标签，没有结束标签，会自动在水平空间上添加一条水平线。
<hr>
上述代码生成的水平线默认情况下为浅灰色，并且会根据浏览器的不同而略微有所不同。但是，我们可以在hr标签中使用style属性来设置它的颜色、宽度、尺寸等属性。接下来我们就来逐一介绍。
二、hr标签的style属性
1、设置颜色
可以使用style属性来设置水平线的颜色，填入颜色的名称 或 十六进制颜色值即可。
比如，让水平线变成红色的代码如下：
<hr style="color:red;">
2、设置宽度和高度
使用style属性还可以设置水平线的宽度和高度，属性值支持 像素(px)、百分比(%)等单位
例如，我们想让水平线宽度为80%，高度为10像素，则代码如下所示：
<hr style="width:80%;height:10px;border:none;background-color:gray;">
3、通过hr标签实现分割线的效果
通过hr标签的style属性，我们还可以实现具有分割线的效果。例如，在页面某个模块之间插入一条分割线：
<div style="border-top:1px solid gray;margin:10px 0;"></div>
上面的代码就可以实现在两个模块之间加入一条细小的分割线，而且还支持调节线条的颜色和宽度。
三、hr标签的优缺点
hr标签的优点是非常容易使用，不需要任何CSS知识，只需要一个简单的标签，就可以在页面上创建一条水平线。
然而，它的缺点也同样明显：它的样式比较单调，无法创建较为复杂的线条形状，例如弯曲、斜线等，此时就需要使用CSS来实现。
四、总结
hr标签是HTML标签中的一种，用于在HTML文档中添加一条水平线。可以通过style属性设置水平线的样式，包括颜色、宽度、高度等属性。虽然它的样式相对简单，但是使用起来非常便捷。
原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/253381.html
微信扫一扫 
支付宝扫一扫 