課程大綱
- （1）ajax簡介
- （2）XML簡介
- （3）SGML簡介
- （4）DTD簡介
- （5）HTML與DTD
- （6）爲什麼需要DTD聲明？
- （7）DTD作用
- （8）標準模式(strict mode)和怪異模式(quirks mode)
- （9）HTML5文檔聲明
- （10）什麼是 XHTML？
- （11）XHTML對比HTML
- （12）對比GML、SGML、HTML、XML、XHTML、HTML5
ajax簡介
- （1）什麼是ajax？
- ajax 的全稱是Asynchronous JavaScript and XML，其中，Asynchronous 是異步的意思，它有別於傳統web開發中採用的同步的方式。
- AJAX代表異步JavaScript和XML，它是一組web開發技術，允許web應用程序異步工作，在後臺處理對服務器的任何請求等等，那麼什麼是AJAX？
- JavaScript是一種流行的編碼語言，在其功能中，JavaScript管理網站的動態內容並允許用戶進行交互。（XML是HTML等標記語言的另一種變體），其名稱爲可擴展標記語言。如果HTML是用來顯示數據的，那麼XML就是用來包含和攜帶數據的。
- JavaScript和XML在AJAX中都是異步工作的，因此，任何使用AJAX的web應用程序都可以從服務器發送和檢索數據，而不需要重新加載整個頁面。
XML簡介
- （2）什麼是XML？
- XML是 EXtensible Markup Language(可擴展標識語言)的簡寫。
- XML和HTML(Hypertext Markup Language 超文本標記語言)一樣，同樣來源於SGML。
- XML與HTML區別：
- XML 不是 HTML替代者，只是HTML補充，它的用途完全不同．XML並不是標記語言。它只是用來創造標記的語言，XML中的標籤不像HTML中的標籤是預定義的，是需要自己定義的，如HTML中table ,body,等這些標籤是預定義的，而XML中則完全由自己來定義這些標籤。
- 用途：
- 1、HTML 是將數據和顯示格式混合在一起的，是用於以人可直接閱讀的格式顯示數據。如在body，table等這些標籤中顯示數據，在HTML 中，只能使用這個有限的標籤集，因此可顯示的信息類型也是有限的。
- 2、XML是用來描述、存儲和交換數據的，不包含任何的顯示格式的信息，因此它與數據庫功能類似．
SGML簡介
- （3）SGML是什麼？
- SGML是指“標準通用標記語言”(Standard Generalized Markup Language),是1986年出版發佈的一個信息管理方面的國際標準(ISO 8879)，它是國際上定義電子文件結構和內容描述的標準，是一種非常複雜的文檔的結構，主要用於大量高度結構化數據的防衛區和其他各種工業領域，利於分類和索引。
- SGML規定了在文檔中嵌入描述標記的標準格式，指定了描述文檔結構的標準方法，目前在WEB上使用的HTML格式便是使用固定標籤集的一種SGML文檔。即HTML可以視爲SGML的子集。
- SGML是一種在Web發明之前就早已存在的用標記來描述文檔資料的通用語言。但SGML十分龐大且難於學習和使用。鑑於此，人們提出了HTML語言。
- 但SGML太龐大了，學用兩難尚且不說，就是全面實現SGML的瀏覽器也非常困難。於是Web標準化組織W3C建議使用一種精簡的SGML版本——XML。SGML是XML的前身，由於SGML難理解瀏覽器支持差等原因被放棄，XML和HTML都基於SGML。SGML的DTD作爲標準被固定下來。
DTD簡介
- （4）什麼是DTD？
- DTD：文檔類型定義(Document Type Definition)是一套關於標記符的語法規則。中文意思爲“文檔類定義”。
- DTD肩負着兩重任務：
- 一方面它幫助你編寫合法的代碼，另一方面它讓瀏覽器正確地顯示器代碼。如果說你沒有使用DTD，你將很難預測瀏覽器是怎樣顯示你的代碼，僅僅在同一瀏覽器就有不同的顯示效果。儘管你的網頁做得非常飄亮，要是沒有使用DTD，你的努力也是白費的。因此，一個DTD是必不可少的。
HTML與DTD
- HTML與DTD：
- 1、DTD 是一套關於標記符的語法規則。它是XML1.0版規格得一部分,是html文件的驗證機制,DTD屬於html文件組成的一部分。
- 2、DTD：三種文檔類型：S（Strict）、T（Transitional）、F（Frameset）。
- ①Strict：如果您需要乾淨的標記，免於表現層的混亂，請使用此類型。請與層疊樣（CSS）配合使用
- ②Transitional：DTD 可包含 W3C 所期望移入樣式表的呈現屬性和元素。如果您的讀者使用了不支持層疊樣式表（CSS）的瀏覽器以至於您不得不使用 HTML 的呈現特性時使用
- ③Frameset： DTD 應當被用於帶有框架的文檔。除 frameset 元素取代了 body 元素之外，Frameset DTD等同於 Transitional DTD
- （5）HTML網頁模版/DTD有三種類型
- 第一種：HTML 4.01 Strict DTD（嚴格的文檔類定義）
- Strict嚴格型：在這種XHTML中，結構中不能出現格式或表現的內容：格式標記：
<font>、<b>、color屬性、background屬性 - 這種類型下，在
<body>中只有結構標記，不能出現任何的表現的內容。 對於使用了這類DTD的文檔，使用如下文檔聲明：
- Strict嚴格型：在這種XHTML中，結構中不能出現格式或表現的內容：格式標記：
- 第一種：HTML 4.01 Strict DTD（嚴格的文檔類定義）
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
- 第二種：HTML 4.01 TransitionalDTD（過渡的文檔類定義）
- Transitional過渡型：在這種XHTML中，結構中可以出現格式標記或表現(CSS)的內容：(用的最多)
- 能包含已過時的元素和屬性但不能包含框架元素。對於使用了這類DTD的文檔，使用如下文檔聲明：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
- 第三種：HTML 4.01 FramesetDTD（框架集文檔類定義）
- Frameset框架型：在這種XHTML中，可以使用框架技術，實現多個網頁在一個瀏覽器窗口中呈現，
<body>和<frameset>不能同時使用，只能二選一
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
DTD與標準怪異模式
- （6）爲什麼需要DTD聲明？
- 到目前爲止，只是在說DTD作用，那如果不寫會怎麼樣？在開發項目裏到底起到了什麼作用呢？這裏需要引入兩個新概念。
- 標準模式和怪異模式：
- 要想寫出跨瀏覽器的CSS，必須知道瀏覽器解析CSS的兩種模式：標準模式(strict mode)和怪異模式(quirks mode)。
- （7）爲什麼需要DTD聲明？
- 1、標準模式是指瀏覽器按W3C標準解析執行代碼；
- 2、怪異模式則是使用瀏覽器自己的方式解析執行代碼，因爲不同瀏覽器解析執行的方式不一樣，所以我們稱之爲怪異模式。
- 瀏覽器解析時到底使用標準模式還是怪異模式，與你網頁中的DTD聲明直接相關，DTD聲明定義了標準文檔的類型（標準模式解析）文檔類型，會使瀏覽器使用相應的方式加載網頁並顯示，忽略DTD聲明,將使網頁進入怪異模式(quirks mode)。
- 如果網頁代碼不含有任何聲明，那麼瀏覽器就會採用怪異模式解析如下圖：
![在這裏插入圖片描述]()
- 如果網頁代碼含有DTD聲明，瀏覽器就會按所聲明的標準解析
上述代碼，瀏覽器會按HTML 4.01的標準進行解析如下圖：
![在這裏插入圖片描述]()
標準模式VS怪異模式
- （8）標準模式和怪異模式
- 聲明DTD後的標準模式下，IE6不認識!important聲明，IE7、IE8、Firefox、Chrome等瀏覽器認識；
- 而在未聲明DTD的怪異模式中，IE6/7/8都不認識!important聲明，這只是區別的一種，還有很多其它區別。
- 所以，要想寫出跨瀏覽器CSS，最好採用標準模式，即聲明DTD模式。
- 如何獲取判定現在是標準模式還是怪異模式？
- （1）原生JS法
alert(window.top.document.compatMode) ;
1、BackCompat 表示怪異模式
2、CSS1Compat 表示標準模式
- （2）jQuery法
jQuery.boxModel在絕大多數瀏覽器中返回true，在IE瀏覽器的怪癖模式中返回false
1.8 之前(不含1.8)的 jQuery 版本---$.boxModel
1.8之後版本---$.support.boxModel
H5文檔聲明
-
（9）HTML5文檔聲明
- 到H5 時，文檔聲明語法爲
<!DOCTYPE html>，該聲明並不是HTML標記。它是向web瀏覽器發送關於寫入頁面的HTML版本的指令
- 到H5 時，文檔聲明語法爲
-
【H4對比H5】：
- 1、在HTML 4.01中，
< !DOCTYPE>聲明引用DTD，因爲HTML 4.01基於SGML。
DTD指定了標記語言的規則，以便瀏覽器正確地呈現內容。 - 2、 HTML5 不基於 SGML，所以就不需要對 DTD 引用，但需要 DOCTYPE來規範瀏覽器行爲。
- 1、在HTML 4.01中，
-
（9）HTML5文檔聲明小結
- 1、在 HTML 4.01 中，<!DOCTYPE> 聲明引用 DTD，因爲 HTML 4.01 基於 SGML。
- 2、DTD 規定了標記語言的規則，這樣瀏覽器才能正確地呈現內容。
- 3、HTML5 不基於 SGML，所以不需要引用 DTD，因此沒有聲明DTD。
XHTML
- （10）什麼是 XHTML？
- 官方描述：可擴展超文本標記語言（英語：eXtensible HyperText MarkupLanguage），是一種標記語言，表現方式與超文本標記語言（HTML）類似，不過語法上更加嚴格。
- 通俗理解：XHTML 是以 XML 格式編寫的 HTML。
- 【背景】：
- HTML是一種基本的WEB網頁設計語言，XHTML是一個基於可擴展標記語言的標記語言，看起來與HTML有些相象，只有一些小的但重要的區別，XHTML就是一個扮演着類似HTML的角色的可擴展標記語言（XML），所以，本質上說，XHTML是一個過渡技術，結合了部分XML的強大功能及大多數HTML的簡單特性。
- XML是可擴展標記語言，用於描繪封裝數據，而HTML超文本標記語言用於展示數據，XHTML就是用XML規則規範的HTML，由於XML語法嚴格，因此，XHTML要求
![在這裏插入圖片描述]()
- （11）XHTML對比HTML
- 書寫習慣區別
1、HTML標籤不區分大小寫XHTML所有標籤都必須小寫
2、XHTML標籤必須成雙成對.
3、html對標籤順序要求不嚴格，XHTML標籤順序必須正確
- 書寫習慣區別
- 總而言之xhtml比html更加規範。
ML置標語言
- （12）對比GML、SGML、HTML、XML、XHTML、HTML5
- 從這五者的名字中，我們都可以看到 “ML” 這兩個字母，所以先從 ML說起。ML即 Markup
== language置標語言==。根據維基百科的解釋，Markup language是用標準的標記來解釋純文本文檔的內容，從而提供關於文檔結構或文檔該如何渲染的信息。置標語言的發展可以用下圖來表示：
![在這裏插入圖片描述]()
- 從這五者的名字中，我們都可以看到 “ML” 這兩個字母，所以先從 ML說起。ML即 Markup
- 1、GML 是第一代置標語言，使文檔能明確將標示和內容分開，所以文件使用同樣的標示方法。
- 2、SGML 在 GML 的基礎上進行整理，形成了一套非常嚴謹的文件描述方法。它的組成包括語法定義，DTD，文件實例三部分。SGML因太嚴謹規範達500多頁，故而不易學、不易用、難以實現，所以在它的基礎上又發展出了其他的更易用的置標語言。
- 3、HTML 是人們抽取了 SGML 的一個微小子集而提取出來的。其早期規範比較鬆散，但比較易學。
- 4、XML 也是 SGML 的一個子集，但使用比較嚴格的模式。
- 5、XHTML 的出現是因爲HTML擴充性不好，內容的表現跟不上時代的變化（如無法表示某些化學符號等），以及因爲性能的問題，官方逐漸趨於嚴格的模式，所以使用 XML 的嚴格規則的 XHTML 成了 W3C 計劃中 HTML 的替代者。
- 6、HTML 經過一系列修訂，到現在說的 HTML 一般指 HTML 4.01；而現在的 HTML 5 則是 HTML 的第五個修訂版，其主要的目標是將互聯網語義化，以便更好地被人類和機器閱讀，並同時提供更好地支持各種媒體的嵌入。而HTML5本身並非技術，而是標準。
- 它所使用的技術早已很成熟，國內通常所說的html5實際上是html與css3及JavaScript和api等的一個組合，大概可以用以下公式說明：HTML5≈HTML+CSS3+JavaScript+API.
