HTML基本語法

1、Page 1第第2章章 HTML基本語法基本語法 HTML語言與企業(yè)網(wǎng)站語言與企業(yè)網(wǎng)站Page 2學(xué)習(xí)目標(biāo)學(xué)習(xí)目標(biāo)v掌握文本格式標(biāo)簽掌握文本格式標(biāo)簽v了解字體標(biāo)簽了解字體標(biāo)簽v了解了解HTML的顏色機(jī)制的顏色機(jī)制v掌握?qǐng)D形鏈接、內(nèi)部鏈接和外部鏈接掌握?qǐng)D形鏈接、內(nèi)部鏈接和外部鏈接v掌握列表標(biāo)簽掌握列表標(biāo)簽Page 32.1 文本文本2.1.1 文本格式文本格式2.1.2 字體字體2.1.3 顏色顏色Page 42.1.1 文本格式文本格式 很多標(biāo)簽都可以用來改變文本的外觀，并為文很多標(biāo)簽都可以用來改變文本的外觀，并為文本關(guān)聯(lián)其隱藏的含義?？偟貋碚f，這些標(biāo)簽可以本關(guān)聯(lián)其隱藏的含義。總地來說，這些標(biāo)

2、簽可以分成兩類：基于內(nèi)容的樣式（分成兩類：基于內(nèi)容的樣式（content-based style）和物理樣式（）和物理樣式（physical style）。）。Page 52.1.1 文本格式文本格式v 基于內(nèi)容的樣式基于內(nèi)容的樣式 基于內(nèi)容的樣式標(biāo)簽會(huì)告訴瀏覽器它所包含的文本具有特定的含基于內(nèi)容的樣式標(biāo)簽會(huì)告訴瀏覽器它所包含的文本具有特定的含義、上下文或者用法。然后瀏覽器就會(huì)把與該含義、上下文或者義、上下文或者用法。然后瀏覽器就會(huì)把與該含義、上下文或者用法一致的格式應(yīng)用在文本上。請(qǐng)注意這里面的區(qū)別?；趦?nèi)容用法一致的格式應(yīng)用在文本上。請(qǐng)注意這里面的區(qū)別?；趦?nèi)容的標(biāo)簽賦予含義，而不是格式化。

3、因此，它們對(duì)于自動(dòng)處理來說的標(biāo)簽賦予含義，而不是格式化。因此，它們對(duì)于自動(dòng)處理來說非常重要；計(jì)算機(jī)并不關(guān)心文檔的外觀如何。非常重要；計(jì)算機(jī)并不關(guān)心文檔的外觀如何。 因?yàn)樽煮w樣式是通過語義線索來指定的，因此瀏覽器可以為用戶因?yàn)樽煮w樣式是通過語義線索來指定的，因此瀏覽器可以為用戶選擇一種合適的顯示樣式。由于不同地點(diǎn)的樣式各種各樣，所以選擇一種合適的顯示樣式。由于不同地點(diǎn)的樣式各種各樣，所以使用基于內(nèi)容的樣式可以幫助你確保自己的文檔對(duì)廣大范圍的讀使用基于內(nèi)容的樣式可以幫助你確保自己的文檔對(duì)廣大范圍的讀者來說都是有意義的。這一點(diǎn)在專門供那些盲人和殘疾人所使用者來說都是有意義的。這一點(diǎn)在專門供那些盲人和

4、殘疾人所使用的瀏覽器上顯得尤其重要，因?yàn)樗麄兊娘@示選項(xiàng)可能和我們傳統(tǒng)的瀏覽器上顯得尤其重要，因?yàn)樗麄兊娘@示選項(xiàng)可能和我們傳統(tǒng)的文本根本不同，或者在某方面具有非常大的局限性。的文本根本不同，或者在某方面具有非常大的局限性。Page 62.1.1 文本格式文本格式v 基于內(nèi)容的樣式基于內(nèi)容的樣式 當(dāng)前的當(dāng)前的 HTML 和和 XHTML 標(biāo)準(zhǔn)并沒有為每一個(gè)基于內(nèi)容的標(biāo)簽都標(biāo)準(zhǔn)并沒有為每一個(gè)基于內(nèi)容的標(biāo)簽都定義一種格式；它們僅僅規(guī)定必須用與文檔中普通文本不同的方定義一種格式；它們僅僅規(guī)定必須用與文檔中普通文本不同的方式來顯示基于內(nèi)容的樣式。標(biāo)準(zhǔn)甚至沒有要求這些基于內(nèi)容的樣式來顯示基于內(nèi)容的樣式。標(biāo)準(zhǔn)

