- HTML+CSS+DIV網頁設計與布局（第2版）（微課版）
- 聶斌 張明遙
- 2839字
- 2019-10-23 17:37:35
2.2 與文字排版相關的元素
與文字排版相關的元素包括文本縮進、段落、換行、段落居中等。一個好的網頁，文字段落的設置是必不可少的，它可以使網頁更加簡潔和美觀。
2.2.1 文本縮進
文本縮進元素<BLOCKQUOTE>主要用于設置文本的縮進效果，從而使頁面的文字布局更加錯落有致。文本縮進元素的語法格式如下。
<BLOCKQUOTE>需要進行縮排的文字</BLOCKQUOTE>
需要注意的是，文本縮進元素<BLOCKQUOTE>可以嵌套使用，每使用一次，文本就縮進一次。
【示例2-7】不同次數的縮進。
01 <HTML> 02 <HEAD> 03 <TITLE>設置文本縮進</TITLE> 04 </HEAD> 05 <BODY> 06 在一個山區里，有一座大山，叫頂天山。山腳下有個小村子，村里的人家都是靠打獵過生活的。有 一天，不知道是誰，在一塊光滑的巖石上畫了一只狐貍。 07 <BLOCKQUOTE>第一個人看到了，就說：“哈！這上面畫的根本不像狐貍，倒像一只狼。” </BLOCKQUOTE> 08 <BLOCKQUOTE><BLOCKQUOTE>這句話一傳兩傳，傳到另外一個人的嘴里，就變成這樣說了：“有 人說，頂天山上有一只狐貍，一下子變狼了。”</BLOCKQUOTE></BLOCKQUOTE> 09 <BLOCKQUOTE><BLOCKQUOTE>別人聽了都問：“是真的嗎？”</BLOCKQUOTE> </BLOCKQUOTE> 10 <BLOCKQUOTE>“是真的，好多人都在這樣說。”</BLOCKQUOTE> 11 </BODY> 12 </HTML>
第6～10行演示了使用<BLOCKQUOTE>來實現文本的縮行。示例2-7運行效果如圖2.10所示，可以看出，使用文本縮進時，段落左右兩側都被縮進了。文本縮進元素可以嵌套使用，使用的元素越多，縮進的程度也越大。
圖2.10 文本縮進運行結果
2.2.2 換行
HTML中的換行元素在前面的章節已經多次提到并使用過了。<BR>元素就是用來對文字進行換行的。<BR>元素沒有結束標簽，也就是說，一個<BR>元素就是換一次行。
【示例2-8】使用換行元素來對文字進行換行。
01 <HTML> 02 <HEAD> 03 <TITLE>換行</TITLE> 04 </HEAD> 05 <BODY> 06 這是一行文字，雖然在源代碼里并沒有換行，<BR>但是因為使用了一個“<BR>”標簽，所 以它換行了。<BR><BR> 07 這是 08 兩行文字<BR> 09 上面一行文字，在源代碼里是分兩行寫的，因為沒有使用“<BR>”標簽，所以它沒有換行。 10 </BODY> 11 </HTML>
第6～9行使用<BR>標簽來演示HTML換行。示例2-8運行效果如圖2.11所示，可以看出，雖然源代碼中的文字沒有換行，但是只要加上了<BR>標簽，就會在添加<BR>標簽之處換行；另外源代碼中的文字即使換了行，只要沒有加上<BR>標簽，在用瀏覽器瀏覽時，文字也不會換行。
圖2.11 文字換行運行結果
注意
瀏覽器中顯示“<”和“>”字符時，在源代碼中要分別以“<”和“>”替代。
2.2.3 段落
在HTML中，使用<P>元素可以區分一個段落與另一個段落，在<P>標簽與</P>標簽之間的文字是一個段落，其語法格式如下。
<P>一段文字</P>
【示例2-9】有時候讀者會分不清段落與換行之間的概念，下面通過一個例子來區分這兩個概念。
01 <HTML> 02 <HEAD> 03 <TITLE>段落與換行</TITLE> 04 </HEAD> 05 <BODY> 06 <P> 07 從這里開始，是一個新的段落，一個段落里表達的是一種意思。<BR> 08 這是一行文字，<BR>因為使用了“<BR>”標簽，所以被分為了兩行。 09 </P> 10 <P> 11 從這里開始，又是一個新的段落，這個段落里表達的可能會是另一種意思。 12 </P> 13 </BODY> 14 </HTML>
第6～12行演示了如何在HTML中使用<P>標簽來實現分段。示例2-9運行效果如圖2.12所示，可以看出，前4行文字是第一個段落，后兩行文字是第2個段落。從直觀上看來，在一個段落與另一個段落之間，空了一行文字的距離。而<BR>元素只是使文字換了一行，并沒有在文字與文字之間增加一個空白行。
圖2.12 為文字設置段落運行結果
注意
雖然<P>元素有開始標簽與結束標簽，但是結束標簽可以省略。當瀏覽器遇到一個新的<P>標簽時，會自動將前面的段落結束，并開始一個新的段落。
2.2.4 段落居中
如果想要居中顯示網頁中的段落，可以使用居中對齊元素<CENTER>。居中對齊元素是雙元素，成對出現，以<CENTER>開始，以</CENTER>結束。在元素之間的所有內容都居中對齊，包括文字、圖像、表格等，其具體的語法格式如下。
<CENTER>需要居中對齊的內容</CENTER>
【示例2-10】使用居中對齊元素使段落居中顯示。
01 <HTML> 02 <HEAD> 03 <TITLE>設置元素的居中對齊</TITLE> 04 </HEAD> 05 <BODY> 06 這是默認的文字對齊方式。這是默認的文字對齊方式。這是默認的文字對齊方式。這是默認的文字 對齊方式。這是默認的文字對齊方式。 07 <CENTER> 08 <H3>HTML 中的字體元素</H3> 09 <P> 在HTML 中有很多元素，學習好這些元素可以更好地掌握創建網頁的方法。</P> 10 </CENTER> 11 </BODY> 12 </HTML>
第6行使用默認對齊方式，第7～10行使用<CENTER>標簽實現居中對齊方式。示例2-10運行效果如圖2.13所示，可以看出第一段文字沒有使用居中對齊元素，段落就以默認方式居左對齊；第二段的三級標題和第三段的段落文字使用了居中對齊元素，它們就居中顯示了。
圖2.13 段落居中運行效果
2.2.5 預定義格式
通過前面章節的學習可以知道，在HTML源代碼中，即使文字已經換行，但是只要沒有使用<BR>標簽，在瀏覽器里顯示出來的文字也不會換行。如果想在瀏覽器中顯示源代碼中設置的所有格式，包括文字之間的空白，如空格、制表符等，可以使用<PRE>元素。使用<PRE>元素相當于設置了一個“塊”，這個塊可以將源代碼中的所有文本（除HTML標簽外）在瀏覽器中按原樣顯示出來。其語法格式如下。
<PRE>設定了格式的文字</PRE>
例如，源代碼中有10個空格，在瀏覽器也會顯示10個空格，不再合并多個空格為一個空格；源代碼中有一個換行，在瀏覽器中也會顯示一個換行，不再需要使用<BR>標簽來強制換行。
【示例2-11】使用預定義格式來設置文本按原樣顯示。
01 <HTML> 02 <HEAD> 03 <TITLE>預格式化</TITLE> 04 </HEAD> 05 <BODY> 06 春 曉 07 春眠不覺曉，處處聞啼鳥。 08 夜來風雨聲，花落知多少。 09 <PRE> 10 春 曉 11 春眠不覺曉，處處聞啼鳥。 12 夜來風雨聲，花落知多少。 13 </PRE> 14 <PRE> 15 春 曉 16 春眠不覺曉，處處聞啼鳥。 17 夜來風雨聲，花落知多少。 18 </PRE> 19 </BODY> 20 </HTML>
示例2-11運行效果如圖2.14所示，可以看出，沒有使用<PRE></PRE>標簽時，無論在源代碼中怎么換行，在瀏覽器中顯示出來的都是一行，并且多個空格都被處理成一個空格。而在使用<PRE></PRE>標簽后，源代碼中是什么樣的格式，在瀏覽器中顯示出來的就是什么樣的格式，有換行的位置就顯示換行，有空格的位置就顯示空格。
圖2.14 預定義格式運行效果
2.2.6 水平分隔線
當頁面內容比較煩瑣時，可以在段與段之間插入一條水平分隔線來使頁面層次分明，便于閱讀。在HTML中可以使用<HR>元素來創建一條水平分隔線，其語法格式如下。
<HR ALIGN=" 對齊方式" WIDTH="寬度" SIZE=" 高度" COLOR="顏色" NOSHADE>
其中，<HR>元素中的屬性說明如下。
? ALIGN屬性的值可以為LEFT（左對齊）、CENTER（居中）和RIGHT（右對齊）3種。
? WIDTH屬性代表寬度，可以有兩種表示法：一種是百分數，代表水平分隔線占瀏覽器窗口寬度的百分比；另一種是像素，代表水平分隔線寬度占多少像素。
? SIZE屬性代表水平分隔線的高度，其值為數字。
? COLOR屬性代表水平分隔線的顏色，默認為黑色。
? NOSHADE代表水平分隔線不顯示陰影，默認情況下水平分隔線是顯示陰影的。
【示例2-12】創建不同類型的水平分隔線。
01 <HTML> 02 <HEAD> 03 <TITLE>水平分隔線</TITLE> 04 </HEAD> 05 <BODY> 06 這是一個默認的水平分隔線： 07 <HR> 08 該水平分隔線占瀏覽器窗口的 50%,并向左對齊 09 <HR WIDTH="50%" ALIGN="LEFT"> 10 該水平分隔線寬度為 500 像素 11 <HR WIDTH="500"> 12 該水平分隔線的高度為 3，并不顯示陰影 13 <HR WIDTH="200" SIZE="3" NOSHADE> 14 該水平分隔線為紅色 15 <HR WIDTH="50%" COLOR="red"> 16 </BODY> 17 </HTML>
第6～15行分別使用<HR>標簽，顯示不同水平分隔線的內容。示例2-12運行效果如圖2.15所示。
圖2.15 創建水平分隔線運行結果
在例2-12中創建了以下幾種水平分隔線。
① 第1條水平分隔線為默認的水平分隔線，該水平分隔線的寬度為100％，居中，高度為1，顏色為黑色。
② 第2條水平分隔線的寬度為50％。當調整瀏覽器窗口大小時，該水平分隔線也會自動調整長度，以保證永遠只占瀏覽器窗口50％的長度。
③ 第3條水平分隔線的寬度為500像素。無論瀏覽器窗口的大小是多少，該水平分隔線的長度都是500像素，不會隨著窗口大小改變而改變，一旦瀏覽器窗口的寬度小于500像素，就會在窗口上出現橫向滾動條。
④ 為第4條水平分隔線指定了NOSHADE屬性。該屬性沒有屬性值，此時的水平分隔線沒有立體感。
⑤ 第5條水平分隔線的顏色為紅色，如果不設置顏色，水平分隔線默認為黑色。水平線使用COLOR屬性后，將不能顯示陰影效果。