您的位置:

HTML标签之hr标签


一、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属性设置水平线的样式,包括颜色、宽度、高度等属性。虽然它的样式相对简单,但是使用起来非常便捷。