明輝手游網(wǎng)中心:是一個免費提供流行視頻軟件教程、在線學(xué)習(xí)分享的學(xué)習(xí)平臺!

html hr標簽的屬性有哪一些?HTML hr標簽的樣式詳細說明

[摘要]html hr標簽的屬性有哪些?HTML hr標簽的樣式詳解,本篇文章介紹了html中的hr標簽的定義及其屬性描述,還有關(guān)于html hr標簽的樣式使用的幾種方法html中hr標簽定義和用法:<hr> 標簽在 HTML 頁面中創(chuàng)建一條水平線。水平分隔線(horizontal rule)...
html hr標簽的屬性有哪些?HTML hr標簽的樣式詳解,本篇文章介紹了html中的hr標簽的定義及其屬性描述,還有關(guān)于html hr標簽的樣式使用的幾種方法

html中hr標簽定義和用法:

<hr> 標簽在 HTML 頁面中創(chuàng)建一條水平線。

水平分隔線(horizontal rule)可以在視覺上將文檔分隔成各個部分。

HTML <hr> 標簽實例:

被水平線分隔的標題和段落:

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

html中hr標簽可選的屬性:

tuyi.png

html中hr標簽在網(wǎng)頁中的用法:

<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標簽的各種樣式使用:

網(wǎng)頁設(shè)計當中hr的各種樣式,如果使用得當,將會給你的頁面增色很多,下面就來詳細介紹下各種樣式和各種使用方式的方法!

我用的編輯器是eclipse,這個根據(jù)個人喜好來定,用什么都無所謂的,就算你直接用txt也照樣能實現(xiàn)這里的效果,畢竟只是靜態(tài)。

第一種:

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

height:2px;是hr的高度

border:none;是沒有邊框

border-top:2px dotted #185598;是設(shè)置橫線的樣式

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 中,<hr> 標簽沒有結(jié)束標簽。

在 XHTML 中,<hr> 必須被正確地關(guān)閉,比如 <hr />。

在 HTML 4.01 中,hr 元素的所有呈現(xiàn)屬性均不被贊成使用。

在 XHTML 1.0 Strict DTD 中,hr 元素的所有呈現(xiàn)屬性均不被支持。

【相關(guān)推薦】

html title標簽的作用是什么?關(guān)于html title標簽的詳細介紹

html select標簽的用法你知道嗎?html select標簽屬性介紹

以上就是html hr標簽的屬性有哪些?HTML hr標簽的樣式詳解的詳細內(nèi)容,更多請關(guān)注php中文網(wǎng)其它相關(guān)文章!


網(wǎng)站建設(shè)是一個廣義的術(shù)語,涵蓋了許多不同的技能和學(xué)科中所使用的生產(chǎn)和維護的網(wǎng)站。