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

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 空格符號空格符號 3.1.3 3.1.3 特殊符號特殊符號 在瀏覽器中顯示的文字內(nèi)容需要編寫在在瀏覽器中顯示的文字內(nèi)容需要編寫在標(biāo)簽中，這些內(nèi)標(biāo)簽中，這些內(nèi)容包括容包括普通的文字、空格符和特殊符號以及頁面的注釋語句普通的文字、空格符和特殊符號以及頁面的注釋語句等。常用等。常用的編輯內(nèi)容標(biāo)簽如下表所示：的編輯內(nèi)容標(biāo)簽如下表所示：標(biāo)簽標(biāo)簽含義含義注釋注釋 空格符等

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

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

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

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

6、果希望更改頁面中的字體、字號和顏色，如果希望更改頁面中的字體、字號和顏色，最佳的選擇是使用最佳的選擇是使用標(biāo)簽標(biāo)簽。字體標(biāo)記用于控制文字的字體、大小與顏色?？刂频姆阶煮w標(biāo)記用于控制文字的字體、大小與顏色。控制的方式是利用屬性設(shè)置來實現(xiàn)的。式是利用屬性設(shè)置來實現(xiàn)的?；菊Z法：基本語法： 語法解析：語法解析： face屬性定義了字體；屬性定義了字體； size屬性定義字號，屬性定義字號，value取值范取值范圍為圍為17或者或者+1+7、-1-7； color屬性定義了顏色，屬性定義了顏色，value取值為顏取值為顏色的名稱或者十六進(jìn)制代碼。色的名稱或者十六進(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)簽類型HTML修飾標(biāo)簽表修飾標(biāo)簽表標(biāo)簽標(biāo)簽含義含義標(biāo)簽標(biāo)簽含義含義粗體粗體下劃線下劃線粗體粗體刪除線刪除線斜體（強調(diào)）斜體（強調(diào)）刪除線刪除線斜體（標(biāo)記）斜體（標(biāo)記）地址地址斜體斜體打字機文字打字機文字上標(biāo)上標(biāo)閃爍文字閃爍文字Netscape下標(biāo)下標(biāo)等寬等寬大字號大字號等寬等寬小字號小字號鍵盤輸入文字鍵盤輸入文字聲明變量聲明變量3.3.1 文字的基本修飾文字的基本修飾字符級格式化用于對單個字母或單詞進(jìn)行強調(diào)。

8、字符級格式化用于對單個字母或單詞進(jìn)行強調(diào)。文字的基本修飾包括文字的基本修飾包括粗體、斜體、下劃線及刪除線粗體、斜體、下劃線及刪除線等。等。粗體粗體基本語法：基本語法： 語法解釋：這兩個標(biāo)簽都可以表現(xiàn)文字粗體的效果。語法解釋：這兩個標(biāo)簽都可以表現(xiàn)文字粗體的效果。斜體斜體基本語法：基本語法： 語法解釋：語法解釋： 這這3個標(biāo)簽都可以表現(xiàn)文字斜體的效果。個標(biāo)簽都可以表現(xiàn)文字斜體的效果。下劃線下劃線基本語法：基本語法： 語法解釋：將文字放在標(biāo)簽中間就可以實現(xiàn)文字的下劃線語法解釋：將文字放在標(biāo)簽中間就可以實現(xiàn)文字的下劃線效果。效果。刪除線刪除線基本語法：基本語法： 語法解釋：這兩個標(biāo)簽都可以在文字的中間

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

10、釋：語法解釋： n的取值為的取值為16。瀏覽器會自動地在標(biāo)題的前后添加空行。瀏覽器會自動地在標(biāo)題的前后添加空行。 請確保將請確保將 HTML heading 標(biāo)簽只用于標(biāo)題。不要僅僅是為了產(chǎn)生粗體標(biāo)簽只用于標(biāo)題。不要僅僅是為了產(chǎn)生粗體或大號的文本而使用標(biāo)題，或大號的文本而使用標(biāo)題，搜索引擎使用標(biāo)題為您的網(wǎng)頁的結(jié)構(gòu)和內(nèi)搜索引擎使用標(biāo)題為您的網(wǎng)頁的結(jié)構(gòu)和內(nèi)容編制索引容編制索引。3.3.4 其他修飾其他修飾大字號大字號 小字號小字號 地址文字地址文字 打字機打字機 鍵盤文字鍵盤文字 等寬文字等寬文字 聲明變量文字聲明變量文字 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 水平線水平線標(biāo)簽列表標(biāo)簽列表標(biāo)簽標(biāo)簽含義含義段落段落換行換行不換行不換行預(yù)格式化預(yù)格式化居中居中縮排縮排忽略忽略HTML標(biāo)簽標(biāo)簽水平線水平線3.4.1 換行換行標(biāo)簽表示強制換行。標(biāo)簽表示強制換行。換行標(biāo)簽是一個沒有結(jié)尾的標(biāo)簽，即換行標(biāo)簽是一個沒有結(jié)尾的標(biāo)簽，即無結(jié)束標(biāo)簽無結(jié)束標(biāo)簽 。此類標(biāo)簽稱之為。此類標(biāo)簽稱之為單單標(biāo)簽標(biāo)簽，也叫，也叫空標(biāo)簽空標(biāo)簽。在任何位置使用了在任何

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

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

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

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

16、居中對齊的方式顯示在網(wǎng)頁中?；菊Z法：基本語法： 語法解釋：語法解釋： 和和標(biāo)簽之間的文字就會實現(xiàn)自動居中標(biāo)簽之間的文字就會實現(xiàn)自動居中對齊的效果（對齊的效果（同時具有換行效果同時具有換行效果）。）。3.4.6 縮排縮排HTML縮排標(biāo)簽為縮排標(biāo)簽為。使用縮排標(biāo)簽，可以實現(xiàn)頁面文字的段落縮排效果，使用縮排標(biāo)簽，可以實現(xiàn)頁面文字的段落縮排效果，若想實現(xiàn)多次縮若想實現(xiàn)多次縮排則可以多次使用縮排標(biāo)簽排則可以多次使用縮排標(biāo)簽?；菊Z法：基本語法：語法解釋語法解釋 ：在要縮進(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法：基本語法： 語法解釋：在語法解釋：在HTML語言中加入語言中加入或或標(biāo)簽，可以將在標(biāo)簽，可以將在該標(biāo)簽后的該標(biāo)簽后的HTML標(biāo)簽失去標(biāo)示作用，而將內(nèi)容直接顯示在網(wǎng)頁頁面標(biāo)簽失去標(biāo)示作用，而將內(nèi)容直接顯示在網(wǎng)頁頁面中。中。3.4.8 水平線水平線水平線標(biāo)簽為水平線標(biāo)簽為，用于在段落與段落之間進(jìn)行分隔，從而使文檔的，用于在段落與段落之間進(jìn)行分隔，從而使文檔的結(jié)構(gòu)清晰明了，以及文字的編排整齊規(guī)范。水平線自身具有很多的屬結(jié)構(gòu)清晰明了，以及文字的編排整齊規(guī)范。水平線自身具有很多的屬性，如寬度、高度、顏色和排列

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