html學習一（html簡史及doctype）

時間 2019-11-10

標籤 html 學習簡史 doctype 欄目 HTML 简体版

原文原文鏈接

html3部分
- doctype（html）
  - 　　dtd
- head
- body

1、深刻淺出HTML與XHTML的區別php

　　HTML（HyperText Markup Language，超文本標記語言）最先的HTML官方正式規範，是1995年IETF（Internet Engineering Task Force，因特網工程任務組）發佈的HTML 2.0。W3C（World Wide Web Consortium，萬維網聯盟）繼IETF以後，對HTML進行了幾回升級，直至1999年發佈HTML 4.01。

　　 HTML與XHTML

　　可擴展超文本標記語言XHTML（eXtensible HyperText Markup Language），是HTML 4.01的第一個修訂版本，是「3種HTML4文件根據XML1.0標準重組」而成的。也就是說是，XHTML是HTML 4.01和XML1.0的雜交。

　　因爲XHTML1.0是基於HTML4.01的，並無引入任何新標籤或屬性（XHTML能夠看做是HTML的一個子集），表現方式與超文本標記語言HTML相似，只是語法上更加嚴格，幾乎全部的網頁瀏覽器在正確解析HTML的同時，可兼容XHTML。

如：XHTML中全部的標籤必須小寫，全部標籤必須閉合，每個屬性都必須使用引號包住。 要寫成 ，不能寫爲 （同hr）；使用了以後必須有一個以結束段落。

　　 HTML與XML

　　HTML是一種基於標準通用標記語言（SGML）的應用，而XHTML則基於可擴展標記語言（XML），HTML和XHTML實際上是平行發展的兩個標準。本質上說，XHTML是一個過渡技術，結合了部分XML的強大功能及大多數HTML的簡單特性。創建XHTML的目的就是實現HTML向XML的過渡。

　　XML設計用來傳送及攜帶數據信息，不用來表現或展現數據，HTML語言則用來表現數據。RSS和ATOM目前已經成爲成功的XML應用，RSS使用XML做爲彼此共享內容的標準方式。它表明了Really Simple Syndication（或RDF Site Summary，RDF站點摘要）。它能讓別人很容易的發現你已經更新了你的站點。Atom數據源彷佛較少了些；對開發者來講，RSS相對簡單，Atom稍顯複雜，特別是若是不熟悉XML。

　　1997年，W3C在發佈XML1.0標準時，HTML的版本已經到了4。直到2000年1月26日XHTML1.0成爲W3C的推薦標準。不過，鑑於當時HTML一統天下的現狀，W3C只好建議」繼續使用HTML4.01和積極地研究HTML5及XHTML的計劃」。2002年W3C指出XHTML家族將會是Internet的新階段，並又着手開發XHTML2，旨在把Web引向創建在XML之上的無比光明的美好將來。

　　 HTML5大行其道

　　因爲本來XHTML只是在內容結構上改進原有的HTML系統，XHTML2.0也僅僅在XHTML1.1的基礎上更加註重頁面規範和可用性，缺少交互性。在這個Web App大行其道的年代，XHTML2有些OUT了，因而就催生了HTML5。

　　W3C無視Web設計人員的需求，僅從理論角度閉門造車，卻扛着標準的大旗，引起了來自Opera、Apple以及Mozilla等瀏覽器廠商的反對聲音。2004年，他們組建了一個以推進網絡HTML5標準爲目的的組織——網頁超文本技術工做小組（Web Hypertext Application Technology Working Group，縮寫爲WHATWG）。

　　 HTML5和XHTML2的競爭

　　HTML5目標是取代1999年所制定的HTML4.01和XHTML1.0標準，旨在提升網頁性能，增長頁面交互。HTML5吸收了XHTML2一些建議，包括一些用來改善文檔結構的功能，好比，新的HTML標籤header、footer、dialog、aside、figure等的使用，將使內容創做者更加語義地建立文檔，以前的開發者在這些場合是一概使用div的。

　　W3C與WHATWG雙方通過多年努力，終於在2006年達成妥協。2006年10月，Web之父、萬維網聯盟（W3C）主席、美國國家科學院院士蒂姆·伯納斯-李（Tim Berners-Lee）發表了一篇博客文章表示，從HTML走向XML的路是行不通的（XHTML is dead）。2009年W3C明智的放棄了改進XHTML2.0標準的計劃，選擇了WHATWG的成果做爲基礎。事實上，XHTML在2002年更新以後的數年時間裏，儘管發現了衆多問題，但都沒有去修改過。

　　2011年，Google工程師兼HTML5標準編輯的Ian Hickson稱，HTML5將是最後一個帶版本號的HTML語言。他表示，HTML語言將成爲一個活的標準。

2、<!DOCTYPE>css

Document Type 文檔類型，縮寫成DOCTYPE，在html中它就是個標籤：<!DOCTYPE>，它有本身的聲明格式，不是在html標籤前加上它就完事了的，查看qq.com頁面源碼可見以下聲明：html

   1: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

DOCTYPE 包含 6 部分：chrome

字符串「<!DOCTYPE」
根元素通用標識符「HTML」
字符串「PUBLIC」
被引號括起來的公共標識符（publicId）
被引號括起來的系統標識符（systemId）重點在這裏，繼續往下看
字符串「>」

