首页 » 编程语言 » html » 正文

html元素hr标签的用法及作用

“hr”是“Horizontal Rule”的英文缩写,有“水平线”的意思,而html元素中的hr标签,是添加一条水平线,表示转移话题。它的用法及作用详述如下:

<hr/>标签定义

<hr/>标签是单标签(空标签),没有元素内容,只是显示为一条水平横向的分隔线,表示话题的转移;

<hr/>标签属于块元素,它的前后都会默认自动换行,使得该标签创建的水平线独占一行显示,在浏览器中显示为一条分隔上下两部内容的水平线;

<hr/>标签和<br/>标签一样,只有开始标签,而没有结束标签,不能使用</hr>;

<hr>标签的align、noshade、size、width属性在html5版本中已经不支持,需要修改水平线样式,请使用css(层叠样式表)。

<hr/>标签语法格式

<hr>标签语法格式:<hr>或<hr/>

刘代码博客<hr/>刘代码博客

以上代码在页面中显示出一条分隔上下两个“刘代码博客”文本内容的水平分割线,如下图所示:

2019-11-26_220647.png

HTML与XHTML之间的区别

在 HTML 中,<hr> 标签没有结束标签,可以写成<hr>或<hr/>

在 XHTML 中,<hr> 必须被正确地关闭,必须写成 <hr/>,hr和斜杠之间可以有一个空格<hr  />。

在 HTML 4.01 中,<hr>标签仅仅显示为一条水平线。在html5版本中升级了该标签,使其具有语义,除了显示一条水平线外,还有话题的转移的语义;

<hr> 标签属性设置

hr标签在默认情况下,是一条灰色的水平分割线(如下图所示)

2019-11-28_162448.png

通过hr标签的属性,可以设置水平线的颜色、高宽、粗细等效果

Markup
<hr align="left" width="600px" size="15" color="#FF0000" />

在浏览器中显示的效果如下:

2019-11-27_234258.png

align:设置水平线对齐方式,left(居左)、left(居中)、right(居右);

widht:设置宽度,即水平线的水平长度,单位可以是px(像素)或%(百分比);

size:设置水平线的粗细;

color:设置水平线的颜色;

noshade:设置颜色呈现的方式为纯色,该属性可以除去水平线的阴影部分;

注意:hr标签的属性在html4.01中已经被废弃,html5也不再支持,但为了兼容性,hr标签属性在html4.01和html5中使用仍然有效,但终究还是会被淘汰的,所以,建议尽量使用CSS样式来控制hr标签的效果;

<hr> 标签CSS样式设置

由于hr标签的属性将逐渐被html废弃,不过,现在依然可以使用hr标签属性来设置,最好还是使用CSS样式来设置hr标签样式效果,这样可以控制和设置更多不同的样式效果。

请注意,如果是使用CSS层叠样式的话,hr标签默认显示的水平分割线是为2px的边框线而已,默认颜色为灰色(如下图所示);

2019-11-28_162448.png

上图中显示的水平分割线就是hr标签在默认情况下的样子,但在CSS样式中,我们就应该把理解成:仅仅是带有2px的灰色边框线,且高度为0px的水平分割线,还有就是宽度默认是100%

为了让你看得更清楚,我们在CSS层叠样式中,设置水平线高度height为10px,也就是水平线的粗细为10px,演示代码如下:

Markup
<hr style="width:400px;height:10px;" />

以上代码在浏览器中显示效果如下:

2019-12-01_213022.png

从上图中,我可以看见,hr标签在CSS样式中,默认添加的是一个带有边框,看起来像是凹进去的水平线;而凹进去的那部分,其实就是由高度height控制的,由于我们还没有给凹进去的水平线设置颜色,所以,默认是白色的;

接下来,我们给水平线的颜色设置成红色,让边框线的效果变得更加明显些,代码如下:

Markup
<hr style="background-color:red;width:400px;height:10px;border:3px solid black;" />

以上代码在浏览器中显示效果如下:

2019-12-01_154730.png

width:设置水平线宽度,也就是上图中红色部分

height:设置水平线高度,即水平线粗细,在css样式中,是使用height设置粗细,而不是使用size属性;

background-color:设置水平线的颜色,但必须设置高度height为非0的整数值,background-color才会有效;

border:设置水平线的四条边框线效果;而border:3px solid black是设置边框线为3像素的黑色实线,如果不需要边框线,就设置border:none;

<hr>标签的用法

有关<hr>标签属性的用法很简单,前面已有介绍,而且hr标签的所有属性已经开始逐渐被废弃,尽管目前所有属性仍然有效,故不再赘叙,但为了往后更长久的兼容性,尽量使用CSS层叠样式来设置hr标签水平线的效果,毕竟,通过CSS样式设置还能得到更多的显示效果!

1、设置水平线颜色

hr标签在css样式中要使用background-color设置水平线的颜色,但要想设置颜色成功,就必须还要设置水平线高度height为非零的数值,别忘了,还要设置border的值为none,这样可以去掉边框线,从显示效果上来看就好像是去掉了阴影部分,演示代码如下:

Markup
<hr style="background-color:red;height:1px;border:none;" />

以上代码在浏览器中显示的是一条红色水平分割线,效果如下:

2019-11-28_003509.png

background-color:red是设置hr标签水平线的颜色为红色;

height:1px是设置hr标签水平线的高度,也就是水平线的粗细;

border:none是去掉hr标签的默认边框,也就是设置成无边框;

2、设置水平线粗细

在css样式中,设置hr标签粗细是使用height来控制的,比如 ,设置一条红色的水平线,让其高度为20px,也就是粗细为20px,代码如下:

Markup
<hr style="background-color:red;height:20px;border:none;" />

以上代码在浏览器中显示效果如下:

2019-11-28_171832.png

<hr/> 标签属性

在 HTML 4.01 中,所有属性都已废弃。在HTML5 中不再支持这些属性。设置hr标签显示效果请使用 CSS样式来控制。

属性描述
alignleft
center
right

HTML5 不支持。HTML 4.01 已废弃。    

规定 <hr> 元素的对齐方式

noshadenoshade

HTML5 不支持。HTML 4.01 已废弃。    

规定 <hr> 元素的颜色呈现为纯色。

sizepx(像素)

HTML5 不支持。HTML 4.01 已废弃。    

规定 <hr> 元素的高度。

widthpx(像素)或%

HTML5 不支持。HTML 4.01 已废弃。    

规定 <hr> 元素的宽度。





欢迎您发表评论或留言