5、甚至沒有要求這些基于內(nèi)容的樣式彼此之間都要用不同的方式顯示。在實(shí)際應(yīng)用中，你可能會(huì)發(fā)式彼此之間都要用不同的方式顯示。在實(shí)際應(yīng)用中，你可能會(huì)發(fā)現(xiàn)很多這樣的標(biāo)簽和傳統(tǒng)的印刷有著非常明顯的關(guān)系，它們有著現(xiàn)很多這樣的標(biāo)簽和傳統(tǒng)的印刷有著非常明顯的關(guān)系，它們有著相似的含義和顯示樣式，而且在多數(shù)瀏覽器中都以相同的樣式和相似的含義和顯示樣式，而且在多數(shù)瀏覽器中都以相同的樣式和字體來顯示。字體來顯示。 使用使用 HTML/XHTML 基于內(nèi)容的樣式標(biāo)簽時(shí)要遵從一些規(guī)則，因基于內(nèi)容的樣式標(biāo)簽時(shí)要遵從一些規(guī)則，因?yàn)閮H僅是簡(jiǎn)單地想想文本該如何顯示，而不必知道這些文本的含為僅僅是簡(jiǎn)單地想想文本該如何顯示，而不必知道這

6、些文本的含義是什么，是十分容易的。一旦你開始使用基于內(nèi)容的樣式之后，義是什么，是十分容易的。一旦你開始使用基于內(nèi)容的樣式之后，文檔將會(huì)更加一致，而且可以更好地幫助執(zhí)行自動(dòng)搜索和內(nèi)容編文檔將會(huì)更加一致，而且可以更好地幫助執(zhí)行自動(dòng)搜索和內(nèi)容編輯。輯。 Page 72.1.1 文本格式文本格式v基于內(nèi)容的樣式基于內(nèi)容的樣式 Page 82.1.1 文本格式文本格式v 物理樣式物理樣式 在討論基于內(nèi)容的樣式標(biāo)簽時(shí)，我們經(jīng)常用到在討論基于內(nèi)容的樣式標(biāo)簽時(shí)，我們經(jīng)常用到“意圖意圖”這個(gè)詞。這個(gè)詞。這是因?yàn)橛蓸?biāo)簽傳達(dá)的含義比瀏覽器顯示文本的方式更為重要。這是因?yàn)橛蓸?biāo)簽傳達(dá)的含義比瀏覽器顯示文本的方式更為重要

7、。然而，在某些情況下，可能是出于合法性或者版權(quán)等方面的原因然而，在某些情況下，可能是出于合法性或者版權(quán)等方面的原因的考慮，你希望文本以某種特殊的方式來顯示（例如斜體或加的考慮，你希望文本以某種特殊的方式來顯示（例如斜體或加粗）。在這種情況下，就可以對(duì)文本使用物理樣式。粗）。在這種情況下，就可以對(duì)文本使用物理樣式。 雖然其他文字處理系統(tǒng)的趨勢(shì)是精確地控制樣式和外觀，但是在雖然其他文字處理系統(tǒng)的趨勢(shì)是精確地控制樣式和外觀，但是在使用使用 HTML 或或 XHTML 時(shí)，除非極少情況下，都應(yīng)該避免使用物時(shí)，除非極少情況下，都應(yīng)該避免使用物理標(biāo)簽。應(yīng)當(dāng)盡可能地向?yàn)g覽器提供上下文信息，并使用基于內(nèi)理標(biāo)簽

8、。應(yīng)當(dāng)盡可能地向?yàn)g覽器提供上下文信息，并使用基于內(nèi)容的樣式。盡管現(xiàn)在瀏覽器不過是以斜體或者粗體字來顯示這些容的樣式。盡管現(xiàn)在瀏覽器不過是以斜體或者粗體字來顯示這些文本，但是將來的瀏覽器和各種文檔生成工具可能會(huì)以非常有創(chuàng)文本，但是將來的瀏覽器和各種文檔生成工具可能會(huì)以非常有創(chuàng)建的方式來利用這些基于內(nèi)容的樣式。建的方式來利用這些基于內(nèi)容的樣式。Page 92.1.1 文本格式文本格式v物理樣式物理樣式 當(dāng)前的當(dāng)前的 HTML/XHTML 標(biāo)準(zhǔn)一共提供了標(biāo)準(zhǔn)一共提供了 9 種物理樣式，種物理樣式，包括粗體（包括粗體（bold）、斜體（）、斜體（italic）、等寬）、等寬（monospaced）、下

