html中hr是什麼意思-前端問答-PHP中文網

html中hr是什麼意思

青灯夜游

發布： 2021-03-31 13:59:03

原創

16925 人瀏覽過

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

」即可。

html中hr是什麼意思

本教學操作環境：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>

登入後複製

效果圖：

html中hr是什麼意思

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

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

例如：

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

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

登入後複製

html中hr是什麼意思

2、css設定hr的雙線樣式

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

登入後複製

html中hr是什麼意思

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中hr是什麼意思

推薦教學：《

html影片教學》

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