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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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