首页 >web前端 >html教程 >html hr标签的属性有哪些?HTML hr标签的样式详解

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

寻∝梦
寻∝梦原创
2018-08-18 13:30:3930069浏览

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

html中hr标签定义和用法:

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

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

HTML f32b48428a809b51f04d3228cdf461fa 标签实例:

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

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

html中hr标签可选的属性:

tuyi.png

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 中,f32b48428a809b51f04d3228cdf461fa 标签没有结束标签。

在 XHTML 中,f32b48428a809b51f04d3228cdf461fa 必须被正确地关闭,比如 231a563c997aa9e3e0ae614bd16728b0。

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

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

【相关推荐】

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

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


以上是html hr标签的属性有哪些?HTML hr标签的样式详解的详细内容。更多信息请关注PHP中文网其他相关文章!

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn