HTML5入門經典
第一篇 基礎知識篇
第3章 HTML5網頁的基本要素
在網頁創作中，文字是最基本的元素之一。增加文字的易讀性，可讓流覽者在短時間內閱讀更多的文字、理解更多的資訊，同時也能為文字設置視覺上的效果，從而達到網頁創作者所追求的目標。
通過學習本章，讀者可以達到以下學習目的：
❑掌握標題文字的建立；
❑掌握設置文字格式；
❑掌握設置段落格式；
❑掌握水平線標記；
❑掌握其他文字標記。
3.1 從小到大——標題文字
在流覽器中的正文部分，可以顯示標題文字，所謂標題文字就是以某種固定的字型大小顯示文字。HTML文檔中的標題文字分別用來指明頁面上的1～6級標題。
3.1.1 標題字標記＜H＞
標題文字共包含6種標記，每一種的標題在字型大小上有明顯的區別，一般用標題來強調段落要表現的內容。在HTML中，6級標題從1級～6級依次遞減。
語法：
1級標題：＜h1＞...＜/h1＞
2級標題：＜h2＞...＜/h2＞
……
6級標題：＜h6＞...＜/h6＞
在該語法中，1級標題使用最大的字型大小表示，6級標題使用最小的字型大小。
【例3.1】觀察標題＜h1＞到＜h6＞的變化，代碼如下。
實例位置：光碟\MR\源碼\第3章\3.1
＜html＞
＜head＞
＜title＞標題文字的效果＜/title＞
＜/head＞
＜body＞
＜h1＞1級明日科技＜/h1＞
＜h2＞2級明日科技＜/h2＞
＜h3＞3級明日科技＜/h3＞
＜h4＞4級明日科技＜/h4＞
＜h5＞5級明日科技＜/h5＞
＜h6＞6級明日科技＜/h6＞
＜/body＞
＜/html＞
運行這段代碼可以看到網頁中6級不同大小的標題文字，如圖3.1所示。
圖 3.1 標題文字的效果
3.1.2 標題文字的對齊方式——align
預設情況下，標題文字是左對齊的。而在網頁製作的過程中，可以實現標題文字的編排設置。在標題標記中，最主要的屬性是align對齊屬性，用於定義標題段落的對齊方式，使頁面更加整齊。
語法：
align="對齊方式"
在該語法中，align屬性需要設置在標題標記的後面，標題字的對齊屬性如表3.1所示。
【例3.2】顯示align屬性的對齊方式，代碼如下。
實例位置：光碟\MR\源碼\第3章\3.2
＜html＞
＜head＞
＜title＞標題文字的對齊效果＜/title＞
＜/head＞
＜body＞
＜h1＞古詩介紹＜/h1＞
＜h2 align="center"＞作者辛棄疾＜/h2＞
＜h3 align="left"＞三更燈火五更雞,正是男兒發憤時＜/h3＞
＜h4 align="right"＞黑髮不知勤學早,白首方悔讀書遲＜/h4＞
＜/body＞
＜/html＞
運行這段代碼，可以看到不同對齊方式的標題效果，如圖3.2所示。
圖 3.2 標題文字的對齊效果
3.2 變化萬千——文字格式
除了標題文字外，在網頁中普通的文字資訊更是不可缺少的。而多種多樣的文字效果可以使網頁變得更加絢麗。
在網頁的編輯中，可以直接在文字的主體部分輸入文字，這些文字會顯示在頁面中。這是HTML語言編輯中最簡單的事情，只需要在＜body＞標記和＜/body＞標記之間輸入文字即可。設置不同的文字效果的屬性位於文字格式標記＜font＞中，下面將逐一講解各種文字格式的設置方式。
3.2.1 文字字體——face
在HTML語言中，可以通過face屬性設置文字的不同字體效果。設置的字體效果必須在流覽器安裝了相應的字體後才可以正確流覽，否則這些特殊字體會被流覽器中的普通字體所代替。因此，在網頁中儘量少用過多的特殊字體，以免在使用者流覽時無法看到正確的效果。由於流覽器預設情況下都包含了宋體、黑體等幾種基本字體，因此網頁的創建者應該注意在設計網頁時，多利用這幾種字體。
語法：
＜font face="字體1,字體2,..."＞應用了該字體的文字＜/font＞
在該語法中，face屬性的值可以是1個或者多個。預設情況下，使用第1種字體進行顯示；如果第1種字體不存在，則使用第2種字體進行代替，以此類推。如果設置的幾種字體在流覽器中都不存在，則會以預設字體顯示。
【例3.3】設置文字字體face的樣式，代碼如下。
實例位置：光碟\MR\源碼\第3章\3.3
＜html＞
＜head＞
＜title＞不同字體的顯示效果＜/title＞
＜/head＞
＜body＞
＜font face="華文彩雲"＞登山則情滿於山＜/font＞＜br/＞＜br/＞
＜font face="隸書"＞觀海則意溢於海＜/font＞
＜/body＞
＜/html＞
運行這段代碼，可以看到幾種不同的字體效果，如圖3.3所示。
圖 3.3 設置不同的文字字體
3.2.2 字型大小——size
HTML頁面中的文字可以使用不同的字型大小表現。字型大小指的是字體的大小，它沒有一個絕對的大小標準，其大小只是相對於預設字體而言。除了使用標題文字標記設置固定大小的字型大小之外，HTML語言提供了＜font＞標記的size屬性來設置普通文字的字型大小。
語法：
＜font size="文字字型大小"＞＜/font＞
在該語法中，文字的字型大小可以設置1～7，也可以是+1～+7或者是-1～-7。這些字型大小並沒有一個固定的大小值，而是相對於預設文字大小來設定的，預設文字的大小與3號字相同，而數值越大，文字也越大。
【例3.4】顯示字體的大小，代碼如下。
實例位置：光碟\MR\源碼\第3章\3.4
＜html＞
＜head＞
＜title＞設置不同的文字大小＜/title＞
＜/head＞
＜body＞
＜font size="1"＞1號字體的效果＜/font＞＜br/＞
＜font size="2"＞2號字體的效果＜/font＞＜br/＞
＜font size="3"＞3號字體的效果＜/font＞＜br/＞
＜font size="4"＞4號字體的效果＜/font＞＜br/＞
＜font size="5"＞5號字體的效果＜/font＞＜br/＞
＜font size="6"＞6號字體的效果＜/font＞＜br/＞
＜font size="7"＞7號字體的效果＜/font＞＜br/＞
＜font size="+2"＞默認字型大小+2，也就是5號字體的效果＜/font＞＜br/＞
＜font size="-1"＞默認字型大小-1，即2號字體的效果＜/font＞＜br/＞
＜/body＞
＜/html＞
運行這段代碼，可以看到文字的大小變化，其效果如圖3.4所示。
圖 3.4 設置不同的文字大小
3.2.3 文字顏色——color
在HTML頁面中，還可以通過不同的顏色表現不同的文字效果。豐富的字元顏色毫無疑問能夠極大地增強文字的表現力。
語法：
＜font color="顏色代碼"＞＜/font＞
與網頁背景色的設置類似，顏色內碼表是用十六進位表示的。
【例3.5】顯示文字的顏色，代碼如下。
實例位置：光碟\MR\源碼\第3章\3.5
＜html＞
＜head＞
＜title＞設置不同的文字顏色＜/title＞
＜/head＞
＜body＞
＜font face="隸書" size="+4" color="#0066FF"＞明日科技＜/font＞＜br/＞
＜font face="宋體" size="+5" color="#FFCC66"＞程式設計詞典＜/font＞＜br/＞
＜font face="華文楷體" size="+3" color="#99FF00"＞數位化出版的領導者＜/font＞＜br/＞
＜/body＞
＜/html＞
運行這段代碼，可看到不同色彩的文字效果，如圖3.5所示。
圖 3.5 設置不同的文字顏色
3.2.4 粗體、斜體、底線——strong、em、u
在流覽網頁時，還常常可以看到一些特殊效果的文字，例如粗體字、斜體字以及底線文字。而這些文字效果也可以通過設置HTML語言的標記來實現。
語法：
＜strong＞粗體的文字＜/strong＞
＜em＞斜體字＜/em＞
＜u＞帶底線的文字＜/u＞
這幾種效果的語法類似，只是標記不同。粗體的效果也可以通過標記＜b＞來實現；斜體字也可以使用標記＜I＞或者＜cite＞表示。
【例3.6】顯示文字的效果，代碼如下。
實例位置：光碟\MR\源碼\第3章\3.6
＜html＞
＜head＞
＜title＞設置不同的文字效果＜/title＞
＜/head＞
＜body＞
＜strong＞明日科技＜/strong＞＜u＞是數位化＜/u＞的＜cite＞宣導者＜/cite＞
＜/body＞
＜/html＞
運行這段代碼，可以看到不同的樣式效果，且使用不同的標記也可以達到相同的效果，如圖3.6所示。
圖 3.6 設置文字的不同樣式
3.2.5 上標與下標——sup、sub
除了設置不同的文字效果之外，有時候在網頁中還需要一種特殊的文字效果，即上標和下標，這在顯示公式時常常會出現。而在HTML語言中，也可以通過標記輕鬆地進行設置。
語法：
＜sup＞...＜/sup＞上標標記
＜sub＞...＜/sub＞下標標記
在該語法中，上標標記和下標標記的使用方法基本相同，只需要將文字放在標記中間即可。
【例3.7】顯示上標和下標的效果，代碼如下。
實例位置：光碟\MR\源碼\第3章\3.7
＜html＞
＜head＞
＜title＞上標與下標的效果＜/title＞
＜/head＞
＜body＞
在方程式中應用上標的效果＜br/＞
X＜sup＞3＜/sup＞+9X＜sup＞2＜/sup＞-3=0＜br/＞＜br/＞
在文字中應用下標的效果＜br/＞
3X＜sub＞1＜/sub＞+2X＜sub＞2＜/sub＞=10
＜/body＞
＜/html＞
運行這段代碼，可以看到如圖3.7所示的效果。
圖 3.7 上標與下標的效果
3.2.6 刪除線——strike
在網頁中可以通過strike參數對文字添加刪除線效果。
語法：
＜strike＞文字＜/strike＞
或＜s＞文字＜/s＞
這兩種標記都可以創建刪除線效果，使用起來也很簡單，只要把需要設置成刪除線效果的文字設置在標記中間即可。
【例3.8】顯示刪除線的效果，代碼如下。
實例位置：光碟\MR\源碼\第3章\3.8
＜html＞
＜head＞
＜title＞文字的刪除線效果＜/title＞
＜/head＞
＜body＞
正常的文字效果＜br/＞
在文字上使用s標記來添加刪除線＜br/＞
＜s＞刪除文字的效果＜/s＞＜br/＞＜br/＞
在文字上使用strike標記來添加刪除線＜br/＞
＜strike＞刪除文字的效果＜/strike＞
＜/body＞
＜/html＞
運行這段代碼，可以看到如圖3.8所示的效果。
圖 3.8 文字的刪除線效果
3.2.7 等寬文字標記——code
等寬文字標記常用于英文效果，使用該標記可以實現網頁中字體的等寬效果。使用等寬效果能夠使頁面顯得更加整齊。
語法：
＜code＞文字＜/code＞
或＜samp＞文字＜/samp＞
在該語法中的這兩種標記都可以實現文字的等寬顯示，而在應用時只要把需要等寬顯示的文字放置在標記中間即可。
【例3.9】使用＜code＞標記來顯示等寬文字，代碼如下。
實例位置：光碟\MR\源碼\第3章\3.9
＜html＞
＜head＞
＜title＞設置等寬文字＜/title＞
＜/head＞
＜body＞
下面將顯示兩段相同的英文效果，突出等寬文字與普通英文文字的對比效果。＜br/＞＜br/＞
＜!--下面這段英文使用了正常的效果顯示--＞
普通英文效果＜br/＞
A day
without sunshine is like night.＜br/＞＜br/＞
＜!--下面這段英文使用了等寬效果的效果顯示--＞
等寬文字效果＜br/＞
＜code＞A day without sunshine is like night.＜/code＞
＜/body＞
＜/html＞
運行這段代碼，可以看到如圖3.9所示的效果。
圖 3.9 等寬文字的效果
3.2.8 空格——＆nbsp;
一般情況下，在網頁中輸入文字時，如果在段落開始增加了空格，在使用流覽器進行流覽時往往看不到這些空格。這主要是因為在HTML檔中，流覽器本身會將兩個句子之間的所有半形空格僅當作一個來看待。如果需要保留空格的效果，一般需要使用全形空白字元號，或者通過空格碼來代替。下面將介紹如何應用空格碼來保留輸入文字中的空格效果。
語法：
＆nbsp;
在網頁中可以有多個空格，一個"＆nbsp;"只代表一個半形空格，多個空格則可以多次使用這一符號。
【例3.10】使用"＆nbsp;"代替空格，代碼如下。
實例位置：光碟\MR\源碼\第3章\3.10
＜html＞
＜head＞
＜title＞輸入空白字元號＜/title＞
＜/head＞
＜body＞
在段落開始輸入空白字元號的效果：＜br/＞
＆nbsp;＆nbsp;＆nbsp;＆nbsp;空格在網頁排版中常常被應用到，使用空白字元號在文字的前方輸入幾個空格，就可以實現首行縮進的效果。＜br/＞＜br/＞
在文字的中間不使用空白字元號，直接輸入6個半形空格的效果：＜br/＞
別裁偽體親風雅,轉益多師是汝師＜br/＞＜br/＞
使用空白字元號的效果：＜br/＞
別裁偽體親風雅,＆nbsp;＆nbsp;＆nbsp;＆nbsp;＆nbsp;＆nbsp;轉益多師是汝師＜br/＞
＜/body＞
＜/html＞
運行這段代碼，可以清楚地看到，不管在兩個句子間輸入了多少個半形空格，其中僅有一個半形的空白字元會被接受，其餘多出的空白字元將被忽略掉。而輸入空白字元號則可以完整地保留空格的效果，如圖3.10所示。
圖 3.10 在網頁中輸入空格
3.2.9 其他特殊符號
除了空格以外，在網頁的創作過程中，還有一些特殊的符號也需要使用代碼進行代替。一般情況下，特殊符號的代碼由首碼“＆”、字元名稱和尾碼“；”組成。使用方法與空白字元號類似，具體如表3.2所示。
說明 在需要輸入這些特殊符號的位置處，使用相應的代碼代替即可。
3.3 享有獨立——段落格式
文字屬性的設定我們已經做了介紹，文字的組合就是段落，在文本編輯視窗中，輸入完一段文字後，按下回車鍵後就生成了一個段落，而在HTML中可以通過標記實現段落的效果。下面具體介紹和段落相關的一些標記。
3.3.1 實現段落——p
在HTML語言中，有專門的標記標示段落。所謂段落，就是一段格式統一的文本。在文件視窗中，每輸入一段文字，按下回車鍵後，就自動生成一個段落。按下回車鍵的操作通常被稱作強制換行，可以說，段落就是帶有強制換行的文字組合。在HTML語言中，段落通過＜p＞標記來表示。
語法：
＜p＞段落文字＜/p＞
可以使用成對的＜p＞標記來包含段落，也可以使用單獨的＜p＞標記來劃分段落。
【例3.11】使用標記＜p＞表示段落格式，代碼如下。
實例位置：光碟\MR\源碼\第3章\3.11
＜html＞
＜head＞
＜title＞輸入段落文字＜/title＞
＜/head＞
＜body＞
＜p＞張而不弛,文武弗能也;＜/p＞
弛而不張,文武弗為也,一張一弛,文武之道也。＜p＞
＜/body＞
＜/html＞
運行這段代碼，可以看到使用兩種方法的段落標記都可以成功地將文字分段，如圖3.11所示。
圖 3.11 段落效果
3.3.2 取消文字換行標記——nobr
如果流覽器中單行文字的寬度過長，流覽器會自動將該文字換行顯示。如果希望強制流覽器不換行顯示，可以使用相應的標記。
語法：
＜nobr＞不換行顯示的文字＜/nobr＞
在標記之間的文字在顯示的過程中不會自動換行。
【例3.12】使用標記nobr表示取消文字換行，代碼如下。
實例位置：光碟\MR\源碼\第3章\3.12
＜html＞
＜head＞
＜title＞文字不換行顯示＜/title＞
＜/head＞
＜body＞
＜!--當流覽器寬度不夠時，文本內容會自動換行顯示--＞
World Wide
Web（萬維網WWW）是一種建立在Internrt上的、全球性的、交互的、多平臺的、分散式的資訊資源網路。它採用HTML語言描述超文字（Hypertext）檔。這裡所說的超文字指的是包含有連結關係的檔，並且包含了多媒體物件的檔。＜p＞
＜!--下面這段文字不會自動換顯示，當流覽器寬度不夠時，會出現捲軸--＞
＜p＞＜nobr＞World Wide Web（萬維網WWW）是一種建立在Internrt上的、全球性的、交互的、多平臺的、分散式的資訊資源網路。它採用HTML語言描述超文字（Hypertext）檔。這裡所說的超文字指的是包含有連結關係的檔，並且包含了多媒體物件的檔。＜/nobr＞＜/p＞
＜/body＞
＜/html＞
運行這段代碼，可以看到強制文字不換行的效果，如圖3.12所示。
圖 3.12 文字不換行顯示的效果
3.3.3 換行標記——br
段落與段落之間是隔行換行的，造成文字的行間距過大，這時可以使用換行標記來完成文字的緊湊換行顯示。
語法：
＜br/＞
一個＜br/＞標記代表一個換行，連續的多個標記可以多次換行。
【例3.13】使用標記br表示換行，代碼如下。
實例位置：光碟\MR\源碼\第3章\3.13
＜html＞
＜head＞
＜title＞文字的換行＜/title＞
＜/head＞
＜body＞
龔自珍＜br/＞＜br/＞
九州生氣恃風雷,萬馬齊喑究可哀。＜br/＞
我勸天公重抖擻,不拘一格降人才。＜br/＞
＜/body＞
＜/html＞
運行這段代碼，可以看到使用換行標記的效果，如圖3.13所示。
圖 3.13 文字的換行
3.3.4 保留原始排版方式標記——pre
在網頁創作中，一般是通過各種標記對文字進行排版的。但是在實際應用中，往往需要一些特殊的排版效果，這樣使用標記控制起來會比較麻煩。解決的方法就是保留文本格式的排版效果，例如空格、定位字元等。如果要保留原始的文本排版效果，則需要使用＜pre＞標記。
【例3.14】使用標記＜pre＞表示保留原始排版方式，代碼如下。
實例位置：光碟\MR\源碼\第3章\3.14
＜html＞
＜head＞
＜title＞保留原始排版方式＜/title＞
＜/head＞
＜body＞
＜p＞下面是原始文字的排版效果＜/p＞
＜pre＞
＜/pre＞
＜/body＞
＜/html＞
運行這段代碼，可以看到運行效果和代碼中的效果相同，如圖3.14所示。
圖 3.14 保留原始的排版方式
3.3.5 使文字水準居中——center
對於段落來說，和普通文字類似，有時候也需要將段落居中。在HTML語言中提供了專門的標記。
語法：
＜center＞文字＜/center＞
在標記之間的文字會自動居中顯示。
【例3.15】使用標記center表示居中對齊標記，代碼如下。
實例位置：光碟\MR\源碼\第3章\3.15
＜html＞
＜head＞
＜title＞文字的居中對齊＜/title＞
＜/head＞
＜body＞
＜center＞
＜p＞漢樂府《長歌行》＜/p＞
百川東到海,何時複西歸？＜br/＞
少壯不努力,老大徒傷悲。
＜/center＞
＜/body＞
＜/html＞
運行這段代碼，可以看到這首古詩居中顯示，如圖3.15所示。
圖 3.15 文字的居中顯示
3.3.6 文字段落的縮進——blockquote
使用＜blockquote＞標記可以實現頁面文字的段落縮進。這一標記每使用一次，段落就縮進一次，可以嵌套使用，以達到不同的縮進效果。
語法：
＜blockquote＞文字＜/blockquote＞
在該標記之間的文字會自動縮進。
【例3.16】使用標記blockquote表示向右縮進，代碼如下。
實例位置：光碟\MR\源碼\第3章\3.16
＜html＞
＜head＞
＜title＞段落的縮進效果＜/title＞
＜/head＞
＜body＞《荀子》
＜blockquote＞不登高山＜/blockquote＞
＜blockquote＞＜blockquote＞不知天之高也＜/blockquote＞＜/blockquote＞
＜blockquote＞＜blockquote＞＜blockquote＞不臨深溪＜/blockquote＞＜/blockquote＞＜/blockquote＞
＜blockquote＞＜blockquote＞＜blockquote＞＜blockquote＞
不知地之厚也＜/blockquote＞＜/blockquote＞＜/blockquote＞＜/blockquote＞
＜/body＞
＜/html＞
在上面的代碼中，多次嵌套使用了＜blockquote＞標記，運行這段代碼效果如圖3.16所示。
圖 3.16 段落的縮進效果
3.4 從頭到尾——水平線標記
水平線用於段落與段落之間的分隔，可使文檔結構清晰明白，使文字的編排更整齊。水平線自身具有很多的屬性，如寬度、高度、顏色、排列對齊等。在HTML文檔中經常會用到水平線，合理使用水平線可以獲得非常好的效果。一篇內容繁雜的文檔，如果合理地放置幾條水平線，就會變得層次分明，便於閱讀。
3.4.1 添加水平線——hr
語法：
＜hr＞
在網頁中輸入一個＜hr＞標記，就添加了一條預設樣式的水平線。
【例3.17】顯示添加水平線的標記＜hr＞，代碼如下。
實例位置：光碟\MR\源碼\第3章\3.17
＜html＞
＜head＞
＜title＞添加水平線＜/title＞
＜/head＞
＜body＞
＜center＞＜h4＞程式設計詞典個人版＜/h4＞＜/center＞
＜hr＞
程式設計詞典個人版是一套學、查、用為一體的數位化學習程式設計軟體。科學的學習模式、系統的學習方案，實現快速學習、快速提高，真正做到理論與實踐相結合。海量的資料資源，説明您解決在學習程式設計語言中遇到的問題。豐富的實戰資源，包括視頻、應用範例、模組和專案源碼，既能夠作為學習的資料，也可以應用到實戰中。
＜/body＞
＜/html＞
運行代碼，可以看到在網頁中出現了一條水平線，如圖3.17所示。
圖 3.17 添加水平線
3.4.2 水平線寬度與高度屬性——width、height
在預設情況下，在網頁中插入的水平線是100%的寬度，1圖元的高度，而在實際創建網頁時，可以對水平線的寬度和高度進行設置。
語法：
＜hr width=水平線寬度height=水平線高度＞
在該語法中，水平線的寬度值可以是確定的圖元值，也可以是視窗的百分比。而水平線的高度值則只能是圖元數。如果在創建水平線時只設置一個參數，那麼另外一個參數則會取預設值。
【例3.18】使用width、height設置水平線寬度與高度，代碼如下。
實例位置：光碟\MR\源碼\第3章\3.18
＜html＞
＜head＞
＜title＞設置水平線大小＜/title＞
＜/head＞
＜body＞
＜center＞
＜font face="隸書" size="+4"＞醉花陰＜/font＞
＜hr width="130"＞
＜font size="+3"＞李清照＜/font＞
＜/center＞
＜hr
width="85%"height="3"＞
＜p＞＆nbsp;＆nbsp;＆nbsp;＆nbsp;薄霧濃雲愁永晝，瑞腦銷金獸。＜br/＞
＆nbsp;＆nbsp;＆nbsp;＆nbsp;佳節又重陽，玉枕紗櫥，半夜涼透徹＜br/＞
＆nbsp;＆nbsp;＆nbsp;＆nbsp;東籬把酒黃昏後，有暗香盈袖＜br/＞
＆nbsp;＆nbsp;＆nbsp;＆nbsp;莫道不消魂，簾卷西風，人比黃花瘦。＜/p＞
＜hr size="5"＞
＜/body＞
＜/html＞
運行這段代碼，可以看到兩條高度和寬度不等的水平線效果，如圖3.18所示。
圖 3.18 設置水平線寬度和高度
3.4.3 水平線的顏色——color
為了使水平線更美觀，同整體頁面更協調，我們可以設置水平線的顏色。
語法：
＜hr color="顏色代碼"＞
顏色代碼是用十六進位表示的數值。
【例3.19】使用color設置水平線的顏色，代碼如下。
實例位置：光碟\MR\源碼\第3章\3.19
＜html＞
＜head＞
＜title＞設置水平線的顏色＜/title＞
＜/head＞
＜body＞
＜center＞＜font face="隸書" size="+5" color="#0066FF"＞吉林省明日科技有限公司＜/center＞
＜hr width="220"
height="3" color="#FFCC00"＞
＜p＞
吉林省明日科技有限公司是一家以電腦軟體技術為核心的高科技型企業，公司創建於2000年12月，是專業的應＜/p＞
＜!—省略部分代碼—＞
＜p＞＜strong＞企業宗旨＜/strong＞：為企業服務，打造企業智慧管理平臺，改善企業的管理與運作過程，提高企業效率，降低管理成本，增＜/p＞
＜p＞強企業核心競爭力。為企業快速發展提供源動力。＜/p＞
＜p＞＜strong＞企業精神＜/strong＞：博學、創新、求實、篤行＜/p＞
＜p＞＜strong＞公司理念＜/strong＞：以高新技術為依託，戰略性地開發具有巨大市場潛力的高價值的產品。＜/p＞
＜p＞＜strong＞公司遠景＜/strong＞：成為擁有核心技術和核心產品的高科技公司，在某些領域具有領先的市場地位。＜/p＞
＜p＞＜strong＞核心價值觀＜/strong＞：永葆創業激情、每一天都在進步、容忍失敗，鼓勵創新、充分信任、平等交流。＜/p＞
＜hr height="5"
color="#33FFFF"＞
＜/body＞
＜/html＞
運行這段代碼，可以看到顏色和長短不同的兩條水平線，而這兩條水平線將文章的主體映襯得更加醒目，如圖3.19所示。
圖 3.19 設置水平線的顏色
3.4.4 水平線的對齊方式——align
通過前面幾個實例可以看到，水平線在預設情況下是居中對齊的。如果希望水平線左對齊或右對齊，就需要使用align參數。
語法：
＜hr aligh="對齊方式"＞
在該語法中“對齊方式”可以有3種，包括left、center和right，其中，center的效果與默認效果相同。
【例3.20】使用align標記來設置水平線的對齊方式，代碼如下。
實例位置：光碟\MR\源碼\第3章\3.20
＜html＞
＜head＞
＜title＞設置水平線對齊方式＜/title＞
＜/head＞
＜body＞
＜font face="隸書" size="+3" color="#FF6600"＞蘇軾＜/font＞
＜hr width="130"
color="#996600" align="left"＞
古之成大事者,不惟有超士之才,亦有堅忍不拔之志。
＜p align="right"＞大家要牢記啊！
＜hr size="2"
width="120" color="#FF99CC" align="right"＞
＜/body＞
＜/html＞
運行這段代碼，可以看到分別位於左側和右側的不同效果的水平線，如圖3.20所示。
圖 3.20 設置水平線對齊方式
3.4.5 去掉水平線陰影——noshade
在預設情況下，水平線是空心帶陰影的立體效果，通過設置noshade參數可以將水平線的陰影去掉。
語法：
＜hr noshade＞
【例3.21】使用noshade參數來去掉水平線陰影，代碼如下。
實例位置：光碟\MR\源碼\第3章\3.21
＜html＞
＜head＞
＜title＞去掉水平線的陰影＜/title＞
＜/head＞
＜body＞
＜center＞
＜font face="隸書" size="+3" color="#00FF00"＞老子＜/font＞＜/center＞
＜hr width="130"
size="4"＞
＜p align="center"＞信言不美,美言不信。善者不辯,辯者不善＜/p＞
＜hr size="3"
noshade="noshade"/＞
＜/body＞
＜/html＞
運行代碼，可以看到如圖3.21所示的效果，上面的水平線是空心帶陰影的立體效果，而下面的水平線是通過noshade參數將陰影去除掉的效果。
圖 3.21 去掉水平線的陰影效果
3.5 其他文字標記
3.5.1 文字標注標記——ruby
在網頁中可以通過添加對文字的標注來說明網頁中的某段文字。
語法：
＜ruby＞
被說明的文字
＜rt＞
文字的標注
＜/rt＞
＜/ruby＞
在這段代碼中，被說明的文字就是網頁中需要添加標注的那段文字，而文字的標注則是真正的說明文字。
【例3.22】使用＜ruby＞標記來設置文字標注，代碼如下。
實例位置：光碟\MR\源碼\第3章\3.22
＜html＞
＜head＞
＜title＞添加文字標注＜/title＞
＜/head＞
＜body＞
＜ruby＞
有情芍藥含春淚,無力薔薇臥曉枝。＜br/＞＜br/＞
＜rt＞
作者秦觀
＜/rt＞
＜/ruby＞
＜/body＞
＜/html＞
運行這段代碼，可以在古詩的上面看到標注文字“作者秦觀”，如圖3.22所示。
圖 3.22 添加標注文字
說明 在預設情況下，標注文字很小，但是在HTML中也可以像設置其他文字一樣調整標注文字的各種屬性，包括大小、顏色等。
3.5.2 聲明變數標記——var
在使用網頁講解某些知識時，為了突出變數，常常將其設置為斜體。而在HTML中也提供了一種標記，專門用於設置變數的效果。
語法：
＜var＞變數＜/var＞
在標記之間的文字就以聲明變數的效果顯示。
【例3.23】使用＜var＞標記來聲明變數，代碼如下。
實例位置：光碟\MR\源碼\第3章\3.23
＜html＞
＜head＞
＜title＞聲明變數標記＜/title＞
＜/head＞
＜body＞
＜p＞所謂的定義變數就是給變數賦值。＜/p＞
定義變數的格式為：＜br/＞
變數名：數值或者運算式的值。＜br/＞
其中符號":="是定義符，又稱賦值符。＜b r/＞
＜p＞例如定義變數＜var＞x＜/var＞的值為＜var＞y+6＜/var＞,可以表示為：＜/p＞
＜p＞＜var＞x＜/var＞:=＜var＞y＜/var＞+6
＜/body＞
＜/html＞
運行這段代碼，可以看到如圖3.23所示的效果。
圖 3.23 聲明變數
3.5.3 忽視HTML標籤標記——plaintext、xmp
忽視HTML標籤標記主要是用來使HTML標記失去作用，而直接顯示在頁面中。這一標記在實際中應用並不多。
語法：
＜plaintext＞
或＜xmp＞
這兩個標記中的任何一個如果加入到HTML代碼中，都會使HTML標籤失去作用，一般放置在＜body＞標記之後。
【例3.24】使用plaintext、xmp標記來忽視HTML標籤，代碼如下。
實例位置：光碟\MR\源碼\第3章\3.24
＜html＞
＜head＞
＜title＞忽視HTML標籤標記＜/title＞
＜/head＞
＜body＞
＜plaintext＞
＜!--作者管于--＞
＜p＞一年之計,莫如樹穀;十年之計,莫如樹木;百年之計,莫如樹人。＜/p＞
＜/body＞
＜/html＞
運行程式的效果如圖3.24所示。
圖 3.24 忽視HTML標籤標記的作用
3.6 上機實踐
3.6.1 設置位元址文字標記＜address＞
題目描述
這個標記用於顯示E-mail、位元址等文字內容，主要用於英文字體的顯示中，效果如圖3.25所示。
圖 3.25 設置位元址文字標記
技術指導
這個標記的語法是：
＜address＞＜/address＞
在標記間的文字就是位元址等內容。
本上機實踐的關鍵代碼參考如下：
＜html＞
＜head＞
＜title＞頁面的位元址文字＜/title＞
＜/head＞
＜body＞
＜p＞這是一本專業詳盡的HTML書籍＜/p＞
有任何技術問題請聯繫：＜address＞www.mrbccd.com＜/address＞
＜/body＞
＜/html＞
3.6.2 基字標記＜basefont＞
題目描述
本練習中這個標記用於設定基本的文字屬性，對於字型大小，＜font size=+n＞...＜/font＞將受到這個基本字型大小的影響，效果如圖3.26所示。
圖 3.26 基字標記
技術指導
❑＜basefont＞標記中的定義將影響整個頁面。本上機實踐的關鍵代碼參考如下：
＜html＞
＜head＞
＜title＞基字對文字的影響＜/title＞
＜/head＞
＜body＞
這是一本＜basefont size=5
color="#009900" face="方正粗倩簡體"＞專業詳盡的HTML書籍
＜font size=+1
color="#008080"＞謝謝＜/font＞
＜font size=-1＞購買＜/font＞
＜/body＞
＜/html＞
3.6.3 在文字上方標注說明標記＜rt＞
題目描述
本練習被＜rt＞標記標示的文字，將以縮小字型大小的形式，顯示在以＜ruby＞標記標示的文字上方，用來說明 這段文字，效果如圖3.27所示。
圖 3.27 在文字上方標注說明
技術指導
使用語法：
＜ruby＞被標示的文字＜/ruby＞＜rt＞說明文字＜/rt＞
本上機實踐的關鍵代碼參考如下：
＜html＞
＜head＞
＜title＞在文字上方標注說明＜/title＞
＜/head＞
＜body＞
＜ruby＞
LOVE LIFE
＜rt＞愛生活＜/rt＞
＜/ruby＞
＜/body＞
＜/html＞
3.7 小結
本章主要講解了如何設置文字以及段落。文字是網頁設計最基礎的部分，一個標準的文字頁面可以起到傳達資訊的作用。通過本章的學習，讀者可以學會設置文字格式、段落格式以及水準線標記。在熟悉和掌握了各個知識點後，讀者可以在HTML中設置有個性的文字樣式。
3.8 習題
選擇題
1.HTML文本顯示狀態碼中，表示？（____）
A.文本加注下標
B.文本加注上標
C.文本閃爍
D.文本或圖片居中
2.創建最小的標題的文本標記是？（____）
A.＜pre＞＜/pre＞
B.＜h1＞＜/h1＞
C.＜h6＞＜/h6＞
D.＜b＞＜/b＞
3.創建黑體字的文本標記是？（____）
A.＜pre＞＜/pre＞
B.＜h1＞＜/h1＞
C.＜h6＞＜/h6＞
D.＜b＞＜/b＞
4.設置水平線高度的HTML代碼是？（____）。
A.＜hr＞
B.＜hr size=?＞
C.＜hr width=?＞
D.＜hr noshade＞
5.在HTML中，下麵是段落標記的是（）。
A.＜html＞...＜/html＞
B.＜head＞...＜/head＞
C.＜body＞...＜/body＞
D.＜p＞...＜/p＞
6.HTML代碼＜hr width=？＞表示（____）。
A.設置水平線的高度
B.設置水平線的寬度
C.創建一個沒有陰影的水平線
D.創建任意水平線
判斷題
1.HTML的段落標誌中，標注文本以原樣顯示的是＜pre＞＜/pre＞。（____）
2.HTML中，空格的代碼為"＆nbsp;"。（____）
3.標識＜b＞無需＜/b＞標識。（____）
0 留言:
發佈留言