第2章HTML、XHTML標(biāo)準(zhǔn)

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

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

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

4、。v 把把HTML標(biāo)記如標(biāo)記如和標(biāo)記之間的內(nèi)容組合稱為和標(biāo)記之間的內(nèi)容組合稱為元元素素。網(wǎng)頁中文字，圖像，鏈接等所有的內(nèi)容都是以。網(wǎng)頁中文字，圖像，鏈接等所有的內(nèi)容都是以元素元素的的形式出現(xiàn)在形式出現(xiàn)在html代碼里的。標(biāo)記相同而標(biāo)記中的內(nèi)容不同代碼里的。標(biāo)記相同而標(biāo)記中的內(nèi)容不同應(yīng)視為不同的元素，同一網(wǎng)頁中標(biāo)記和標(biāo)記中的內(nèi)容都相應(yīng)視為不同的元素，同一網(wǎng)頁中標(biāo)記和標(biāo)記中的內(nèi)容都相同的元素如果出現(xiàn)兩次也應(yīng)視為兩個(gè)不同的元素，因?yàn)槿瓮脑厝绻霈F(xiàn)兩次也應(yīng)視為兩個(gè)不同的元素，因?yàn)槿我粋€(gè)元素在網(wǎng)頁中瀏覽器都會(huì)為它分配唯一的一個(gè)元素在網(wǎng)頁中瀏覽器都會(huì)為它分配唯一的id，不存在，不存在兩個(gè)元素的兩個(gè)元素

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

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

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

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

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

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

11、。v 于是人們想出了于是人們想出了web標(biāo)準(zhǔn)，即標(biāo)準(zhǔn)，即結(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是一種為了適應(yīng)是一種為了適應(yīng)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標(biāo)準(zhǔn)v網(wǎng)頁由結(jié)構(gòu)，表現(xiàn)和行為組成，網(wǎng)頁由結(jié)構(gòu)，表現(xiàn)和行為組成，v1內(nèi)容：內(nèi)容就

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

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

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

15、做出響應(yīng)表現(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)成的一個(gè)共同體：網(wǎng)頁是由四層信息構(gòu)成的一個(gè)共同體：Web標(biāo)準(zhǔn)的實(shí)現(xiàn)v結(jié)構(gòu)標(biāo)準(zhǔn)語言結(jié)構(gòu)標(biāo)準(zhǔn)語言（1）XML（2）XHTMLv表現(xiàn)標(biāo)準(zhǔn)語言表現(xiàn)標(biāo)準(zhǔn)語言CSS（Cascading Style Sheets，層疊樣式表）v行為標(biāo)準(zhǔn)語言行為標(biāo)準(zhǔn)語言JavaScriptWeb標(biāo)準(zhǔn)網(wǎng)頁示例結(jié)結(jié) 構(gòu)構(gòu)表表 現(xiàn)現(xiàn)行行 為為XHTMLCSSJavaScriptXHTML與HTML的區(qū)別 1. 所有所有XHTML文檔必須在文檔的第一行有一個(gè)文檔類型的文檔必須在文檔的第一行有一個(gè)文檔類型的聲明（聲明（DO

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

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

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