HTML基本語法

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

2、簽可以分成兩類：基于內容的樣式（分成兩類：基于內容的樣式（content-based style）和物理樣式（）和物理樣式（physical style）。）。Page 52.1.1 文本格式文本格式v 基于內容的樣式基于內容的樣式 基于內容的樣式標簽會告訴瀏覽器它所包含的文本具有特定的含基于內容的樣式標簽會告訴瀏覽器它所包含的文本具有特定的含義、上下文或者用法。然后瀏覽器就會把與該含義、上下文或者義、上下文或者用法。然后瀏覽器就會把與該含義、上下文或者用法一致的格式應用在文本上。請注意這里面的區(qū)別?；趦热萦梅ㄒ恢碌母袷綉迷谖谋旧?。請注意這里面的區(qū)別?；趦热莸臉撕炠x予含義，而不是格式化。

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

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

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

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

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

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

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

10、e 132.1.1 文本格式文本格式v 文本格式化標簽文本格式化標簽標簽標簽描述描述定義粗體文本。定義大號字。定義著重文字。定義斜體字。定義小號字。定義加重語氣。定義下標字。定義上標字。定義插入字。定義刪除字。Page 142.1.1 文本格式文本格式v 計算機輸出標簽計算機輸出標簽標簽標簽描述描述定義計算機代碼。定義鍵盤碼。定義計算機代碼樣本。定義打字機代碼。定義變量。定義預格式文本。Page 152.1.1 文本格式文本格式v 引用和術語定義標簽引用和術語定義標簽標簽標簽描述描述定義縮寫。定義首字母縮寫。定義地址。定義文字方向。定義長的引用。定義短的引用語。定義引用、引證。定義一個定義項目

11、。Page 162.1.1 文本格式文本格式v文本格式化實例文本格式化實例 詳見教材。詳見教材。Page 172.1.1 文本格式文本格式v預格式文本實例預格式文本實例 詳見教材詳見教材Page 182.1.1 文本格式文本格式v“計算機輸出計算機輸出”標簽實例標簽實例 詳見教材。詳見教材。Page 192.1.1 文本格式文本格式v地址實例地址實例 詳見教材。詳見教材。Page 202.1.1 文本格式文本格式v縮寫和首字母縮寫實例縮寫和首字母縮寫實例 詳見教材。詳見教材。Page 212.1.1 文本格式文本格式v文字方向實例文字方向實例 詳見教材。詳見教材。Page 222.1.1 文本

12、格式文本格式v塊引用實例塊引用實例 詳見教材。詳見教材。Page 232.1.1 文本格式文本格式v刪除字效果和插入字效果實例刪除字效果和插入字效果實例 詳見教材。詳見教材。Page 242.1.1 文本格式文本格式v實踐案例實踐案例 為個人主頁添加格式化標簽。為個人主頁添加格式化標簽。Page 252.1.2 字體字體v 字體標簽字體標簽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請不要使用字體標簽請不要使用字體標簽 在最新的在最新的 HTML 版本（版本（HTML 4 和和 XHTML）中，字體）中，字體標簽已被廢棄。標簽已被廢棄。 萬維網聯(lián)盟已從其標準中刪除了字體標簽，在未來，萬維網聯(lián)盟已從其標準中刪除了字體標簽，在未來，樣式表（樣式表（CSS）將用來定義布局，以及顯示）將用來定義布局，以及顯示 HTML 元元素的屬性。素的屬性。Page 272.1.2 字體字體v實例：實例：A headingA pa

14、ragraph.Page 282.1.2 字體字體Page 292.1.2 字體字體v實踐案例實踐案例 為個人主頁添加字體標簽。為個人主頁添加字體標簽。Page 302.1.3 顏色顏色v顏色值顏色值 顏色由一個十六進制符號來定義，這個符號由紅色、顏色由一個十六進制符號來定義，這個符號由紅色、綠色和藍色的值組成（綠色和藍色的值組成（RGB）。）。 每種顏色的最小值是每種顏色的最小值是0（十六進制：（十六進制：#00）。最大值是）。最大值是255（十六進制：（十六進制：#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 標準標準所支持。它們是：所支持。它們是：aqua, blac

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

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

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

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

20、L 的末端，就可以直接鏈的末端，就可以直接鏈接到接到 tips 這個節(jié)，就像這樣：這個節(jié)，就像這樣： Jump to the Useful Tips SectionPage 402.2.2 文檔內鏈接文檔內鏈接Page 412.2.2 文檔內鏈接文檔內鏈接v有用的提示有用的提示 總是將正斜杠添加到子文件夾?？偸菍⒄备芴砑拥阶游募A。假如你這樣書寫鏈接的話：假如你這樣書寫鏈接的話：href=http:/www.js- HTTP 請請求。這是因為服務器會添加正斜杠到這個地址，然后求。這是因為服務器會添加正斜杠到這個地址，然后創(chuàng)建一個新的請求，就像這樣：創(chuàng)建一個新的請求，就像這樣：href=htt

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

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