html hr標籤的屬性有哪些？ HTML hr標籤的樣式詳解

html hr標籤的屬性有哪些？ HTML hr標籤的樣式詳解，本篇文章介紹了html中的hr標籤的定義及其屬性描述，還有關於html hr標籤的樣式使用的幾種方法

html中hr標籤定義與用法：

---

標籤在HTML 頁面中建立一條水平線。

水平分隔線（horizo​​ntal rule）可以在視覺上將文件分隔成各個部分。

HTML

---

標籤實例：

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

<h1 id="This-nbsp-is-nbsp-header-nbsp">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標籤屬性介紹

以上是html hr標籤的屬性有哪些？ HTML hr標籤的樣式詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！