第2章HTML、XHTML標準

1、中國高等院校計算機基礎(chǔ)教育課程體系規(guī)劃教材基于基于Web標準的網(wǎng)頁設計標準的網(wǎng)頁設計第二章 HTML、XHTML與Web標準 本章要點vHTML文檔的基本結(jié)構(gòu)文檔的基本結(jié)構(gòu)v標記標記(Tags)和元素和元素( Elements ) HTML標記的分類 行內(nèi)元素和塊級元素v2.3 從從HTML到到XHTML的轉(zhuǎn)變的轉(zhuǎn)變 html存在的問題和web標準 XHTML與HTML的區(qū)別 (X)HTML文檔的基本結(jié)構(gòu)：告訴瀏覽器：告訴瀏覽器HTML文檔開文檔開始和結(jié)束的位置，其中包括始和結(jié)束的位置，其中包括head部分和部分和body部分。部分。HTML文檔中所有的內(nèi)容都應該在這文檔中所有的內(nèi)容都應該在這

2、兩個標記之間，一個兩個標記之間，一個HTML文檔總是以文檔總是以開始，以開始，以結(jié)束。結(jié)束。：HTML文件的頭部標記，頭文件的頭部標記，頭部主要提供文檔的描述信息，部主要提供文檔的描述信息，head部分的所有部分的所有內(nèi)容都不會顯示在瀏覽器窗口中，在其中可以內(nèi)容都不會顯示在瀏覽器窗口中，在其中可以放置放置頁面的標題頁面的標題以及以及頁面的類型頁面的類型、使用的字符、使用的字符集、鏈接的其它腳本或樣式文件等內(nèi)容集、鏈接的其它腳本或樣式文件等內(nèi)容：用來指明文檔的主體區(qū)域，：用來指明文檔的主體區(qū)域，網(wǎng)頁所要顯示的內(nèi)容都放在這個標記內(nèi)，其網(wǎng)頁所要顯示的內(nèi)容都放在這個標記內(nèi)，其結(jié)束標記結(jié)束標記指明主體區(qū)

3、域的結(jié)束指明主體區(qū)域的結(jié)束 編寫HTML網(wǎng)頁文檔的方法vHTML文檔是一個純文本文件，可以使用任何文文檔是一個純文本文件，可以使用任何文本編輯器編寫保存本編輯器編寫保存v使用使用記事本記事本編輯一個編輯一個html文件文件v使用使用Dreamweaver新建一個新建一個html文件文件標記(Tags)和元素（Elements） v 標記是標記是HTML文檔中一些有特定意義的符號，這些符號指文檔中一些有特定意義的符號，這些符號指明明內(nèi)容的含義或結(jié)構(gòu)內(nèi)容的含義或結(jié)構(gòu)。標記總是放在三角括號中，大多數(shù)。標記總是放在三角括號中，大多數(shù)標記都是標記都是成對成對出現(xiàn)的，表示開始和結(jié)束。出現(xiàn)的，表示開始和結(jié)束

4、。v 把把HTML標記如標記如和標記之間的內(nèi)容組合稱為和標記之間的內(nèi)容組合稱為元元素素。網(wǎng)頁中文字，圖像，鏈接等所有的內(nèi)容都是以。網(wǎng)頁中文字，圖像，鏈接等所有的內(nèi)容都是以元素元素的的形式出現(xiàn)在形式出現(xiàn)在html代碼里的。標記相同而標記中的內(nèi)容不同代碼里的。標記相同而標記中的內(nèi)容不同應視為不同的元素，同一網(wǎng)頁中標記和標記中的內(nèi)容都相應視為不同的元素，同一網(wǎng)頁中標記和標記中的內(nèi)容都相同的元素如果出現(xiàn)兩次也應視為兩個不同的元素，因為任同的元素如果出現(xiàn)兩次也應視為兩個不同的元素，因為任一個元素在網(wǎng)頁中瀏覽器都會為它分配唯一的一個元素在網(wǎng)頁中瀏覽器都會為它分配唯一的id，不存在，不存在兩個元素的兩個元素

