3.1　段落排版

本節介紹HTML網頁的段落排版，包括段落標簽、對齊與縮進樣式、分割線和段落標題等內容。

3.1.1　段落標簽

在HTML網頁中，段落是通過<p></p>標簽元素來定義的。其實，HTML網頁中的段落與文章寫作中的自然段是類似的。也可以這樣認為，HTML網頁中的段落就是為實現文章中的自然段樣式效果而設計的。因此，HTML網頁中的段落在新聞、報告、文章等情景應用中是一個非常重要的元素。

當我們在HTML網頁中設計段落<p></p>標簽元素時，瀏覽器頁面會自動為每一個段落的前后添加空行。在使用過程中，建議設計人員不要漏掉段落的結束標簽（可能經常會漏掉），以避免瀏覽器會出現無法正確解析HTML頁面的問題。

下面是一個使用段落（<p></p>）標簽元素的HTML示例代碼（詳見源代碼ch03/ch03-html-p.html文件）。

【代碼3-1】

【代碼解析】

第10～14行代碼使用<p>標簽元素定義了第一個段落。

第16～20行代碼使用<p>標簽元素定義了第二個段落，不同之處是在<p>標簽元素內使用style屬性定義了字體樣式（font-style: italic;font-size: larger），這樣兩個段落雖然內容一致，但顯示出來的字體風格會有差異。

運行測試網頁，效果如圖3.1所示。

3.1.2　對齊與縮進

在HTML網頁中使用<p></p>標簽元素展示自然段落時，很多情況下需要設定對齊（text-align）與縮進（text-intend）樣式，這也是為了適應新聞、報告、文章等內容的格式要求。

下面是一個使用段落（<p></p>）標簽元素設置對齊與縮進樣式的HTML示例代碼（詳見源代碼ch03/ch03-html-p-align.html文件）。

【代碼3-2】

【代碼解析】

第10～13行代碼為第一個段落，在<p>標簽元素內使用style屬性定義了對齊與縮進樣式（text-align: justify;text-indent: 2em;），其中“justify”表示兩端對齊，而縮進的尺寸為兩個相對字符長度（2em）。

第15～18行代碼為第二個段落，在<p>標簽元素內使用style屬性定義了對齊與縮進樣式（text-align: left;text-indent: 0em;），其中“left”表示左對齊，而縮進的尺寸為零個相對字符長度（0em）。

第20～23行代碼為第三個段落，在<p>標簽元素內使用style屬性定義了對齊與縮進樣式（text-align: right;text-indent: 4em;），其中“right”表示右對齊，而縮進的尺寸為4個相對字符長度（4em）。

運行測試網頁，效果如圖3.2所示。

3.1.3　分割線

在HTML網頁中使用<hr>分割線標簽元素也是很常見的方法，譬如在網頁底部通常用一根分割線將公司信息、作者信息、版權信息和注冊備案信息分割開來，以示和網頁主體部分的區分。

下面是一個使用分割線（<hr>）標簽元素的HTML示例代碼（詳見源代碼ch03/ch03-html-p-hr.html文件）。

【代碼3-3】

【代碼解析】

第09行代碼為頁面中的第一條分割線，是沒有添加任何風格的原始樣式分割線，主要用于將頁面頭部與正文部分進行區分。

第13行代碼為頁面中的第二條分割線，設置了分割線高度（2px）和虛線（dashed）邊框樣式。

第14行代碼為頁面中的第三條分割線，設置了分割線高度（4px）和雙實線（double）邊框樣式。

第15行代碼為頁面中的最后一條分割線，同樣是沒有添加任何風格的原始樣式分割線，主要用于將頁面底部與正文部分進行區分。

運行測試網頁，效果如圖3.3所示。

3.1.4　標題

在HTML網頁中還有一種很常用的標題（<hx>）標簽，注意在實際使用<hx>標簽時，小寫x使用數字1～6代替，分別代表不同的標題字體大小。在HTML網頁中，只有段落<p>加上標題<hx>才會組成一篇美觀的、完整的網頁文章。

下面是一個使用標題（<hx>）標簽元素的HTML示例代碼（詳見源代碼ch03/ch03-html-hx.html文件）。

【代碼3-4】

運行測試網頁，頁面如圖3.4所示。