2.2 設(shè)置段落效果

網(wǎng)頁中文字的排列在很大程度上決定了一個網(wǎng)頁是否美觀。對于網(wǎng)頁中的大段文字，通常采用分段、分行和加空格等方式進行規(guī)劃。本節(jié)從段落的細節(jié)設(shè)置入手，使讀者學(xué)習(xí)后能利用標(biāo)簽輕松自如地規(guī)劃文字排版。

2.2.1 文本分段<p>標(biāo)簽

HTML標(biāo)簽中最常用的標(biāo)簽是段落標(biāo)簽<p>，這個標(biāo)簽非常簡單，但是卻非常重要，因為這是一個用來劃分段落的標(biāo)簽，幾乎在所有網(wǎng)頁中都會用到。

<p>標(biāo)簽的基本語法如下。

<p>段落文字</p>

2.2.2 文本分行<br>標(biāo)簽

當(dāng)文字到達瀏覽器的邊界后將自動換行，但是當(dāng)調(diào)整瀏覽器的寬度時，文字換行的位置也相應(yīng)發(fā)生變化，格式就會顯得混亂，因此在網(wǎng)頁中添加換行標(biāo)簽是必要的。換行標(biāo)簽的基本語法如下。

<br>

在網(wǎng)頁中，如果某一行的文本過長，瀏覽器會自動對這行文字進行換行，如果想取消瀏覽器的換行處理，可以使用<nobr>標(biāo)簽來禁止自動換行，該標(biāo)簽是成對出現(xiàn)的，有開始標(biāo)簽就有結(jié)束標(biāo)簽。

01 執(zhí)行“文件>打開”命令，打開頁面“源文件\第2章\2-2-2.html”，效果如圖2-21所示，切換到代碼視圖中，可以看到相應(yīng)的HTML代碼，如圖2-22所示。

圖2-21　打開頁面

圖2-22　網(wǎng)頁HTML代碼

02 為頁面中相應(yīng)的文本添加<p>標(biāo)簽進行分段，如圖2-23所示。保存頁面，在瀏覽器中預(yù)覽頁面，可以看到為文本進行分段的效果，如圖2-24所示。

圖2-23　添加段落標(biāo)簽

圖2-24　預(yù)覽文字內(nèi)容分段效果

03 返回網(wǎng)頁HTML代碼中，在頁面中的相應(yīng)位置輸入換行標(biāo)簽，如圖2-25所示。保存頁面，在瀏覽器中預(yù)覽頁面，可以看到為文本進行換行處理的效果，如圖2-26所示。

圖2-25　添加換行標(biāo)簽

圖2-26　預(yù)覽文字換行效果

2.2.3 標(biāo)簽<h1>至<h6>標(biāo)簽

標(biāo)題是網(wǎng)頁中不可缺少的元素，為了凸顯標(biāo)題的重要性，標(biāo)題的樣式比較特殊。HTML技術(shù)保存了一套針對標(biāo)題的樣式標(biāo)簽，按照文字尺寸從大到小排列分別是從<h1>到<h6>。標(biāo)題標(biāo)簽的基本語法如下。

<hx>這是標(biāo)題</hx>

這里的下標(biāo)x為數(shù)字從1到6，<hx>標(biāo)簽用于設(shè)置文章的標(biāo)題，標(biāo)題標(biāo)簽的特點是獨占一行和文字加粗。在進行網(wǎng)頁設(shè)計時，可以根據(jù)標(biāo)題的等級來選擇合適的標(biāo)題，并設(shè)置多級標(biāo)題。

01 執(zhí)行“文件>打開”命令，打開頁面“源文件\第2章\2-2-3.html”，效果如圖2-27所示，切換到代碼視圖中，可以看到相應(yīng)的HTML代碼，如圖2-28所示。

圖2-27　打開頁面

圖2-28　網(wǎng)頁HTML代碼

02 為頁面中相應(yīng)的文字分別添加標(biāo)題標(biāo)簽<h1>至<h6>，如圖2-29所示。保存頁面，在瀏覽器中預(yù)覽頁面，可以看到各標(biāo)題文字的效果，如圖2-30所示。

圖2-29　添加標(biāo)題標(biāo)簽

圖2-30　預(yù)覽默認的標(biāo)題文字效果

2.2.4 水平線<hr>標(biāo)簽

HTML提供了修飾用的水平分割線，在很多場合中可以輕松使用，不需要另外作圖。同時可以在HTML中為水平線添加顏色、大小和粗細等屬性。

<hr>標(biāo)簽的基本語法如下。

<hr>

在網(wǎng)頁中輸入一個<hr>標(biāo)簽，就添加了一條默認樣式的水平線，且在頁面中占據(jù)一行。

標(biāo)簽<hr>有多種屬性，常用的屬性有width、size、align、color和title，分別可以設(shè)置水平線的寬度、高度、對齊方式和鼠標(biāo)指針懸停在分割線上時出現(xiàn)的內(nèi)容提示。

01 執(zhí)行“文件>打開”命令，打開頁面“源文件\第2章\2-2-4.html”，效果如圖2-31所示，切換到代碼視圖中，可以看到相應(yīng)的HTML代碼，如圖2-32所示。

圖2-31　打開頁面

圖2-32　網(wǎng)頁HTML代碼

02 在網(wǎng)頁中標(biāo)題文字之后添加<hr>標(biāo)簽，并對相關(guān)屬性進行設(shè)置，如圖2-33所示。保存頁面，在瀏覽器中預(yù)覽頁面，可以看到所添加的水平線的效果，如圖2-34所示。

圖2-33　添加水平線標(biāo)簽及屬性設(shè)置

圖2-34　預(yù)覽所插入的水平線效果

2.2.5 文本對齊設(shè)置

段落文字在不同的時候需要不同的對齊方式，默認的對齊方式是左對齊。<p>標(biāo)簽的對齊屬性為align，align屬性的基本語法如下。

align="對齊方式"

align屬性需要設(shè)置在段落或其他標(biāo)簽中，通過設(shè)置align屬性為left、right或center值實現(xiàn)左對齊、右對齊和居中對齊。

01 執(zhí)行“文件>打開”命令，打開頁面“源文件\第2章\2-2-5.html”，效果如圖2-35所示，切換到代碼視圖中，可以看到相應(yīng)的HTML代碼，如圖2-36所示。

圖2-35　打開頁面

圖2-36　網(wǎng)頁HTML代碼

02 在頁面中id名稱為title的<div>標(biāo)簽中添加align屬性設(shè)置，如圖2-37所示。保存頁面，在瀏覽器中預(yù)覽頁面，可以看到文字水平居右對齊的效果，如圖2-38所示。

圖2-37　添加align屬性設(shè)置

圖2-38　預(yù)覽文字水平右對齊效果

03 返回代碼視圖中，修改剛添加的align屬性的屬性值，如圖2-39所示。保存頁面，在瀏覽器中預(yù)覽頁面，可以看到文字水平居中對齊的效果，如圖2-40所示。

圖2-39　修改align屬性設(shè)置

圖2-40　預(yù)覽文字水平居中對齊效果