5、的id也完全相同的情況。也完全相同的情況。 例1 下面body內(nèi)元素的個數(shù)是多少圖片的說明內(nèi)容圖片的說明內(nèi)容圖片的說明內(nèi)容圖片的說明內(nèi)容答案答案：5個，即個，即1個個a元素、元素、1個個img元素、元素、2個個p元素元素和和1個個hr元素。元素。 帶有屬性的HTML元素的結(jié)構(gòu) /例2 找出下面html代碼的錯誤v下列下列HTML元素的寫法錯在什么地方？元素的寫法錯在什么地方？vv Congratulations! vlinked textvThis is a new paragraph1.The list itemHTML標記 的分類v頭部標記：頭部標記：title, meta, link,

6、stylev文本標記：文本標記：font, b, i, u , strong,v段落標記：段落標記：p, hn, pre, marquee, br, hrv列表標記：列表標記：ul, ol, li, dl, dt, dd5)超鏈接標記：超鏈接標記：a, map, area6)圖像及媒體元素標記：圖像及媒體元素標記：img, embed, object7)表格標記：表格標記：table, tr, td, th, tbody8)表單標記：表單標記：form, input, textarea, select, option, fieldset, legend9)框架標記：框架標記：frameset,

7、 frame, iframe10)容器標記：容器標記：div, spanHTML標記 的分類（2）為便于記憶，可將標記按出現(xiàn)的情況分為：為便于記憶，可將標記按出現(xiàn)的情況分為：v單標記單標記：， ， ， v配對標記配對標記：大部分標記都是配對標記：大部分標記都是配對標記1.成組標記成組標記：table，form，ul, ol, dl, frameset，fieldset及其子標記等，配對標記中很多都是成及其子標記等，配對標記中很多都是成組標記組標記 行內(nèi)元素和塊級元素 v行內(nèi)元素行內(nèi)元素(inline)是指元素與元素之間從左到右并是指元素與元素之間從左到右并排排列，只有當瀏覽器窗口容納不下才會轉(zhuǎn)

8、到下排排列，只有當瀏覽器窗口容納不下才會轉(zhuǎn)到下一行，一行，塊級元素塊級元素(block)是指每個元素占據(jù)瀏覽器是指每個元素占據(jù)瀏覽器一整行位置，塊級元素與塊級元素之間自動換行，一整行位置，塊級元素與塊級元素之間自動換行，從上到下排列。從上到下排列。v塊級元素內(nèi)部可包含行內(nèi)元素或塊級元素，行內(nèi)塊級元素內(nèi)部可包含行內(nèi)元素或塊級元素，行內(nèi)元素內(nèi)部可包含行內(nèi)元素，但不得包含塊級元素，元素內(nèi)部可包含行內(nèi)元素，但不得包含塊級元素，另外，塊級元素另外，塊級元素元素內(nèi)部也不能包含其他的元素內(nèi)部也不能包含其他的塊級元素塊級元素 行內(nèi)元素和塊級元素舉例v行內(nèi)元素：行內(nèi)元素：a，img，font，b，i，u， sp

9、an，inputv塊級元素：塊級元素：p, div, hn, pre, hr, ul, ol, li, form v快速記憶法：即所有文本標記，鏈接標記和圖像快速記憶法：即所有文本標記，鏈接標記和圖像標記是行內(nèi)元素標記是行內(nèi)元素v所有段落標記，列表標記是塊級元素所有段落標記，列表標記是塊級元素行內(nèi)元素和塊級元素示例粗體文字粗體文字圖片的標題圖片的標題圖片的說明內(nèi)容圖片的說明內(nèi)容粗體文字粗體文字粗體文字粗體文字常見的html標記的屬性v公共屬性：公共屬性：v align（對齊方式），（對齊方式），border（邊框），（邊框），title（提（提示文字），示文字），src（鏈接的文件路徑），（鏈

10、接的文件路徑），style（引入（引入CSS行內(nèi)樣式），行內(nèi)樣式），id，namev特有屬性：特有屬性： vhtml存在的問題和web標準 v HTML語言最開始是用來描述語言最開始是用來描述文檔的結(jié)構(gòu)文檔的結(jié)構(gòu)的，如標題，段的，如標題，段落等標記，后來因為人們還想用它控制落等標記，后來因為人們還想用它控制文檔的外觀文檔的外觀，HTML又增加了一些控制字體，對齊等方面的標記和屬性，又增加了一些控制字體，對齊等方面的標記和屬性，這樣做的結(jié)果是這樣做的結(jié)果是HTML既可以用來描述文檔的結(jié)構(gòu)，又能既可以用來描述文檔的結(jié)構(gòu)，又能表示文檔的外觀，但是兩方面都描述不好。表示文檔的外觀，但是兩方面都描述不好

