首頁技術(shù)文章正文

HTML網(wǎng)頁格式化:標(biāo)題標(biāo)簽、段落標(biāo)簽和水平標(biāo)簽

更新時間:2021-05-28 來源:黑馬程序員 瀏覽量:

1577370495235_學(xué)IT就到黑馬程序員.gif

一篇結(jié)構(gòu)清晰的文章通常都會通過標(biāo)題、段落、分割線等對文章進(jìn)行結(jié)構(gòu)排列,HTML網(wǎng)頁也不例外,為了使網(wǎng)頁中的文字有條理地顯示出來,HTML提供了相應(yīng)的頁面格式化標(biāo)簽,如標(biāo)題標(biāo)簽、段落標(biāo)簽、水平線標(biāo)簽和換行標(biāo)簽,對它們的具體介紹如下。

1.標(biāo)題標(biāo)簽

為了使網(wǎng)頁更具有語義化(語義化是指賦予普通網(wǎng)頁文本特殊的含義),我們經(jīng)常會在頁面中用到標(biāo)題標(biāo)簽,HTML提供了6個等級的標(biāo)題,即<h1>、<h2>、<h3>、<h4>、<h5>和<h6>,從<h1>到<h6>標(biāo)題的重要性依次遞減。標(biāo)題標(biāo)簽的基本語法格式如下。

<hn align="對齊方式">標(biāo)題文本</hn>

在上面的語法中n的取值為1到6,代表1~6級標(biāo)題。align屬性為可選屬性,用于指定標(biāo)題的對齊方式。

默認(rèn)情況下標(biāo)題文字是加粗左對齊顯示的,并且從<h1>到<h6>標(biāo)題字號依次遞減。如果想讓標(biāo)題文字右對齊或居中對齊,就需要使用align屬性設(shè)置對齊方式,其取值如下:

●left:設(shè)置標(biāo)題文字左對齊(默認(rèn)值)

●center:設(shè)置標(biāo)題文字居中對齊

●right:設(shè)置標(biāo)題文字右對齊

注意:

1、一個頁面中只能使用一個<h1>標(biāo)簽,常常被用在網(wǎng)站的logo部分。

2、由于h標(biāo)簽擁有特殊的語義,請慎重選擇恰當(dāng)?shù)臉?biāo)簽來構(gòu)建文檔結(jié)構(gòu)。初學(xué)者切勿為了設(shè)置文字加粗或更改文字的大小而使用文字標(biāo)簽。

3、HTML中一般不建議使用h標(biāo)簽的align對齊屬性,可使用CSS樣式設(shè)置。

2.段落標(biāo)簽

在網(wǎng)頁中要把文字有條理地顯示出來,離不開段落標(biāo)簽,就如同我們平常寫文章一樣,整個網(wǎng)頁也可以分為若干個段落。在網(wǎng)頁中使用<p>標(biāo)簽來定義段落。<p>標(biāo)簽是HTML文檔中最常見的標(biāo)簽,默認(rèn)情況下,文本在一個段落中會根據(jù)瀏覽器窗口的大小自動換行。<p>標(biāo)簽的基本語法格式如下。

<p align="對齊方式">段落文本</p>

在上面的語法中align屬性為<p>標(biāo)簽的可選屬性,和標(biāo)題標(biāo)簽<h1>~<h6>一樣,同樣可以使用align屬性設(shè)置段落文本的對齊方式。

3.水平線標(biāo)簽

在網(wǎng)頁中常??吹揭恍┧骄€將段落與段落之間隔開,使得文檔結(jié)構(gòu)清晰,層次分明。水平線可以通過<hr />標(biāo)簽來定義,基本語法格式如下。

<hr 屬性="屬性值" />

<hr />是單標(biāo)簽,在網(wǎng)頁中輸入一個<hr />,就添加了一條默認(rèn)樣式的水平線。此外通過為<hr />標(biāo)簽設(shè)置屬性和屬性值,可以更改水平線的樣式,其常用的屬性如表1所示。
表1<hr />標(biāo)簽的常用屬性

屬性名含義屬性值
align設(shè)置水平線的對齊方式可選擇left、right、center三種值,默認(rèn)為center,居中對齊顯示。
size設(shè)置水平線的粗細(xì)以像素為單位,默認(rèn)為2像素。
color設(shè)置水平線的顏色可用顏色名稱、十六進(jìn)制#RGB、rgb(r,g,b)。
width設(shè)置水平線的寬度可以是確定的像素值,也可以是瀏覽器窗口的百分比,默認(rèn)為100%。

注意:

在實(shí)際工作中,并不贊成使用<hr />的所有外觀屬性,最好通過CSS樣式進(jìn)行設(shè)置。

1622183414349_格式化標(biāo)簽.jpg

4.換行標(biāo)簽

在word中,按【Enter】鍵可以將一段文字換行顯示,但在網(wǎng)頁中,如果想要將某段文本強(qiáng)制換行顯示,就需要使用換行標(biāo)簽<br />。
使用換行標(biāo)簽<br />的段落實(shí)現(xiàn)了強(qiáng)制換行的效果,而使用回車鍵換行的段落在瀏覽器實(shí)際顯示效果中并沒有換行,只是多出了一個空白字符。

注意:

<br />標(biāo)簽雖然可以實(shí)現(xiàn)換行的效果,但并不能取代結(jié)構(gòu)標(biāo)簽<h>、<p>等。






猜你喜歡:

HTML5頁面頭部信息相關(guān)標(biāo)簽是如何編輯的?

嵌入視頻如何為video標(biāo)簽添加寬高?

nav標(biāo)簽怎么用?nav標(biāo)簽的有什么作用?

JSTL標(biāo)簽有哪些?常用JSTL標(biāo)簽介紹

黑馬程序員前端培訓(xùn)

分享到:
在線咨詢 我要報(bào)名
和我們在線交談!