w3h5

html中hr标签的基础知识

定义和用法

<hr>  标签可以在 HTML 页面中创建一条水平线。

水平分隔线(horizontal rule)可以在视觉上将文档分隔成多个部分。

HTML 与 XHTML 之间的差异

在 HTML 中,<hr> 标签没有结束标签。

在 XHTML 中,<hr> 必须被正确地关闭,比如 <hr />

在 HTML 4.01 中,hr 元素的所有呈现属性均不被赞成使用。

在 XHTML 1.0 Strict DTD 中,hr 元素的所有呈现属性均不被支持。

可选的属性 注意:以下几种属性均不赞成使用,请使用样式取代它。

1、align 规定 hr 元素的对齐方式。

属性包括:

center 居中

left 居左

right 居右

例如:

<hr style="width: 100px" align="right">

2、noshade 规定 hr 元素的颜色呈现为纯色,而不是阴影的颜色。

noshade 的属性值是 布尔(boolean)

例如:

<hr noshade>

注意:HTML5 不支持 noshade 属性,在 HTML 4.01 中,<hr> 的 noshade 属性已废弃

3、size 规定 hr 元素的高度(厚度)。

属性值是 size

例如:

<hr size="30">

4、width 规定 hr 元素的宽度(pixels)

 属性值是 width 

例如:

<hr width="30px">

也可以使用 %

<hr width="30%">

几种样式:

网页设计中 hr 标签有很多样式,合理使用会给页面增色很多,下面就来详细介绍几种常用的样式!

第一种:

<hr style="border:none;border-top:2px dotted #181818;">

样式属性包括:

border 设置边框 

dotted 设置线型 dotted 是由点组成的虚线

#181818 设置线的颜色

效果如下:


第二种:

<hr style="border:none;border-top:1px dashed #0066CC;">

dashed 设置线型 dashed 是由小横线组成的虚线

效果如下:


第三种:

<hr style="border:none;border-top:1px solid #555555;">

solid 设置线型 solid 是实线

效果如下:


其实以上都是设置的 border 的线型,就不一一举例了,border 线型包括以下几种:

solid:单实线。
double:双实线。
dashed:虚线。
dotted:点线。
groove:沟线(groove)。
ridge:脊线(ridge)。
inset:内陷边框。
outset:外凸边框。
none:无边框。

第四种:

<hr style="height:2px;border:none;background: #00a6b6;">

height 设置高度

background 设置背景颜色

效果如下:


第五种:

<hr style="border:none;border-top:10px groove skyblue;">

groove 边框上颜色

skyblue 边框下颜色

效果如下:



赞 (4)
分享到: +More |

评论 沙发

换个身份