11、。v 于是人們想出了于是人們想出了web標準，即標準，即結(jié)構(gòu)結(jié)構(gòu)和和表現(xiàn)表現(xiàn)分離，網(wǎng)頁由分離，網(wǎng)頁由結(jié)結(jié)構(gòu)構(gòu)，表現(xiàn)表現(xiàn)和和行為行為組成，用組成，用HTML的新版本的新版本XHTML描述文描述文檔的結(jié)構(gòu)，檔的結(jié)構(gòu)，XHTML是一種為了適應是一種為了適應XML而重新改造的而重新改造的HTML。用。用CSS控制文檔的表現(xiàn)，因此控制文檔的表現(xiàn)，因此XHTML和和CSS就就是內(nèi)容和形式的關(guān)系，由是內(nèi)容和形式的關(guān)系，由XHTML確定網(wǎng)頁的內(nèi)容，而通確定網(wǎng)頁的內(nèi)容，而通過過CSS來決定頁面的表現(xiàn)形式。來決定頁面的表現(xiàn)形式。 Web標準v網(wǎng)頁由結(jié)構(gòu)，表現(xiàn)和行為組成，網(wǎng)頁由結(jié)構(gòu)，表現(xiàn)和行為組成，v1內(nèi)容：內(nèi)容就

12、是頁面實際要傳達的真正信息，內(nèi)容：內(nèi)容就是頁面實際要傳達的真正信息，包含數(shù)據(jù)、文檔或者圖片等。注意這里強調(diào)的包含數(shù)據(jù)、文檔或者圖片等。注意這里強調(diào)的“真正真正”，是指，是指純粹的數(shù)據(jù)信息純粹的數(shù)據(jù)信息本身。本身。v如：如：憶江南憶江南(1)唐唐.白居易江南好，風景舊曾諳。白居易江南好，風景舊曾諳。(2)日出江花紅勝火，春來江水綠如藍，日出江花紅勝火，春來江水綠如藍，(3)能不憶江能不憶江南。作者介紹南。作者介紹772846 ，字樂天，太原人。唐德，字樂天，太原人。唐德宗朝進士宗朝進士v2結(jié)構(gòu)：可以看到上面的文本信息本身已經(jīng)完整。結(jié)構(gòu)：可以看到上面的文本信息本身已經(jīng)完整。但是混亂一團，難以閱讀和

13、理解，我們必須給它但是混亂一團，難以閱讀和理解，我們必須給它格式化一下。格式化一下。把它分成標題、作者、章、節(jié)、段把它分成標題、作者、章、節(jié)、段落和列表等落和列表等。 Web標準結(jié)構(gòu)v標題標題 憶江南憶江南(1)作者作者 唐唐.白居易白居易正文正文江南好，風景舊曾諳。江南好，風景舊曾諳。(2)日出江花紅勝火，春來江水綠如藍，日出江花紅勝火，春來江水綠如藍，(3)能不憶江南。能不憶江南。節(jié)節(jié)1作者介紹作者介紹772846 ，字樂天，太原人。唐德宗朝進士，字樂天，太原人。唐德宗朝進士 Web標準表現(xiàn)v 表現(xiàn)（表現(xiàn)（Presentation）：雖然定義了結(jié)構(gòu)，但是內(nèi)容還是）：雖然定義了結(jié)構(gòu)，但是內(nèi)容

14、還是原來的樣式?jīng)]有改變，例如標題字體沒有變大，正文的顏原來的樣式?jīng)]有改變，例如標題字體沒有變大，正文的顏色也沒有變化，沒有背景，沒有修飾。所有這些用來色也沒有變化，沒有背景，沒有修飾。所有這些用來改變改變內(nèi)容外觀的東西內(nèi)容外觀的東西，我們稱之為，我們稱之為“表現(xiàn)表現(xiàn)” 行為v行為：就是對內(nèi)容的交互及操作效果。例如，使行為：就是對內(nèi)容的交互及操作效果。例如，使用用JavaScript可以響應鼠標的點擊和移動，可以可以響應鼠標的點擊和移動，可以判斷一些表單提交，使我們的操作能和網(wǎng)頁進行判斷一些表單提交，使我們的操作能和網(wǎng)頁進行交互。交互。 網(wǎng)頁的組成行為層行為層內(nèi)容如何對事件做出響應內(nèi)容如何對事件

15、做出響應表現(xiàn)層表現(xiàn)層內(nèi)容如何顯示內(nèi)容如何顯示結(jié)構(gòu)層結(jié)構(gòu)層內(nèi)容的語義內(nèi)容的語義內(nèi)容層內(nèi)容層內(nèi)容內(nèi)容網(wǎng)頁是由四層信息構(gòu)成的一個共同體：網(wǎng)頁是由四層信息構(gòu)成的一個共同體：Web標準的實現(xiàn)v結(jié)構(gòu)標準語言結(jié)構(gòu)標準語言（1）XML（2）XHTMLv表現(xiàn)標準語言表現(xiàn)標準語言CSS（Cascading Style Sheets，層疊樣式表）v行為標準語言行為標準語言JavaScriptWeb標準網(wǎng)頁示例結(jié)結(jié) 構(gòu)構(gòu)表表 現(xiàn)現(xiàn)行行 為為XHTMLCSSJavaScriptXHTML與HTML的區(qū)別 1. 所有所有XHTML文檔必須在文檔的第一行有一個文檔類型的文檔必須在文檔的第一行有一個文檔類型的聲明（聲明（DO

16、CTYPE），如：），如：v 文檔類型聲明是用來說明文檔類型聲明是用來說明XHTML使用標準的類型的，有使用標準的類型的，有Transitional，Strict和和Frameset三種類型，三種類型，Transitional是過渡類是過渡類型的型的XHTML，表明兼容原來的，表明兼容原來的HTML標記和屬性；標記和屬性；Strict是嚴是嚴格型的應用方式，在這種形式下，不能使用格型的應用方式，在這種形式下，不能使用HTML中任何樣式中任何樣式表現(xiàn)的標記（如表現(xiàn)的標記（如font）和屬性（如）和屬性（如bgcolor）；）；Frameset是針對是針對框架網(wǎng)頁的應用方式框架網(wǎng)頁的應用方式 XH

17、TML與HTML的區(qū)別(續(xù))2XHTML文檔可通過文檔可通過xmlns定義定義命名空間命名空間(Namespace)，如如表表示該示該xhtml文檔的命名空間是這個，如果我們換一個命名文檔的命名空間是這個，如果我們換一個命名空間，就可以自定義空間，就可以自定義xhtml文檔的標記文檔的標記A 小王小王/ A 小顏小顏/ A B 小劉小劉/ A A公司和公司和B B公司就是兩個命名空間，可以在上面定義不同的標記，只要公司就是兩個命名空間，可以在上面定義不同的標記，只要引用相應的引用相應的XML DTDXML DTD就可以使用這些標記了就可以使用這些標記了XHTML與HTML的區(qū)別(續(xù))3文檔里必

18、須具有文檔里必須具有html，head，body，title這些元這些元素。素。4在在HTML語言規(guī)范的基礎(chǔ)上，語言規(guī)范的基礎(chǔ)上，XHTML對標記還對標記還有下面一些額外的要求：有下面一些額外的要求：1）標記名和屬性名必須小寫；）標記名和屬性名必須小寫；2）屬性值必須用雙引號引起；）屬性值必須用雙引號引起；3）所有標記包括單標記都必須封閉。）所有標記包括單標記都必須封閉。4）不允許省略屬性值（如）不允許省略屬性值（如錯錯例3 找出符合xhtml語法規(guī)范的語句例例3：下列哪條：下列哪條html語句的寫法符合語句的寫法符合XHTML規(guī)范：規(guī)范： （ ）A . B. C. D. 復習題v 1. 下列哪條不是下列哪條不是XHTML規(guī)范的要求：規(guī)范的要求： （ ）v A. 標記名必須小寫標記名必須小寫 B. 屬性名必須小寫屬性名必須小寫v C. 屬性值必須小寫屬性值必須小寫D. 屬性值不能省