HTML學習——如何使用
標簽在網頁上繪制分隔線


有的時候根據頁面的需要,我們需要一些分隔線將文檔分隔成各個部分。有多種方法可以達到這個目的,這里簡要記述使用<hr>標簽可以實現段落畫線的功能。

定義和用法

<hr> 標簽可以在 HTML 頁面中創建一條水平線。

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

1 <p>這是段落的分隔線</p>
2 <hr />
3 <p>這是段落的分隔線</p>

效果如下:

這是段落的分隔線


這是段落的分隔線

可選的屬性

屬性 描述
align

center

left

right

規定 hr 元素的對齊方式
width

pixels%

規定 hr 元素的寬度
size pixels% 規定 hr 元素的高度(厚度)
noshade noshade 規定 hr 元素的顏色呈現為純色

示例:

1 <p>設置align=left,size=1,width=300px,設置noshade屬性:</p>
2 <hr align="left" noshade="noshade" size="1" width="300px" />
3 <p>設置align=center,size=10,width=300px,設置noshade屬性:</p>
4 <hr align="center" noshade="noshade" size="10" width="300px" />
5 <p>設置align=right,size=10,width=300px,不設置noshade屬性:</p>
6 <hr align="right" size="10" width="300px" />
7 <p>結束</p>
hr屬性示例

 效果如下:

設置align=left,size=1,width=300px,設置noshade屬性:


設置align=center,size=10,width=300px,設置noshade屬性:


設置align=right,size=10,width=300px,不設置noshade屬性:


結束

關於<hr>標簽的樣式

由於<hr>標簽支持HTML全局屬性,因此在編寫過程中可以利用style屬性進行樣式的設計,最好不要使用可選屬性進行樣式設計。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM