第三章 網(wǎng)頁(yè)文字與段落

1、本章內(nèi)容本章內(nèi)容3.1 3.1 編輯內(nèi)容編輯內(nèi)容3.2 3.2 文字效果文字效果3.3 3.3 文字的修飾文字的修飾3.4 3.4 段落段落3.1 編輯內(nèi)容編輯內(nèi)容3.1.1 3.1.1 注釋注釋3.1.2 3.1.2 空格符號(hào)空格符號(hào) 3.1.3 3.1.3 特殊符號(hào)特殊符號(hào) 在瀏覽器中顯示的文字內(nèi)容需要編寫(xiě)在在瀏覽器中顯示的文字內(nèi)容需要編寫(xiě)在標(biāo)簽中，這些內(nèi)標(biāo)簽中，這些內(nèi)容包括容包括普通的文字、空格符和特殊符號(hào)以及頁(yè)面的注釋語(yǔ)句普通的文字、空格符和特殊符號(hào)以及頁(yè)面的注釋語(yǔ)句等。常用等。常用的編輯內(nèi)容標(biāo)簽如下表所示：的編輯內(nèi)容標(biāo)簽如下表所示：標(biāo)簽標(biāo)簽含義含義注釋注釋 空格符等

2、特殊符號(hào)空格符等特殊符號(hào)常用編輯內(nèi)容標(biāo)簽常用編輯內(nèi)容標(biāo)簽3.1.1 注釋注釋注釋標(biāo)簽用來(lái)在源文檔中插入注釋?zhuān)⑨寱?huì)被瀏覽器忽略。注釋標(biāo)簽用來(lái)在源文檔中插入注釋?zhuān)⑨寱?huì)被瀏覽器忽略。 基本語(yǔ)法基本語(yǔ)法 語(yǔ)法解析：使用上述兩種表示方法都可以代表注釋語(yǔ)句；開(kāi)始使用語(yǔ)法解析：使用上述兩種表示方法都可以代表注釋語(yǔ)句；開(kāi)始使用!- 或或，結(jié)束使用，結(jié)束使用- 或或 ，中間為注釋內(nèi)容。，中間為注釋內(nèi)容。注意：一般情況下使用注意：一般情況下使用注釋網(wǎng)頁(yè)內(nèi)容，注釋網(wǎng)頁(yè)內(nèi)容，部分瀏覽器不支持部分瀏覽器不支持注釋?zhuān)缱⑨專(zhuān)鏔irefox。3.1.2 空格符號(hào)空格符號(hào) HTML頁(yè)面中空格符號(hào)是通過(guò)代碼進(jìn)行控制的。頁(yè)

3、面中空格符號(hào)是通過(guò)代碼進(jìn)行控制的。 基本語(yǔ)法：基本語(yǔ)法：  語(yǔ)法解析：一個(gè)半角空格使用一個(gè)語(yǔ)法解析：一個(gè)半角空格使用一個(gè) 表示，多個(gè)空格只需使用多表示，多個(gè)空格只需使用多次即可。次即可。注意：在建立注意：在建立HTML文件時(shí)，若利用鍵盤(pán)上的空格鍵來(lái)輸入數(shù)個(gè)空格，文件時(shí)，若利用鍵盤(pán)上的空格鍵來(lái)輸入數(shù)個(gè)空格，則則不論輸入的空格有多少個(gè)，都將被視為一個(gè)不論輸入的空格有多少個(gè)，都將被視為一個(gè)。3.1.3 特殊符號(hào)特殊符號(hào) 和空格的表示方法有些相似，一些特殊符號(hào)是憑借特殊的符號(hào)碼來(lái)實(shí)和空格的表示方法有些相似，一些特殊符號(hào)是憑借特殊的符號(hào)碼來(lái)實(shí)現(xiàn)的?，F(xiàn)的。通常由前綴通常

4、由前綴 & ，加上字符對(duì)應(yīng)的名稱(chēng)，再加上后綴，加上字符對(duì)應(yīng)的名稱(chēng)，再加上后綴 ; 組成。組成。 其源代碼中輸入相應(yīng)的符號(hào)碼，即可顯示符號(hào)。其源代碼中輸入相應(yīng)的符號(hào)碼，即可顯示符號(hào)。特殊符號(hào)表特殊符號(hào)表特殊符號(hào)特殊符號(hào)符號(hào)碼符號(hào)碼特殊符號(hào)特殊符號(hào)符號(hào)碼符號(hào)碼"§&¢>&middot©€®£±™×3.2 文字效果文字效果3.2.1 3.2.1 基準(zhǔn)文字（基準(zhǔn)文字（第二

5、章已經(jīng)講過(guò)第二章已經(jīng)講過(guò)）3.2.2 3.2.2 文字樣式文字樣式 設(shè)置文字效果有兩個(gè)標(biāo)簽，分別為設(shè)置文字效果有兩個(gè)標(biāo)簽，分別為和和，其中含義如，其中含義如下表所示：下表所示：標(biāo)簽標(biāo)簽含義含義基準(zhǔn)文字基準(zhǔn)文字文字文字文字效果文字效果3.2.1 基準(zhǔn)文字基準(zhǔn)文字基本語(yǔ)法：基本語(yǔ)法： 語(yǔ)法解析：語(yǔ)法解析： face定義了字體，多種字體間用定義了字體，多種字體間用, 分開(kāi)；分開(kāi)；size定義了字定義了字號(hào)，號(hào)，value取值范圍為取值范圍為17或或-1-7或或+1+7；color定義了顏定義了顏色，色，value值為英文名稱(chēng)或十六進(jìn)制代碼。值為英文名稱(chēng)或十六進(jìn)制代碼。3.2.2 文字樣式文字樣式 如

6、果希望更改頁(yè)面中的字體、字號(hào)和顏色，如果希望更改頁(yè)面中的字體、字號(hào)和顏色，最佳的選擇是使用最佳的選擇是使用標(biāo)簽標(biāo)簽。字體標(biāo)記用于控制文字的字體、大小與顏色?？刂频姆阶煮w標(biāo)記用于控制文字的字體、大小與顏色?？刂频姆绞绞抢脤傩栽O(shè)置來(lái)實(shí)現(xiàn)的。式是利用屬性設(shè)置來(lái)實(shí)現(xiàn)的。基本語(yǔ)法：基本語(yǔ)法： 語(yǔ)法解析：語(yǔ)法解析： face屬性定義了字體；屬性定義了字體； size屬性定義字號(hào)，屬性定義字號(hào)，value取值范取值范圍為圍為17或者或者+1+7、-1-7； color屬性定義了顏色，屬性定義了顏色，value取值為顏取值為顏色的名稱(chēng)或者十六進(jìn)制代碼。色的名稱(chēng)或者十六進(jìn)制代碼。3.3 文字的修飾文字的修飾3

7、.3.1 3.3.1 文字的基本修飾文字的基本修飾3.3.2 3.3.2 文字的上下標(biāo)文字的上下標(biāo)3.3.3 3.3.3 標(biāo)題文字標(biāo)題文字3.3.4 3.3.4 其他修飾其他修飾HTML標(biāo)簽類(lèi)型HTML修飾標(biāo)簽表修飾標(biāo)簽表標(biāo)簽標(biāo)簽含義含義標(biāo)簽標(biāo)簽含義含義粗體粗體下劃線(xiàn)下劃線(xiàn)粗體粗體刪除線(xiàn)刪除線(xiàn)斜體（強(qiáng)調(diào)）斜體（強(qiáng)調(diào)）刪除線(xiàn)刪除線(xiàn)斜體（標(biāo)記）斜體（標(biāo)記）地址地址斜體斜體打字機(jī)文字打字機(jī)文字上標(biāo)上標(biāo)閃爍文字閃爍文字Netscape下標(biāo)下標(biāo)等寬等寬大字號(hào)大字號(hào)等寬等寬小字號(hào)小字號(hào)鍵盤(pán)輸入文字鍵盤(pán)輸入文字聲明變量聲明變量3.3.1 文字的基本修飾文字的基本修飾字符級(jí)格式化用于對(duì)單個(gè)字母或單詞進(jìn)行強(qiáng)調(diào)。

8、字符級(jí)格式化用于對(duì)單個(gè)字母或單詞進(jìn)行強(qiáng)調(diào)。文字的基本修飾包括文字的基本修飾包括粗體、斜體、下劃線(xiàn)及刪除線(xiàn)粗體、斜體、下劃線(xiàn)及刪除線(xiàn)等。等。粗體粗體基本語(yǔ)法：基本語(yǔ)法： 語(yǔ)法解釋?zhuān)哼@兩個(gè)標(biāo)簽都可以表現(xiàn)文字粗體的效果。語(yǔ)法解釋?zhuān)哼@兩個(gè)標(biāo)簽都可以表現(xiàn)文字粗體的效果。斜體斜體基本語(yǔ)法：基本語(yǔ)法： 語(yǔ)法解釋?zhuān)赫Z(yǔ)法解釋?zhuān)?這這3個(gè)標(biāo)簽都可以表現(xiàn)文字斜體的效果。個(gè)標(biāo)簽都可以表現(xiàn)文字斜體的效果。下劃線(xiàn)下劃線(xiàn)基本語(yǔ)法：基本語(yǔ)法： 語(yǔ)法解釋?zhuān)簩⑽淖址旁跇?biāo)簽中間就可以實(shí)現(xiàn)文字的下劃線(xiàn)語(yǔ)法解釋?zhuān)簩⑽淖址旁跇?biāo)簽中間就可以實(shí)現(xiàn)文字的下劃線(xiàn)效果。效果。刪除線(xiàn)刪除線(xiàn)基本語(yǔ)法：基本語(yǔ)法： 語(yǔ)法解釋?zhuān)哼@兩個(gè)標(biāo)簽都可以在文字的中間

9、添加刪除線(xiàn)。語(yǔ)法解釋?zhuān)哼@兩個(gè)標(biāo)簽都可以在文字的中間添加刪除線(xiàn)。3.3.2 文字的上下標(biāo)文字的上下標(biāo)常見(jiàn)的數(shù)學(xué)表達(dá)式，可以將一段文字以小字體的方式顯示另一段文字常見(jiàn)的數(shù)學(xué)表達(dá)式，可以將一段文字以小字體的方式顯示另一段文字的右上角或右下角，這就是上下標(biāo)效果。的右上角或右下角，這就是上下標(biāo)效果。 基本語(yǔ)法：基本語(yǔ)法： 語(yǔ)法解釋?zhuān)赫Z(yǔ)法解釋?zhuān)?實(shí)現(xiàn)上標(biāo)效果，實(shí)現(xiàn)上標(biāo)效果，實(shí)現(xiàn)下標(biāo)效果。實(shí)現(xiàn)下標(biāo)效果。3.3.3 標(biāo)題文字標(biāo)題文字標(biāo)題（標(biāo)題（Heading）是通過(guò)）是通過(guò) - 等標(biāo)簽進(jìn)行定義的。等標(biāo)簽進(jìn)行定義的。 定義最大的標(biāo)題。定義最大的標(biāo)題。 定義最小的標(biāo)題。定義最小的標(biāo)題?；菊Z(yǔ)法：基本語(yǔ)法： 語(yǔ)法解

