1、第二章 HTML、XHTML與Web標準 瀏覽器看到的是什么?瀏覽者看到的google首頁瀏覽器看到的google首頁瀏覽器將讀取到的頁面代碼,翻譯成可以被人們閱讀的圖片文字聲音和動畫,這個過程被稱為”解釋”或”渲染”,為了確保在各種不同的瀏覽器中我們都能獲得一致的頁面效果,頁面設計兼容性問題是非常重要和關鍵的.網(wǎng) 頁v 網(wǎng)頁即是網(wǎng)頁即是超文本超文本，是通過超文本標記語言，是通過超文本標記語言HTML（HypeText Markup Language）書寫的一種）書寫的一種純文本文純文本文件件，v 客戶通過瀏覽器看到的包含了如文字、圖像、聲音和動客戶通過瀏覽器看到的包含了如文字、圖像、聲音和動

2、畫等多媒體信息的每一個頁面，其本質是一個純文本文畫等多媒體信息的每一個頁面，其本質是一個純文本文件。件。v 瀏覽器對該純文本文件進行了解釋，才生成了多姿多彩瀏覽器對該純文本文件進行了解釋，才生成了多姿多彩的網(wǎng)頁，除文本外，其它媒體素材（圖像、聲音、動畫的網(wǎng)頁，除文本外，其它媒體素材（圖像、聲音、動畫和影像等），都需要保存成單獨的文件，通過和影像等），都需要保存成單獨的文件，通過URL嵌入嵌入到網(wǎng)頁文件中。到網(wǎng)頁文件中。v 可以看出，可以看出，WWW服務主要是通過一個個多媒體網(wǎng)頁提服務主要是通過一個個多媒體網(wǎng)頁提供給用戶各種信息供給用戶各種信息HTML超文本標記語言v 超文本標記語言超文本標記語

3、言HTML作為一種語言，它具有語言的一作為一種語言，它具有語言的一般特征，即它是一種符號系統(tǒng)，具有自己的詞匯（符號）般特征，即它是一種符號系統(tǒng)，具有自己的詞匯（符號）和語法（規(guī)則）。和語法（規(guī)則）。v 所謂標記，就是所謂標記，就是作記號作記號。如我們寫文章時通常用大體字。如我們寫文章時通常用大體字標記文章的標題，用換行空兩格標記一個段落標記文章的標題，用換行空兩格標記一個段落v 所謂超文本，就是相比普通文本有超越的地方，如超文所謂超文本，就是相比普通文本有超越的地方，如超文本可以通過超鏈接轉到指定的某一頁，而普通文本只能本可以通過超鏈接轉到指定的某一頁，而普通文本只能一頁頁翻，超文本還具有圖像

4、，視頻，聲音等元素，并一頁頁翻，超文本還具有圖像，視頻，聲音等元素，并能和用戶交互，這些都是普通文本無法達到的能和用戶交互，這些都是普通文本無法達到的 用HTML語言寫出第一張網(wǎng)頁【例【例1-1】使用記事本輸入，保存為使用記事本輸入，保存為1_1.htm 歡迎 網(wǎng)頁設計很奇妙！ 預祝大家愛上它- 本章要點vHTML文檔的基本結構文檔的基本結構v標記標記(Tags)和元素和元素( Elements ) HTML標記的分類 行內元素和塊級元素v從從HTML到到XHTML的轉變的轉變 html存在的問題和web標準 XHTML與HTML的區(qū)別 XHTML補充介紹（見另一幻燈片）HTML文檔的基本結構

5、打開1.txt： 告訴瀏覽器告訴瀏覽器HTML文檔開始和結束的位置，其中文檔開始和結束的位置，其中包括包括head部分和部分和body部分。部分。HTML文檔中所有的文檔中所有的內容都應該在這兩個標記之間，一個內容都應該在這兩個標記之間，一個HTML文檔文檔總是以總是以開始，以開始，以結束。結束。： HTML文件的頭部標記，頭部主要提供文檔的描文件的頭部標記，頭部主要提供文檔的描述信息，述信息，head部分的所有內容都不會顯示在瀏覽部分的所有內容都不會顯示在瀏覽器窗口中，在其中可以放置器窗口中，在其中可以放置頁面的標題頁面的標題以及以及頁面頁面的類型的類型、使用的字符集、鏈接的其它腳本或樣式、

6、使用的字符集、鏈接的其它腳本或樣式文件等內容文件等內容v： 用來指明文檔的主體區(qū)域，網(wǎng)頁所要顯示的內容用來指明文檔的主體區(qū)域，網(wǎng)頁所要顯示的內容都放在這個標記內，其結束標記都放在這個標記內，其結束標記指明主體指明主體區(qū)域的結束區(qū)域的結束編寫HTML網(wǎng)頁文檔的方法vHTML文檔是一個純文本文件，可以使用任何文文檔是一個純文本文件，可以使用任何文本編輯器編寫保存本編輯器編寫保存v使用使用記事本記事本編輯一個編輯一個html文件文件v使用使用Dreamweaver新建一個新建一個html文件文件標記(Tags)和元素（Elements） v標記是標記是HTML文檔中一些有特定意義的符號，這文檔中一些