看上去蠻複雜的，不用去糾結，通常只有三種（Strict Transitional Frameset）聲明（以XHTML爲例）瀏覽器

XHTML Strict DTD-要求嚴格的DTD，你不能使用任何表現層的標識和屬性（交給css來表現），例如 ；可以使html很是的乾淨。

   1: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

XHTML Transitional DTD-要求很是寬鬆的DTD，它容許你繼續使用HTML4.01的標識(可是要符合xhtml的寫法)

   1: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

XHTML Frameset DTD-當您但願使用框架時，請使用此 DTD！

   1: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

HTML的語法就很是寬鬆了，他的DTD也分爲同樣的三種。

HTML 4.01 Strict DTD （嚴格的文檔類定義）不能包含已過期的元素（或屬性）和框架元素。對於使用了這類DTD的文檔，使用以下文檔聲明：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

HTML 4.01 Transitional DTD（過渡的文檔類定義）能包含已過期的元素和屬性但不能包含框架元素。對於使用了這類DTD的文檔，使用以下文檔聲明：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

HTML 4.01 Frameset DTD（框架集文檔類定義）。能包含已過期的元素和框架元素。對於使用了這類DTD的文檔，使用以下文檔聲明：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

簡單舉例說說strict和transitional的不一樣，按照XHTML Strict DTD的規定（看DTD內容），th標籤是不能有width屬性的，但transitional能夠有網絡

在XHTML Strict DTD聲明的html中出現th標籤屬性width時，則會出現警告信息(以下圖)，改爲transitional dta就不會出現警告app

Doctype起啥做用? 框架

上面也提到，Doctype告訴瀏覽器使用什麼樣的html或xhtml規範來解析html文檔，上文說到的DOCTYPE組成中的第5部分所引入的dtd文件則包含了標記、attributes 、properties、約束規則。除此外，Doctype還會對瀏覽器的渲染模式產生影響，不一樣的渲染模式會影響到瀏覽器對於 CSS 代碼甚至 JavaScript 腳本的解析，因此Doctype是很是關鍵的，尤爲是在 IE 系列瀏覽器中，由DOCTYPE 所決定的 HTML 頁面的渲染模式相當重要。ide

兩種渲染模式：佈局

BackCompat：標準兼容模式未開啓（或叫怪異模式[Quirks mode]、混雜模式）
CSS1Compat：標準兼容模式已開啓（或叫嚴格模式[Standards mode/Strict mode]）

長話短說兩種渲染模式的由來，好久之前W3C標準沒出現的時候，江湖很混亂，頁面上根本就沒有doctype這個東西，亂世出英雄啊，w3c標準出現後頁面上就有了doctype，爲了照顧老前輩的頁面（沒有doctype或使用HTML4如下[不包括HTML4]的DTD聲明），怪異模式就出現了，保證古董頁面能正常顯示；江湖統一以後，你們都開始使用w3c標準，這就是標準模式。

測試ie 八、 ff十、 chrome16的渲染模式，測試文檔以下：（只是給予直觀感覺，並不是全面周到的測試）

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

</head>

<body>

      <!--未聲明DOCTYPE-->

      <script>document.write(document.compatMode);</script>

</body>

</html>

結果爲：

IE 8.0：BackCompat Firefox 10.0：BackCompat Chrome 16.0：BackCompat

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

</head>

<body>

      <!--聲明DOCTYPE-->

      <script>document.write(document.compatMode);</script>

</body>

</html>

結果爲：

IE 8.0：CSS1Compat Firefox 10.0：CSS1Compat Chrome 16.0：CSS1Compat

說了半天的doctype對渲染模式的影響，有什麼用呢？不一樣的渲染模式對CSS2.1規範的解析有很大差別，尤爲是對盒模型的解釋，因此咱們的目標是如何聲明doctype以使咱們的頁面被以標準模式解析，這是關鍵。

Doctype的選擇！！

上面已經提到，頁面中的Doctype的聲明會影響瀏覽器的渲染模式，渲染模式又跟頁面最終的呈現效果息息相關，因此儘可能選擇那些能「激活」主流瀏覽器標準模型的Doctype。

[from KB001: 兼容性問題與瀏覽器的內核及渲染模式]

表中提到了「近似標準模式」

近似標準模式（Almost Standards Mode）從字面意思上看與標準模式很是相似，但確實有小的差異。主要體如今對於表格單元格內垂直方向佈局渲染差別。IE8 開始、Firefox、Chrome、Safari、Opera 7.5 開始，這些瀏覽器的標準模式更加嚴格的遵循了 CSS2.1 規範，故對於在目前看來不太「標準」的之前的標準模式，被賦予了「近似標準模式」的名字。可是在較早的 IE6 IE7 以及 Opera 7.5 以前版本中，瀏覽器沒法嚴格遵循 CSS2.1 規範，故對於它們來講沒有這個近似標準模式，也能夠理解爲它們的近似標準模式就是標準模式。

至於如何選擇，參考表格天然明白，不用廢話了！

參考資料很重要！！

【HTML <!DOCTYPE> 標籤】http://www.w3cschool.cn/tag_doctype.html

【CS002: DOCTYPE 與瀏覽器模式分析】http://w3help.org/zh-cn/casestudies/002

【KB001: 兼容性問題與瀏覽器的內核及渲染模式】http://w3help.org/zh-cn/kb/001