9、劃線（）、下劃線（underlined）、刪除線）、刪除線（strikethrough）、放大（）、放大（larger）、縮?。⒖s?。╯maller）、上標(biāo)（）、上標(biāo)（superscripted）和下標(biāo)）和下標(biāo)（subscripted）文本。）文本。 Page 102.1.1 文本格式文本格式v物理樣式物理樣式 Page 112.1.1 文本格式文本格式v拓展標(biāo)簽拓展標(biāo)簽 Page 122.1.1 文本格式文本格式 從它們的適用的場(chǎng)合來看，又可以分為從它們的適用的場(chǎng)合來看，又可以分為“文本文本格式化格式化”、“計(jì)算機(jī)輸出計(jì)算機(jī)輸出”、“引用和術(shù)語定義引用和術(shù)語定義”三類標(biāo)簽。三類標(biāo)簽。Pag

10、e 132.1.1 文本格式文本格式v 文本格式化標(biāo)簽文本格式化標(biāo)簽標(biāo)簽標(biāo)簽描述描述定義粗體文本。定義大號(hào)字。定義著重文字。定義斜體字。定義小號(hào)字。定義加重語氣。定義下標(biāo)字。定義上標(biāo)字。定義插入字。定義刪除字。Page 142.1.1 文本格式文本格式v 計(jì)算機(jī)輸出標(biāo)簽計(jì)算機(jī)輸出標(biāo)簽標(biāo)簽標(biāo)簽描述描述定義計(jì)算機(jī)代碼。定義鍵盤碼。定義計(jì)算機(jī)代碼樣本。定義打字機(jī)代碼。定義變量。定義預(yù)格式文本。Page 152.1.1 文本格式文本格式v 引用和術(shù)語定義標(biāo)簽引用和術(shù)語定義標(biāo)簽標(biāo)簽標(biāo)簽描述描述定義縮寫。定義首字母縮寫。定義地址。定義文字方向。定義長(zhǎng)的引用。定義短的引用語。定義引用、引證。定義一個(gè)定義項(xiàng)目

11、。Page 162.1.1 文本格式文本格式v文本格式化實(shí)例文本格式化實(shí)例 詳見教材。詳見教材。Page 172.1.1 文本格式文本格式v預(yù)格式文本實(shí)例預(yù)格式文本實(shí)例 詳見教材詳見教材Page 182.1.1 文本格式文本格式v“計(jì)算機(jī)輸出計(jì)算機(jī)輸出”標(biāo)簽實(shí)例標(biāo)簽實(shí)例 詳見教材。詳見教材。Page 192.1.1 文本格式文本格式v地址實(shí)例地址實(shí)例 詳見教材。詳見教材。Page 202.1.1 文本格式文本格式v縮寫和首字母縮寫實(shí)例縮寫和首字母縮寫實(shí)例 詳見教材。詳見教材。Page 212.1.1 文本格式文本格式v文字方向?qū)嵗淖址较驅(qū)嵗?詳見教材。詳見教材。Page 222.1.1 文本

12、格式文本格式v塊引用實(shí)例塊引用實(shí)例 詳見教材。詳見教材。Page 232.1.1 文本格式文本格式v刪除字效果和插入字效果實(shí)例刪除字效果和插入字效果實(shí)例 詳見教材。詳見教材。Page 242.1.1 文本格式文本格式v實(shí)踐案例實(shí)踐案例 為個(gè)人主頁添加格式化標(biāo)簽。為個(gè)人主頁添加格式化標(biāo)簽。Page 252.1.2 字體字體v 字體標(biāo)簽字體標(biāo)簽font屬性屬性例子例子作用作用size=numbersize=2定義字體大小。size=+numbersize=+1增加字體的大小。size=-numbersize=-1減少字體的大小。face=face-nameface=Times定義字體名稱。colo

13、r=color-valuecolor=#eeff00定義字體顏色。color=color-namecolor=red定義字體顏色。Page 262.1.2 字體字體v請(qǐng)不要使用字體標(biāo)簽請(qǐng)不要使用字體標(biāo)簽 在最新的在最新的 HTML 版本（版本（HTML 4 和和 XHTML）中，字體）中，字體標(biāo)簽已被廢棄。標(biāo)簽已被廢棄。 萬維網(wǎng)聯(lián)盟已從其標(biāo)準(zhǔn)中刪除了字體標(biāo)簽，在未來，萬維網(wǎng)聯(lián)盟已從其標(biāo)準(zhǔn)中刪除了字體標(biāo)簽，在未來，樣式表（樣式表（CSS）將用來定義布局，以及顯示）將用來定義布局，以及顯示 HTML 元元素的屬性。素的屬性。Page 272.1.2 字體字體v實(shí)例：實(shí)例：A headingA pa