7、有特定意義的符號，這些符號指明些符號指明內容的含義或結構內容的含義或結構。標記總是放在三。標記總是放在三角括號中，大多數(shù)標記都是角括號中，大多數(shù)標記都是成對成對出現(xiàn)的，表示開出現(xiàn)的，表示開始和結束。始和結束。v不成對不成對的也叫的也叫空標簽或單標簽空標簽或單標簽v標記標記+標記之間的內容標記之間的內容=元素元素。網(wǎng)頁中文字，圖像，。網(wǎng)頁中文字，圖像，鏈接等所有的內容都是以鏈接等所有的內容都是以元素元素的形式出現(xiàn)在的形式出現(xiàn)在html代碼里的。代碼里的。例1 下面body內元素的個數(shù)是多少 圖片的說明內容圖片的說明內容 圖片的說明內容圖片的說明內容答案答案：5個，即個，即1個個a元素、元素、1個

8、個img元素、元素、2個個p元素元素和和1個個hr元素。元素。 HTML元素的結構 /例2 找出下面html代碼的錯誤v下列下列HTML元素的寫法錯在什么地方？元素的寫法錯在什么地方？1.2. Congratulations! 3.linked text4.This is a new paragraph5.The list itemHTML標記 的分類 (p38)1)頭部標記：頭部標記：title, meta, link, style2)文本標記：文本標記：font, b, i, u , strong,3)段落標記：段落標記：p, hn, pre, marquee, br, hr4)列表標記：

9、列表標記：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, frame, iframe10)容器標記：容器標記：div, spanhttp:/ 的分類（2）為便于記憶，可將標記按出現(xiàn)的情況分為：為便于記憶，可將標記按出現(xiàn)的情

10、況分為：1.單標記單標記：， ， ， 2.配對標記配對標記：大部分標記都是配對標記：大部分標記都是配對標記3.成組標記成組標記：table，form，ul, ol, dl, frameset，fieldset及其子標記等，配對標記中很多都是成及其子標記等，配對標記中很多都是成組標記組標記 練習P39圖3-1行內元素和塊級元素 v行內元素行內元素(inline)是指元素與元素之間從左到右是指元素與元素之間從左到右并排排列，只有當瀏覽器窗口容納不下才會轉并排排列，只有當瀏覽器窗口容納不下才會轉到下一行，到下一行，塊級元素塊級元素(block)是指每個元素占據(jù)是指每個元素占據(jù)瀏覽器一整行位置，塊級元

11、素與塊級元素之間瀏覽器一整行位置，塊級元素與塊級元素之間自動換行，從上到下排列。自動換行，從上到下排列。v塊級元素內部可包含行內元素或塊級元素，行塊級元素內部可包含行內元素或塊級元素，行內元素內部可包含行內元素，但不得包含塊級內元素內部可包含行內元素，但不得包含塊級元素，另外，塊級元素元素，另外，塊級元素元素內部也不能包元素內部也不能包含其他的塊級元素含其他的塊級元素 行內元素和塊級元素舉例v行內元素：行內元素：a，img，font，b，i，u， span，inputv塊級元素：塊級元素：p, div, hn, pre, hr, ul, ol, li, form v快速記憶法：即所有文本標記，

12、鏈接標記和圖像快速記憶法：即所有文本標記，鏈接標記和圖像標記是行內元素標記是行內元素v所有段落標記，列表標記是塊級元素所有段落標記，列表標記是塊級元素行內元素和塊級元素示例粗體文字粗體文字圖片的標題圖片的標題 圖片的說明內容圖片的說明內容粗體文字粗體文字粗體文字粗體文字常見的html標記的屬性v公共屬性：公共屬性：v align（對齊方式），（對齊方式），border（邊框），（邊框），title（提（提示文字），示文字），src（鏈接的文件路徑），（鏈接的文件路徑），style（引入（引入CSS行內樣式），行內樣式），id，namev特有屬性：特有屬性： vhtml存在的問題和web標準 v

13、 HTML語言最開始是用來描述語言最開始是用來描述文檔的結構文檔的結構的，如標題，段落等的，如標題，段落等標記，后來因為人們還想用它控制標記，后來因為人們還想用它控制文檔的外觀文檔的外觀，HTML又增加又增加了一些控制字體，對齊等方面的標記和屬性，這樣做的結果是了一些控制字體，對齊等方面的標記和屬性，這樣做的結果是HTML既可以用來描述文檔的結構，又能表示文檔的外觀，但既可以用來描述文檔的結構，又能表示文檔的外觀，但是兩方面都描述不好。是兩方面都描述不好。v 于是人們想出了于是人們想出了web標準，即標準，即結構結構和和表現(xiàn)表現(xiàn)分離，網(wǎng)頁由分離，網(wǎng)頁由結構結構，表現(xiàn)表現(xiàn)和和行為行為組成。組成。

