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 边框下颜色

效果如下：

未经允许不得转载：前端资源网 - w3h5 » html中hr标签的基础知识