14、ragraph.Page 282.1.2 字體字體Page 292.1.2 字體字體v實(shí)踐案例實(shí)踐案例 為個(gè)人主頁添加字體標(biāo)簽。為個(gè)人主頁添加字體標(biāo)簽。Page 302.1.3 顏色顏色v顏色值顏色值 顏色由一個(gè)十六進(jìn)制符號(hào)來定義，這個(gè)符號(hào)由紅色、顏色由一個(gè)十六進(jìn)制符號(hào)來定義，這個(gè)符號(hào)由紅色、綠色和藍(lán)色的值組成（綠色和藍(lán)色的值組成（RGB）。）。 每種顏色的最小值是每種顏色的最小值是0（十六進(jìn)制：（十六進(jìn)制：#00）。最大值是）。最大值是255（十六進(jìn)制：（十六進(jìn)制：#FF）。）。Page 312.1.3 顏色顏色Color HEXColor RGB#000000 rgb(0,0,0)#FF0

15、000 rgb(255,0,0)#00FF00 rgb(0,255,0)#0000FF rgb(0,0,255)#FFFF00 rgb(255,255,0)#00FFFF rgb(0,255,255)#FF00FF rgb(255,0,255)#C0C0C0 rgb(192,192,192)#FFFFFF rgb(255,255,255)Page 322.1.3 顏色顏色v顏色名顏色名 大多數(shù)的瀏覽器都支持顏色名集合。大多數(shù)的瀏覽器都支持顏色名集合。 提示：僅僅有提示：僅僅有 16 種顏色名被種顏色名被 W3C 的的 HTML4.0 標(biāo)準(zhǔn)標(biāo)準(zhǔn)所支持。它們是：所支持。它們是：aqua, blac

16、k, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow。 如果需要使用其它的顏色，需要使用十六進(jìn)制的顏色如果需要使用其它的顏色，需要使用十六進(jìn)制的顏色值。值。Page 332.2 鏈接鏈接2.2.1 圖形鏈接圖形鏈接2.2.2 文檔內(nèi)鏈接文檔內(nèi)鏈接2.2.3 文檔外鏈接文檔外鏈接Page 342.2.1 圖形鏈接圖形鏈接v 錨標(biāo)簽和錨標(biāo)簽和 Href 屬性屬性 HTML 使用使用 （錨）標(biāo)簽來創(chuàng)建連接另一個(gè)文檔的鏈接。（錨）標(biāo)簽來創(chuàng)建連接另一個(gè)文檔的鏈接

17、。 錨可以指向網(wǎng)絡(luò)上的任何資源：一張錨可以指向網(wǎng)絡(luò)上的任何資源：一張 HTML 頁面，一幅圖像，一頁面，一幅圖像，一個(gè)聲音或視頻文件等等。個(gè)聲音或視頻文件等等。 創(chuàng)建錨的語法：創(chuàng)建錨的語法：Text to be displayed 用來創(chuàng)建錨。用來創(chuàng)建錨。href 屬性用于定位需要鏈接的文檔，錨的開始屬性用于定位需要鏈接的文檔，錨的開始標(biāo)簽和結(jié)束標(biāo)簽之間的文字被作為超級(jí)鏈接來顯示。標(biāo)簽和結(jié)束標(biāo)簽之間的文字被作為超級(jí)鏈接來顯示。 這個(gè)錨定義了指向這個(gè)錨定義了指向 www.js- 的鏈接：的鏈接：js-btesting!上面的這行在瀏覽器中顯示為這樣：上面的這行在瀏覽器中顯示為這樣：js-btes

18、ting!Page 352.2.1 圖形鏈接圖形鏈接實(shí)例：實(shí)例： 你可以使用圖像來作鏈接：你可以使用圖像來作鏈接： Page 362.2.1 圖形鏈接圖形鏈接Page 372.2.1 圖形鏈接圖形鏈接v實(shí)踐案例實(shí)踐案例 為個(gè)人主頁添加圖形鏈接。為個(gè)人主頁添加圖形鏈接。Page 382.2.2 文檔內(nèi)鏈接文檔內(nèi)鏈接v 錨標(biāo)簽和錨標(biāo)簽和 Name 屬性屬性 Name 屬性用于創(chuàng)建被命名的錨（屬性用于創(chuàng)建被命名的錨（named anchors）。當(dāng)使用命）。當(dāng)使用命名錨（名錨（named anchors）時(shí)，我們可以創(chuàng)建直接跳至頁面中某個(gè)）時(shí)，我們可以創(chuàng)建直接跳至頁面中某個(gè)節(jié)的鏈接，這樣使用者就無需

