2.4 基本排版元素

段落和水平線屬于最基本的文檔結構元素。在網頁制作過程中，通過段落的排版即可制作出簡單的網頁。以下講解基本的文檔結構元素。

2.4.1 段落標簽<p>

由于瀏覽器忽略用戶在HTML編輯器中輸入的回車符，為了使文字段落排列得整齊、清晰，常用段落標簽<p>…</p>實現這一功能。段落標簽<p>是HTML格式中特有的段落元素，在HTML格式里不需要在意文章每行的寬度，不必擔心文字太長而被截掉，它會根據窗口的寬度自動轉折到下一行。段落標簽的格式如下。

【例2-6】 列出包含<p>標簽的多種屬性。本例在瀏覽器中的顯示效果如圖2-6所示。

【說明】段落標簽<p>會在段落前后加上額外的空行，相當于使段落間的間距加了兩個換行標簽<br/>，用以區別不同段落。

2.4.2 換行標簽<br/>

網頁內容并不都是像段落那樣，有時候沒有必要用多個<p>標簽去分割內容。如果編輯網頁內容只是為了換行，而不是從新段落開始的話，可以使用<br/>標簽。

<br/>標簽將打斷HTML文檔中正常段落的行間距和換行。將<br/>放在任意一行中都會使該行換行，如果將<br/>放在一行的末尾，可以使后面的文字、圖像、表格等顯示于下一行，而又不會在行與行之間留下空行，即強制文本換行。換行標簽的格式如下。

瀏覽器解釋為從該處換行。換行標簽單獨使用，可使頁面清晰、整齊。

【例2-7】 制作愛心包裝聯系方式的頁面。本例的顯示效果如圖2-7所示。

【說明】用戶可以使用段落標簽<p>制作頁面中較大的行間距，如本例中“客服郵箱”和“客服電話”之間的間距，也可以使用兩個<br/>標簽實現這一效果。

2.4.3 預格式化標簽<pre>

<pre>標簽可定義預格式化的文本。<pre>標簽中的文本塊通常會保留空格和換行符，而文本也會呈現為等線字體。<pre>標簽的一個常見應用就是用來表示計算機的源代碼。預格式化標簽的格式如下。

【例2-8】 <pre>標簽的基本用法。本例在瀏覽器中顯示的效果如圖2-8所示。

【說明】<pre>標簽所定義的文本塊里不允許包含使段落斷開的標簽（例如<h#>標簽、<p>標簽）。

2.4.4 縮排標簽<blockquote>

<blockquote>標簽可定義一個文本塊引用。<blockquote>與</blockquote>之間的所有文本都會從常規文本中分離出來，通常在左、右兩邊進行縮進，而且有時使用斜體。也就是說，文本塊引用擁有自己的空間。縮排標簽的格式如下。

【例2-9】 <blockquote>標簽的基本用法。本例在瀏覽器中的顯示效果如圖2-9所示。

【說明】瀏覽器會自動在<blockquote>標簽前后進行換行，并增加外邊距。

2.4.5 水平線標簽<hr/>

水平線可以作為段落與段落之間的分隔線，使得文檔結構清晰、層次分明。當瀏覽器解釋到HTML文檔中的<hr/>標簽時，會在此處換行，并加入一條水平線段。水平線標簽的格式如下。

【例2-10】 <hr/>標簽的基本用法。本例在瀏覽器中的顯示效果如圖2-10所示。

【說明】<hr/>標簽強制執行一次換行，將導致段落的對齊方式重新回到默認設置。

2.4.6 案例——制作愛心包裝品牌簡介頁面

經過前面文檔結構元素的學習，接下來使用基本的段落排版制作愛心包裝品牌簡介頁面。

【例2-11】 制作愛心包裝品牌簡介頁面。本例在瀏覽器中的顯示效果如圖2-11所示。