10、釋?zhuān)赫Z(yǔ)法解釋?zhuān)?n的取值為的取值為16。瀏覽器會(huì)自動(dòng)地在標(biāo)題的前后添加空行。瀏覽器會(huì)自動(dòng)地在標(biāo)題的前后添加空行。 請(qǐng)確保將請(qǐng)確保將 HTML heading 標(biāo)簽只用于標(biāo)題。不要僅僅是為了產(chǎn)生粗體標(biāo)簽只用于標(biāo)題。不要僅僅是為了產(chǎn)生粗體或大號(hào)的文本而使用標(biāo)題，或大號(hào)的文本而使用標(biāo)題，搜索引擎使用標(biāo)題為您的網(wǎng)頁(yè)的結(jié)構(gòu)和內(nèi)搜索引擎使用標(biāo)題為您的網(wǎng)頁(yè)的結(jié)構(gòu)和內(nèi)容編制索引容編制索引。3.3.4 其他修飾其他修飾大字號(hào)大字號(hào) 小字號(hào)小字號(hào) 地址文字地址文字 打字機(jī)打字機(jī) 鍵盤(pán)文字鍵盤(pán)文字 等寬文字等寬文字 聲明變量文字聲明變量文字 3.4 段落段落3.4.1 3.4.1 換行換行3.4.2 3.4.2 段

11、落段落3.4.3 3.4.3 不換行不換行3.4.4 3.4.4 預(yù)格式化預(yù)格式化3.4.5 3.4.5 居中居中3.4.6 3.4.6 縮排縮排3.4.7 3.4.7 忽略忽略HTMLHTML標(biāo)簽標(biāo)簽3.4.8 3.4.8 水平線(xiàn)水平線(xiàn)標(biāo)簽列表標(biāo)簽列表標(biāo)簽標(biāo)簽含義含義段落段落換行換行不換行不換行預(yù)格式化預(yù)格式化居中居中縮排縮排忽略忽略HTML標(biāo)簽標(biāo)簽水平線(xiàn)水平線(xiàn)3.4.1 換行換行標(biāo)簽表示強(qiáng)制換行。標(biāo)簽表示強(qiáng)制換行。換行標(biāo)簽是一個(gè)沒(méi)有結(jié)尾的標(biāo)簽，即換行標(biāo)簽是一個(gè)沒(méi)有結(jié)尾的標(biāo)簽，即無(wú)結(jié)束標(biāo)簽無(wú)結(jié)束標(biāo)簽 。此類(lèi)標(biāo)簽稱(chēng)之為。此類(lèi)標(biāo)簽稱(chēng)之為單單標(biāo)簽標(biāo)簽，也叫，也叫空標(biāo)簽空標(biāo)簽。在任何位置使用了在任何

12、位置使用了標(biāo)簽，當(dāng)文件顯示在瀏覽器中時(shí)，該標(biāo)簽之后標(biāo)簽，當(dāng)文件顯示在瀏覽器中時(shí)，該標(biāo)簽之后的內(nèi)容將顯示下一行的內(nèi)容將顯示下一行。3.4.2 段落段落HTML中，段落主要由標(biāo)簽中，段落主要由標(biāo)簽定義。定義。由由標(biāo)記所標(biāo)識(shí)的文字，代表同一個(gè)段落的文字。標(biāo)記所標(biāo)識(shí)的文字，代表同一個(gè)段落的文字。不同段落間的間距等于連續(xù)兩個(gè)換行符，不同段落間的間距等于連續(xù)兩個(gè)換行符，即隔一行空白行，以區(qū)別文即隔一行空白行，以區(qū)別文字的不同段落字的不同段落。單獨(dú)使用時(shí)，下一個(gè)單獨(dú)使用時(shí)，下一個(gè)的開(kāi)始就意味著上一個(gè)的開(kāi)始就意味著上一個(gè)的結(jié)束，的結(jié)束，良好的習(xí)良好的習(xí)慣是成對(duì)使用慣是成對(duì)使用。注：注：p為單詞為單詞parag