14、v XHTML是是在在HTML4.0的基礎上，用的基礎上，用XML的規(guī)則對其進行擴的規(guī)則對其進行擴展，展，一種為了適應一種為了適應XML而重新改造的而重新改造的HTML。用用HTML的新的新版本版本XHTML描述文檔的結構，用描述文檔的結構，用CSS控制文檔的表現(xiàn)，因此控制文檔的表現(xiàn)，因此XHTML和和CSS就是內容和形式的關系，由就是內容和形式的關系，由XHTML確定網(wǎng)頁確定網(wǎng)頁的內容，而通過的內容，而通過CSS來決定頁面的表現(xiàn)形式。來決定頁面的表現(xiàn)形式。v XML是是The Extensible Markup Language(可擴展標識語言可擴展標識語言)的的簡寫。是一種能定義其他語言的

15、語言，簡寫。是一種能定義其他語言的語言， 用于網(wǎng)絡數(shù)據(jù)的轉換用于網(wǎng)絡數(shù)據(jù)的轉換和描述和描述 。v什么是什么是web標準？標準？v表格布局的網(wǎng)頁（例子：表格布局的網(wǎng)頁（例子：18-20）vDIV+CSS布局的頁面布局的頁面 例子：背景應用（例子：背景應用（樣式樣式1.jpg樣式樣式3.jpg）vDIV+CSS的優(yōu)與弊的優(yōu)與弊同樣的網(wǎng)頁內容，不同的表現(xiàn)形式24331421內容文件.html(含有四塊div)，形式文件.css例子參見：樣式1.jpg樣式3.jpgWeb標準v網(wǎng)頁由結構，表現(xiàn)和行為組成，網(wǎng)頁由結構，表現(xiàn)和行為組成，v1內容：內容就是頁面實際要傳達的真正信息，內容：內容就是頁面實際要傳

16、達的真正信息，包含數(shù)據(jù)、文檔或者圖片等。注意這里強調的包含數(shù)據(jù)、文檔或者圖片等。注意這里強調的“真正真正”，是指，是指純粹的數(shù)據(jù)信息純粹的數(shù)據(jù)信息本身。本身。如：如：憶江南憶江南(1)唐唐.白居易江南好，風景舊曾諳。白居易江南好，風景舊曾諳。(2)日出江花紅勝火，春來江水綠如藍，日出江花紅勝火，春來江水綠如藍，(3)能不憶江能不憶江南。作者介紹南。作者介紹772846 ，字樂天，太原人。唐德，字樂天，太原人。唐德宗朝進士宗朝進士v2結構：可以看到上面的文本信息本身已經(jīng)完整。結構：可以看到上面的文本信息本身已經(jīng)完整。但是混亂一團，難以閱讀和理解，我們必須給它但是混亂一團，難以閱讀和理解，我們必須

17、給它格式化一下。格式化一下。把它分成標題、作者、章、節(jié)、段把它分成標題、作者、章、節(jié)、段落和列表等落和列表等。 Web標準結構v標題標題 憶江南憶江南(1)作者作者 唐唐.白居易白居易正文正文江南好，風景舊曾諳。江南好，風景舊曾諳。(2)日出江花紅勝火，春來江水綠如藍，日出江花紅勝火，春來江水綠如藍，(3)能不憶江南。能不憶江南。節(jié)節(jié)1作者介紹作者介紹772846 ，字樂天，太原人。唐德宗朝進士，字樂天，太原人。唐德宗朝進士 Web標準表現(xiàn)v 表現(xiàn)（表現(xiàn)（Presentation）：雖然定義了結構，但是內容還是）：雖然定義了結構，但是內容還是原來的樣式?jīng)]有改變，例如標題字體沒有變大，正文的顏原

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

19、內容的語義內容的語義內容層內容層內容內容網(wǎng)頁是由四層信息構成的一個共同體：網(wǎng)頁是由四層信息構成的一個共同體：Web標準的實現(xiàn)1.結構標準語言結構標準語言（1）XML（2）XHTML2.表現(xiàn)標準語言表現(xiàn)標準語言CSS（Cascading Style Sheets，層疊樣式表）3.行為標準語言行為標準語言JavaScript結結 構構表表 現(xiàn)現(xiàn)行行 為為XHTMLCSSJavaScriptv關于關于Xhtml 標準標準 的補充介紹的補充介紹 -見下一個幻燈片見下一個幻燈片XHTML與HTML的區(qū)別 1. 所有所有XHTML文檔必須在文檔的第一行有一個文檔類型的文檔必須在文檔的第一行有一個文檔類型的

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

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

22、(續(xù))3文檔里必須具有文檔里必須具有html，head，body，title這些元素。這些元素。4在在HTML語言規(guī)范的基礎上，語言規(guī)范的基礎上，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. 屬性值不能省略屬性值不能省略v 2. 下列哪種不是下列哪種不是XHTML的的DTD： （ ）v A. LooseB. Transitionalv C. StrictD. Framesetv 3. Web標準是由誰制訂的。標準是由誰制訂的。 （ ）v A. Microsoft B.