3.2.2 水平线属性?_HTML5/CSS3/JavaScript技术大全-QQ阅读男生历史网

书名：HTML5/CSS3/JavaScript技术大全
作者名：曹衍龙汪杰
本章字数：469字
更新时间：2021-04-01 18:49:11

3.2.2 水平线属性❹

水平线还提供了若干属性用来进行设置。不过这些属性都被HTML5放弃，但是HTML4仍然支持，但不推荐使用。具体属性如表3-2所示。

表3-2 <hr/>标签的属性

下面介绍这些属性的语法。

语法格式：

<hr noshade /> 
<hr align="left|center|right" /> 
<hr width="length" /> 或 <hr width=" %" /> 
<hr size="length" /> 
<hr color="color" />

语法说明：

align属性用于设置水平线的对齐方式。其设置只有当设置的宽度没有超出浏览器宽度的时候才有效，否则不能显示效果。对齐方式可以被设置为左对齐（left）、居中显示（center）以及右对齐（right）。

noshade是一个布尔值的属性，它没有属性值，如果在<hr>标签中使用了这个属性，则浏览器不会显示有阴影的水平线。浏览器默认会显示带有阴影的水平线。

size属性表示水平线的高度，如size="5px"表示高度为5像素。

width属性用于设置水平线的宽度。水平线的宽度默认为100%。设置宽度的时候可以设置绝对宽度，如300px；或者可以采用百分比设置，如20%。

color属性表示水平线的颜色，如color="blue"表示将颜色设置为蓝色。

提示：颜色的设置方法，可以参考CSS部分的介绍）。

应用举例（hr_more.html）：

<html> 
<head> 
<meta http-equiv="Content-Type" content= "text/html; charset=gb2312" /> 
<title>水平线属性</title> 
</head> 
<body> 
<p align="center">《相思》</p> 
<hr width="50%" size="3"> 
<p align="center">红豆生南国，春来发几枝。</p> 
<p align="center">愿君多采撷，此物最相思。</p> 
<hr width="50%" noshade size="3"><br /> 
<hr width="180" align="right" size="3"> 
<br /> 
<hr width="180" align="left" color="red" size="3"><br /> 
</body> 
</html>

代码说明：

以上代码中，加粗的部分使用各种属性设置水平线的显示效果。

在 Chrome 浏览器中显示效果如图3-9所示。

图3-9 水平线属性