13、raph prgr:f 的首字母。的首字母。格式：格式： 思考：思考： 在一行文字中間輸入在一行文字中間輸入p，可以空出一行，那如果想，可以空出一行，那如果想空多行怎么辦？空多行怎么辦？left：左對(duì)齊：左對(duì)齊center：中對(duì)齊：中對(duì)齊right：右對(duì)齊：右對(duì)齊段落段落.html.html3.4.3 不換行不換行如果瀏覽器中單行文字的寬度過(guò)長(zhǎng)，則會(huì)自動(dòng)將該文字換行顯示，如果瀏覽器中單行文字的寬度過(guò)長(zhǎng)，則會(huì)自動(dòng)將該文字換行顯示，若若要取消文字因窗口大小而產(chǎn)生的換行要取消文字因窗口大小而產(chǎn)生的換行，就可以使用，就可以使用標(biāo)記。標(biāo)記?；菊Z(yǔ)法：基本語(yǔ)法：語(yǔ)法解釋?zhuān)赫Z(yǔ)法解釋?zhuān)?標(biāo)簽和標(biāo)簽和標(biāo)簽之間的

14、文字會(huì)顯示不自動(dòng)換行標(biāo)簽之間的文字會(huì)顯示不自動(dòng)換行的效果。的效果。補(bǔ)充：補(bǔ)充： 標(biāo)簽，在禁止換行標(biāo)記中強(qiáng)制換行，屬于單標(biāo)簽，即無(wú)結(jié)標(biāo)簽，在禁止換行標(biāo)記中強(qiáng)制換行，屬于單標(biāo)簽，即無(wú)結(jié)束標(biāo)簽束標(biāo)簽 時(shí)間，每天得到的都是二十四小時(shí)，可是一天的時(shí)間時(shí)間，每天得到的都是二十四小時(shí)，可是一天的時(shí)間給勤勉的給勤勉的人帶來(lái)智慧與力量，給懶散的人只能留下一片悔恨。人帶來(lái)智慧與力量，給懶散的人只能留下一片悔恨。魯迅魯迅 3.4.4 預(yù)格式化預(yù)格式化預(yù)格式化，就是保留文字在源代碼中的格式，預(yù)格式化，就是保留文字在源代碼中的格式，頁(yè)面中顯示的和源代碼頁(yè)面中顯示的和源代碼中的效果完全一致中的效果完全一致。瀏覽器在顯示其

15、中的內(nèi)容時(shí)，會(huì)完全按照其真正。瀏覽器在顯示其中的內(nèi)容時(shí)，會(huì)完全按照其真正的文本格式來(lái)顯示、原封不動(dòng)地保留文檔中的空白、空格及制表符等。的文本格式來(lái)顯示、原封不動(dòng)地保留文檔中的空白、空格及制表符等。HTML中，在通過(guò)瀏覽器顯示時(shí)保留某段文本原始文件排版方式，只中，在通過(guò)瀏覽器顯示時(shí)保留某段文本原始文件排版方式，只需在該段文本前后加上需在該段文本前后加上和和標(biāo)記即可。標(biāo)記即可?；菊Z(yǔ)法：基本語(yǔ)法：3.4.5 居中居中如果希望如果希望使段落或文字居中對(duì)齊使段落或文字居中對(duì)齊，可以使用專(zhuān)門(mén)的居中標(biāo)簽。被，可以使用專(zhuān)門(mén)的居中標(biāo)簽。被標(biāo)記所包含的組件，將以居中對(duì)齊的方式顯示在網(wǎng)頁(yè)中。標(biāo)記所包含的組件，將以

16、居中對(duì)齊的方式顯示在網(wǎng)頁(yè)中。基本語(yǔ)法：基本語(yǔ)法： 語(yǔ)法解釋?zhuān)赫Z(yǔ)法解釋?zhuān)?和和標(biāo)簽之間的文字就會(huì)實(shí)現(xiàn)自動(dòng)居中標(biāo)簽之間的文字就會(huì)實(shí)現(xiàn)自動(dòng)居中對(duì)齊的效果（對(duì)齊的效果（同時(shí)具有換行效果同時(shí)具有換行效果）。）。3.4.6 縮排縮排HTML縮排標(biāo)簽為縮排標(biāo)簽為。使用縮排標(biāo)簽，可以實(shí)現(xiàn)頁(yè)面文字的段落縮排效果，使用縮排標(biāo)簽，可以實(shí)現(xiàn)頁(yè)面文字的段落縮排效果，若想實(shí)現(xiàn)多次縮若想實(shí)現(xiàn)多次縮排則可以多次使用縮排標(biāo)簽排則可以多次使用縮排標(biāo)簽?；菊Z(yǔ)法：基本語(yǔ)法：語(yǔ)法解釋語(yǔ)法解釋 ：在要縮進(jìn)的文本前加入：在要縮進(jìn)的文本前加入標(biāo)簽以及在文本后標(biāo)簽以及在文本后加入加入標(biāo)簽，即可向右縮進(jìn)方式顯示該段文本。標(biāo)簽，即可向右縮進(jìn)方式

