html hr标签的属性有哪些？HTML hr标签的样式详解

html hr标签的属性有哪些？HTML hr标签的样式详解，本篇文章介绍了html中的hr标签的定义及其属性描述，还有关于html hr标签的样式使用的几种方法

html中hr标签定义和用法：

---

标签在 HTML 页面中创建一条水平线。

水平分隔线（horizontal rule）可以在视觉上将文档分隔成各个部分。

HTML

---

标签实例：

被水平线分隔的标题和段落：

<h1>This is header 1</h1>
<hr />
<p>This is some text</p>

html中hr标签可选的属性：

html中hr标签在网页中的用法：

<hr align="center">
<hr align="left">
<hr align="right">
<hr noshade="true">
<hr noshade="false">
<hr size="5">
<hr width="500px">
<hr align="left" noshade="false" size="4" width="500px" color="#ff0000">

html中hr标签的各种样式使用：

网页设计当中hr的各种样式，如果使用得当，将会给你的页面增色很多，下面就来详细介绍下各种样式和各种使用方式的方法！

我用的编辑器是eclipse，这个根据个人喜好来定，用什么都无所谓的，就算你直接用txt也照样能实现这里的效果，毕竟只是静态。

第一种：

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

height:2px;是hr的高度

border:none;是没有边框

border-top:2px dotted #185598;是设置横线的样式

dotted 虚线 #185598 颜色

第二种：

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

第三种：

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

第四种：

<hr style="height:3px;border:none;border-top:3px double red;" />

html中hr的各种样式使用

第五种：

<hr style="height:5px;border:none;border-top:5px ridge green;" />

第六种：

<hr style="height:10px;border:none;border-top:10px groove skyblue;" />
border-top:10px groove skyblue;    groove  上颜色        skyblue   下颜色

渐变颜色的分隔线：

<hr style="filter:alpha(opacity=5,finishopacity=100,style=1);height:10px" color=green>
<hr style="filter:alpha(opacity=100,finishopacity=5,style=1);height:10px" color=blue>

中心透明的分隔线：

<hr style="filter:alpha(opacity=0,finishopacity=100,style=2);height:12px" color=orange>
<hr style="filter:alpha(opacity=0,finishopacity=100,style=3);height:12px" color=#FF00FF>

中心不透明的分隔线：

<hr style="filter:alpha(opacity=100,finishopacity=0,style=2);height:15px" color=yellow>
<hr style="filter:alpha(opacity=100,finishopacity=0,style=3);height:15px" color=#00FFFF>

波浪线：

<hr style="filter:wave(strength=9,freq=2,lightstrength=20,phase=9);height:15px" color=pink width=95%>

三色线：

<hr style="border-top: #ff0000 solid; color: #00ff00; border-bottom: #0000ff solid; height: 9px">

虚线：

<hr style="border-top: 2px dashed; border-bottom: 2px dashed; height: 2px" color=black>

竖线：

<hr style="height:100px; width:4px" color=orange>
<hr style="filter:alpha(opacity=100,finishopacity=5,style=2); height:100px; width:5px" color=navy>
<hr style="filter:alpha(opacity=0,finishopacity=100,style=2);height:100px; width:4px" color=red>

HTML 与 XHTML 之间的差异

在 HTML 中，

---

标签没有结束标签。

在 XHTML 中，

---

必须被正确地关闭，比如

---

。

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

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

【相关推荐】

html title标签的作用是什么？关于html title标签的详细介绍

html select标签的用法你知道吗？html select标签属性介绍

Atas ialah kandungan terperinci html hr标签的属性有哪些？HTML hr标签的样式详解. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!