html中hr是什麼意思

在html中，hr有「水平線」的意思，是用來在頁面中建立一條水平線的一種標籤。 hr元素被用來分隔 HTML 頁面中的內容，沒有結束標籤；直接在需要分隔的元素間加上「

---

」即可。

本教學操作環境：windows7系統、HTML5版、Dell G3電腦。

---

標籤定義 HTML 頁面中的主題變化（例如主題的轉移），並顯示為一條水平線。

---

元素被用來分隔 HTML 頁面中的內容（或定義一個變更）。

說明：

• 在 HTML5 中，

  ---

  定義內容中的主題變化，並顯示為一條水平線。

• 在 HTML 4.01 中，

  ---

  標籤僅顯示為一條水平線。

• 在 HTML 中，

  ---

  標籤沒有結束標籤。

html 

---

標籤的屬性

##規定

---

sizewidth 規定

---

元素的寬度。

屬性	值	描述
align	left center right	規定 元素的對齊方式
#noshade	noshade
	pixels	#HT規定 元素的高度。
	pixels%

範例：

<h1>HTML</h1>
<p>HTML 是用于描述 web 页面的一种语言。</p>

<hr>

<h1>CSS</h1>
<p>CSS 定义如何显示 HTML 元素。</p>

效果圖：

可以看出就是一條黑線，一點都不美觀，更不用說用

---

來美觀頁面了，這就需要用css來設定hr的樣式了。

例如：

1、css設定hr的粗細（加粗）與顏色

<hr   style="max-width:90%"/><!--修改的样式-->
<br />
<hr /><!--默认的样式-->

2、css設定hr的雙線樣式

<hr   style="max-width:90%"/>

3、css設定hr的漸層樣式

html程式碼：

<hr class="style-one"/>
<br/>
<hr class="style-two"/>

css程式碼：

hr.style-one {/*透明渐变水平线*/
    width:80%;
    margin:0 auto;
    border: 0;
    height: 4px;
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
}
hr.style-two{/*渐变*/
    width:80%;
    margin:0 auto;
    border: 0;
    height: 4px;
    background: #333;
    background-image: linear-gradient(to right, red, #333, rgb(9, 206, 91));
}

推薦教學：《

html影片教學》

以上是html中hr是什麼意思的詳細內容。更多資訊請關注PHP中文網其他相關文章！