17、顯示該段文本。3.4.7 忽略忽略HTML標(biāo)簽標(biāo)簽HTML忽略標(biāo)簽：忽略標(biāo)簽： 或或?；菊Z(yǔ)法：基本語(yǔ)法： 語(yǔ)法解釋?zhuān)涸谡Z(yǔ)法解釋?zhuān)涸贖TML語(yǔ)言中加入語(yǔ)言中加入或或標(biāo)簽，可以將在標(biāo)簽，可以將在該標(biāo)簽后的該標(biāo)簽后的HTML標(biāo)簽失去標(biāo)示作用，而將內(nèi)容直接顯示在網(wǎng)頁(yè)頁(yè)面標(biāo)簽失去標(biāo)示作用，而將內(nèi)容直接顯示在網(wǎng)頁(yè)頁(yè)面中。中。3.4.8 水平線(xiàn)水平線(xiàn)水平線(xiàn)標(biāo)簽為水平線(xiàn)標(biāo)簽為，用于在段落與段落之間進(jìn)行分隔，從而使文檔的，用于在段落與段落之間進(jìn)行分隔，從而使文檔的結(jié)構(gòu)清晰明了，以及文字的編排整齊規(guī)范。水平線(xiàn)自身具有很多的屬結(jié)構(gòu)清晰明了，以及文字的編排整齊規(guī)范。水平線(xiàn)自身具有很多的屬性，如寬度、高度、顏色和排列

18、對(duì)齊等。性，如寬度、高度、顏色和排列對(duì)齊等?；菊Z(yǔ)法：基本語(yǔ)法： 語(yǔ)法解釋?zhuān)赫Z(yǔ)法解釋?zhuān)喝笔∏闆r下，水平線(xiàn)顯示為帶陰影的橫線(xiàn)，橫跨整個(gè)瀏覽缺省情況下，水平線(xiàn)顯示為帶陰影的橫線(xiàn)，橫跨整個(gè)瀏覽器窗口器窗口?？梢酝ㄟ^(guò)相應(yīng)屬性改變水平標(biāo)尺的陰影、寬度、高度和對(duì)齊?？梢酝ㄟ^(guò)相應(yīng)屬性改變水平標(biāo)尺的陰影、寬度、高度和對(duì)齊方式。方式。水平線(xiàn)屬性表水平線(xiàn)屬性表屬性屬性描述描述width寬度，可以是以絕對(duì)的像素單位，也可以是以相對(duì)的百分比單位寬度，可以是以絕對(duì)的像素單位，也可以是以相對(duì)的百分比單位size高度，高度，只能使用絕對(duì)的像素來(lái)定義只能使用絕對(duì)的像素來(lái)定義color顏色，顏色，用于定義水平線(xiàn)的顏色用于定義水平線(xiàn)的顏色noshade無(wú)陰影，無(wú)陰影，可以在頁(yè)面中去掉水平線(xiàn)的陰影可以在頁(yè)面中去掉水平線(xiàn)的陰影align排列，排列，設(shè)置水平線(xiàn)的居左、居中和居右對(duì)齊設(shè)置水平線(xiàn)的居左、居中和居右對(duì)齊本章總結(jié)本章總結(jié)3.1 編輯內(nèi)容編輯內(nèi)容3.1.1 注釋注釋3.1.2 空格符號(hào)空格符號(hào) 3.1.3 特殊符號(hào)特殊符號(hào)3.2 文字效果文字效果3.2.1 基底文