19、不停的滾動(dòng)頁面來尋找他們需要的節(jié)的鏈接，這樣使用者就無需不停的滾動(dòng)頁面來尋找他們需要的信息。信息。 以下是命名錨的語法：以下是命名錨的語法：Text to be displayed name 屬性用于創(chuàng)建命名錨。錨的名稱可以是任何你喜歡的名字。屬性用于創(chuàng)建命名錨。錨的名稱可以是任何你喜歡的名字。 下面這行定義了命名錨：下面這行定義了命名錨：Useful Tips Section 你會(huì)注意到，命名錨會(huì)以特殊的方式來顯示。你會(huì)注意到，命名錨會(huì)以特殊的方式來顯示。Page 392.2.2 文檔內(nèi)鏈接文檔內(nèi)鏈接v錨標(biāo)簽和錨標(biāo)簽和 Name 屬性屬性 將將 # 符號(hào)和錨名稱添加到符號(hào)和錨名稱添加到 UR

20、L 的末端，就可以直接鏈的末端，就可以直接鏈接到接到 tips 這個(gè)節(jié)，就像這樣：這個(gè)節(jié)，就像這樣： Jump to the Useful Tips SectionPage 402.2.2 文檔內(nèi)鏈接文檔內(nèi)鏈接Page 412.2.2 文檔內(nèi)鏈接文檔內(nèi)鏈接v有用的提示有用的提示 總是將正斜杠添加到子文件夾。總是將正斜杠添加到子文件夾。假如你這樣書寫鏈接的話：假如你這樣書寫鏈接的話：href=http:/www.js- HTTP 請(qǐng)請(qǐng)求。這是因?yàn)榉?wù)器會(huì)添加正斜杠到這個(gè)地址，然后求。這是因?yàn)榉?wù)器會(huì)添加正斜杠到這個(gè)地址，然后創(chuàng)建一個(gè)新的請(qǐng)求，就像這樣：創(chuàng)建一個(gè)新的請(qǐng)求，就像這樣：href=htt

21、p:/ 命名錨經(jīng)常被用在長(zhǎng)的文檔中創(chuàng)建目錄?？梢詾槊總€(gè)命名錨經(jīng)常被用在長(zhǎng)的文檔中創(chuàng)建目錄。可以為每個(gè)章節(jié)賦予一個(gè)命名錨，然后連接到這些錨的鏈接被置章節(jié)賦予一個(gè)命名錨，然后連接到這些錨的鏈接被置于文檔的上部。于文檔的上部。 假如瀏覽器找不到已定義的命名錨，那么就會(huì)定位到假如瀏覽器找不到已定義的命名錨，那么就會(huì)定位到文檔的頂端。不會(huì)有錯(cuò)誤發(fā)生。文檔的頂端。不會(huì)有錯(cuò)誤發(fā)生。Page 422.2.2 文檔內(nèi)鏈接文檔內(nèi)鏈接v文檔內(nèi)鏈接實(shí)例文檔內(nèi)鏈接實(shí)例 詳見教材。詳見教材。Page 432.2.2 文檔內(nèi)鏈接文檔內(nèi)鏈接v實(shí)踐案例實(shí)踐案例 為個(gè)人主頁添加文檔內(nèi)鏈接。為個(gè)人主頁添加文檔內(nèi)鏈接。Page 44

22、2.2.3 文檔外鏈接文檔外鏈接vTarget 屬性屬性 使用使用 Target 屬性，你可以定義被鏈接的文檔在何處顯屬性，你可以定義被鏈接的文檔在何處顯示。示。 下面的這行會(huì)在新窗口打開文檔：下面的這行會(huì)在新窗口打開文檔：js-btesting!Page 452.2.3 文檔外鏈接文檔外鏈接v文檔外鏈接實(shí)例文檔外鏈接實(shí)例 詳見教材。詳見教材。Page 462.2.3 文檔外鏈接文檔外鏈接v實(shí)踐案例實(shí)踐案例 為個(gè)人主頁添加文檔外鏈接和為個(gè)人主頁添加文檔外鏈接和mailto功能。功能。Page 472.3 列表列表2.3.1 無序號(hào)無序號(hào)2.3.2 有序號(hào)有序號(hào)Page 482.3.1 無序號(hào)無序號(hào) 無序列表是一個(gè)項(xiàng)目的列表，此列項(xiàng)目使用粗體圓點(diǎn)無序列表是一個(gè)項(xiàng)目的列表，此列項(xiàng)