HTML5標準學習 DOCTYPE

2021-09-06 15:29:24 字數 2762 閱讀 7458

**:

所謂doctype,最初是xml的概念,即通過一種特定的語法,作為一種元資料,來描述xml文件中允許出現的元素,以及各元素的組成、巢狀規則等。具體的概念可以在wiki中中得到乙個更詳細的結果。

但是在html中,doctype又有著一些不同的效果,其中之一就是著名的觸發瀏覽器標準模式的功能。即如果沒有doctype,瀏覽器會進入一種被稱為quirks模式的怪異狀態,在該模式下,瀏覽器的盒模型、樣式解析、布局等都與標準規定的存在差異。

需要注意的是,所謂的html標準、dom標準等,只規定了在標準模式下的概念和行為,正如文件構成中提到的,doctype是乙個html文件絕對不可以省略的部分,因此就根本不存在「quirks模式」這樣的概念。也正是因為標準中沒有對quirks模式做出任何的規定,因此不同瀏覽器在quirks模式下的處理也是不同的,應用quirks模式可謂難上加難。

在html4的標準中,doctype被歸屬於「html版本資訊」一章中。在該章節中,標準指定了3種doctype:

html4如同xml一樣,是乙個相當理想化的標準。但是,現實往往並沒有這麼理想,試想下面的html文件:

so what?

這個文件採用了乙個框架模式的doctype,但其正文確沒有使用任何元素,相對應地使用了應該由嚴格模式或者過渡模式指定的,標準的html結構。那麼在這種情況下,瀏覽器能做什麼呢?

拒絕渲染該頁面?不,瀏覽器不敢這麼做,在激烈的市場競爭之中,如果因此而導致部分頁面無法渲染的話,就只能眼睜睜看著市場份額注入別家田了。所以瀏覽器頂多弱弱地報乙個警告以示**,卻依舊得乖乖地解析出這個文件並正確渲染。

這就是所謂的瀏覽器的「容錯性」,事實上無論你的doctype是什麼,瀏覽器都會以最大的相容能力去解析乙個文件,並以最大的努力讓這個文件顯示得符合開發者的預期。而瀏覽器的這一特性,也逐漸讓標準制定者開始意識到,doctype似乎真的不怎麼重要。因此,在html5中,doctype發生了一次重大的變化……

到了html5了,這一變化相信多數人已經知道,就是html5將doctype的宣告簡化了,只需要即可。

正好前文所述,在html4時代,標準制定者已經認識到,doctype對瀏覽器的渲染並沒有太大的幫助,除了給無聊的w3c驗證器看以外,doctype似乎只有觸發瀏覽器相容模式的作用。於是標準工作組採取了非常實際的態度,測試了所有課程順觸發標準模式的最簡doctype,最終得出了這一結論。

但是故事不會這麼簡單,標準工作組也不是完成這麼簡單的動作就撒手不管的無賴分子,事實上他們還是很盡責任地考慮到了向後相容性、可擴充套件性等一系列的事情,最後將doctype一章用了大量文本來進行描述,得到乙個非常詳實的結果。

html5的參考手冊相關章節中,將doctype分為3類:

普通doctype - normal doctype

普通doctype就是我們所見的最簡形式,即,他的真正組成是這樣的:

一段文字,即

1個或多個空格,關於空格的定義請參照簡介中的解釋。

字元html,同樣大小寫不敏感。

1個或多個空格。

結束標記,即>

不再推薦的doctype - deprecated doctype

即所謂html4時代的幾個doctype,其組成如下:

一段文字,即

1個或多個空格。

字元html,同樣大小寫不敏感。

1個或多個空格。

字元public,大小寫不敏感。

繼續1個或多個空格。

一對引號或單引號(必須前後匹配),引號中放乙個public id。

可選內容:

1個或多個空格。

一對引號或單引號(必須前後匹配),引號中放乙個與前面的public id對應的system id。

1個或多個空格。

結束標記,即>

在標準中,public id和system id是有嚴格的對應關係的,如果規定的system id不能有public id,則上面的第8項可選內容也就不能存在。html5徹底放棄了html4中的過渡型和框架型的doctype,同時整合了xhtml的doctype宣告,得出以下6種組合方式:

遺留工具doctype - leagacy tool compatible doctype

顧名思義,完全是為了相容久遠時代的歷史遺產而準備的doctype,甚至都已經沒辦法考證什麼樣的「工具」會搞出這種doctype來……遺留工具型的doctype的組成如下:

一段文字,即

1個或多個空格。

字元html,同樣大小寫不敏感。

1個或多個空格。

字元system,大小寫不敏感。

繼續1個或多個空格。

一對引號或單引號(必須前後匹配),引號中放一段文字about:legacy-compat,注意這段文字是大小寫敏感的。

1個或多個空格。

結束標記,即>

比如這樣的doctype就屬於此類:,基本上除了大小寫,沒有什麼值得改變的。

對於doctype的作用,在真正的瀏覽中,僅僅起到觸發瀏覽器的標準模式的作用。雖然根據標準,乙個html文件中,doctype前可以有其他的元素,如乙個u+ffef的bom,幾個注釋,一點空格,但是在當前的狀態下,並沒有這麼理想:

寫完才發現,問題又全出在ie下……關於doctype的問題糾結至此,下一章主要講述編碼宣告的問題。

HTML5標準學習 編碼

相信每乙個前端工程師都或多或少遇上過 亂碼 這位仁兄,無論你的基礎有多麼紮實,在生產的過程中都免不了偶爾和 亂碼 兄弟喝上幾杯茶吧。作為乙個前端工程師,你是如何指定乙個頁面的編碼的呢?你知道瀏覽器是怎麼識別編碼的嗎?首先,乙個很簡單的例子,用遇簡的html頁面來看看各瀏覽器下有什麼不同 最簡html...

HTML 教程 HTML5 標準

您可以使用 html 來建立自己的 web 站點。在本教程中,您將學習如何使用 html 來建立站點。html 很容易學習!相信您能很快學會它!本教程包含了數百個 html 例項。注意 對於中文網頁需要使用 宣告編碼,否則會出現亂碼。doctype html html head meta chars...

HTML 教程 HTML5 標準

超文字標記語言 英語 hypertext markup language,簡稱 html 是一種用於建立網頁的標準標記語言。您可以使用 html 來建立自己的 web 站點,html 執行在瀏覽器上,由瀏覽器來解析。在本教程中,您將學習如何使用 html 來建立站點。html 很容易學習!相信您能很...