月半小夜曲下的暢想--DOCTYPE模式

時間  2019-11-18
標籤 月半 小夜曲 暢想 doctype 模式 简体版
原文   原文鏈接

月半小夜曲下的暢想--DOCTYPE模式

@(css3 box-sizing)[doctype聲明|quirks模式|妙瞳]css

DOCTYPE文檔類型標籤，該標籤是將特定的標準通用標記語言或者XML文檔（網頁就是其中一種）與文檔類型定義（DTD）聯繫起來的指令。該標記應該出如今文件的第一行。它在文檔中出現的格式以下：
<!DOCTYPE html PUBLIC "引用的字符串" --公共標識符-->
「引用的字符串」被稱爲公共標識符，它經過業界約定的公共標識符名稱（一般是一個相關的標準）指向某個特定的文檔類型定義（DTD）。（外語原文：A　DOCTYPE　is　a　SGML　document　type　declaration.　Its　purpose　is　to　tell　an　SGML　parser　what　DTD　it　should　use　to　parse　the　document.）
標籤完整格式爲<!DOCTYPE>，語法參見!DOCTYPE。只有肯定了一個正確的文檔類型，超文本標記語言或可擴展超文本標記語言中的標籤和層疊樣式表才能生效，甚至對JavaScript腳本都會有所影響。html

經常使用集合 ：html5

  • 超文本標記語言：
    互聯網工程任務組超文本標記語言2.0：
    <!DOCTYPE HTML
    PUBLIC "-//IETF//DTD HTML//en">
    公共標識符稱爲：「-//IETF//DTD HTML//en」。

萬維網聯盟：
大多數萬維網瀏覽器實際上並無使用標準通用標記語言解析器，其中許多基於對文檔的!DOCTYPE聲明，顯示有所不一樣的文件或缺少。
在超級文本標記語言下的做用是告知瀏覽器當前文檔所使用的是哪一種超文本或可擴展超文本規範。css3

超文本4.01 規定了叄種文檔類型：嚴格、過渡以及框架集。
超文本嚴格文檔類型定義：
若是您須要乾淨的標記，免於表現層的混亂，請使用此類型。請與層疊樣式表配合使用：
（公共標識符稱爲：「-//W3C//DTD HTML 4.01//en」。）
<!DOCTYPE HTML
PUBLIC "-//W3C//DTD HTML 4.01//en"
"http://www.w3. org/TR/html4/strict.dtd">web

超文本過渡文檔類型定義：
可包含萬維網聯盟所指望移入樣式表的呈現屬性和元素。若是您的讀者使用了不支持層疊樣式表的瀏覽器以致於您不得不使用超文本標記語言的呈現特性時，請使用此類型：
（公共標識符稱爲：「-//W3C//DTD HTML 4.01 Transitional//en」。）
<!DOCTYPE HTML
PUBLIC "-//W3C//DTD HTML 4.01 Transitional//en"
"http://www.w3. org/TR/html4/loose.dtd">瀏覽器

超文本框架集文檔類型定義：
框架集文檔類型定義應當被用於帶有框架的文檔。除 frameset 元素取代了 body 元素以外，等同於過渡文檔類型定義：
（公共標識符稱爲：「-//W3C//DTD HTML 4.01 Frameset//en」。）
<!DOCTYPE HTML
PUBLIC "-//W3C//DTD HTML 4.01 Frameset//en"
"http://www.w3. org/TR/html4/frameset.dtd"框架

  • 擴展超文本標記語言：

可擴展超文本標記語言 1.0 規定了叄種文檔類型：嚴格、過渡以及框架集。
可擴展超文本標記語言嚴格文檔類型定義：
（公共標識符稱爲：「-//W3C//DTD XHTML 1.0 Strict//en」。）
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//en"
"http://www.w3. org/TR/xhtml1/DTD/xhtml1-strict.dtd">ide

可擴展超文本標記語言過渡文檔類型定義：
可包含 W3C 所指望移入樣式表的呈現屬性和元素。若是您的讀者使用了不支持層疊樣式表（CSS）的瀏覽器以致於您不得不使用 XHTML 的呈現特性時，請使用此類型：
（公共標識符稱爲：「-//W3C//DTD XHTML 1.0 Transitional//en」。）
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//en""http://www.w3. org/TR/xhtml1/DTD/xhtml1-transitional.dtd">工具

可擴展超文本標記語言框架集文檔類型定義：
當您但願使用框架時，請使用此文檔類型定義！
（公共標識符稱爲：「-//W3C//DTD XHTML 1.0 Frameset//en」。）
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//en"
"http://www.w3. org/TR/xhtml1/DTD/xhtml1-frameset.dtd">測試

  • 數學標記語言

萬維網聯盟：
下面例子中的聲明都指定了聽從「MathML」數學標記語言 2.0 文檔類型定義。
（公共標識符統稱爲：「-//W3C//DTD MathML 2.0//en」。）
<!DOCTYPE math
PUBLIC "-//W3C//DTD MathML 2.0//en"
"http://www.w3 .org/Math/DTD/mathml2/mathml2.dtd">

第二種將設置MATHML命名空間的前綴到MML。
<!DOCTYPE mml:math
PUBLIC "-//W3C//DTD MathML 2.0//en"
"http://www.w3 .org/Math/DTD/mathml2/mathml2.dtd"
[<!ENTITY % MATHML.prefixed "INCLUDE">
<!ENTITY % MATHML.prefix "mml">]>

第三種附加了檢查文檔類型定義（DTD）
<!DOCTYPE math
PUBLIC "-//W3C//DTD MathML 2.0//en"
"http://www.w3 .org/Math/DTD/mathml2/mathml2.dtd"
[<!ENTITY % MathMLstrict "INCLUDE" --設置參數實體MathMLStrict。-->]>

  • 符號交換文件格式(音樂)

公共標識符稱爲：「-//IPTC-NAA//DTD NITF 2.0//en」
<!DOCTYPE NITF
PUBLIC "-//IPTC-NAA//DTD NITF 2.0//en" >

翻譯存儲交換
公共標識符稱爲：「-//LISA OSCAR:1998//DTD for Translation Memory eXchange//en」
<!DOCTYPE tmx
PUBLIC "-//LISA OSCAR:1998//DTD for Translation Memory eXchange//en">

電子日曆
公共標識符稱爲：「-//IETF//DTD iCalendar//en」
<!DOCTYPE iCalendar
PUBLIC "-//IETF//DTD iCalendar//en">

  • 無線標記語言

公共標識符稱爲：「-//WAPFORUM//DTD WML 1.1//en」
<!DOCTYPE wml
PUBLIC "-//WAPFORUM//DTD WML 1.1//en">

  • 音樂可擴展標記語言

三點零版本：
<!DOCTYPE　score-partwise
PUBLIC　"-//Recordare//DTD MusicXML 3.0 Partwise//en">

上面的 DOCTYPE 包含 6 部分：

1. 字符串「<!DOCTYPE」
2. 根元素通用標識符「HTML」
3. 字符串「PUBLIC」
4. 被引號括起來的公共標識符（publicId）「-//W3C//DTD HTML 4.01//en」
5. 被引號括起來的系統標識符（systemId）「http://www.w3.org/TR/html4/strict.dtd」
6. 字符串「>」

其中根元素通用標識符、公共標識符、系統標識符都可以經過腳本調用 DOM 接口得到，分別對應 document.doctype.name、document.doctype.publicId、document.doctype.systemId

  • 總結：

    我查看了在淘寶網，京東，天貓，還有博客園上都是用的<!DOCTYPE html>,這個是html5標準網頁聲明，原先的是一串很長的字符串，如今是這個簡潔形式，支持html5標準的主流瀏覽器都認識這個聲明。表示網頁採用html5，而HTML 4.01 中的doctype須要對DTD進行引用，由於HTML 4.01基於SGML，而HTML5不基於SGML，所以不須要對 DTD 進行引用，可是須要 doctype 來規範瀏覽器的行爲。我平時也是運用<!DOCTYPE html>，一方面簡潔，不會寫錯，另一方面，標準主流瀏覽器都認識，因此能夠放心寫。
  • DTD：文檔類型定義(Document Type Definition)是一套關於標記符的語法規則。它是標準通用標記語言和可擴展標記語言1.0版規格的一部分，是文檔的驗證機制。文檔類型定義是一種保證標準通用標記語言、可擴展標記語言文檔格式正確的有效方法，可經過比較文檔和文檔類型定義文件來看文檔是否符合規範，元素和標籤使用是否正確。
  • 具體解釋參照：http://baike.baidu.com/link?url=bA_s20lIL9cApp0e-fGvm2bbCvhblqjc7_1BF1gdMMdjNREQr6VZOEcylzuG5eMaJF_-olsL6ZWWQ4QKgXUwIq
  • SGML：標準通用標記語言（如下簡稱"通用標言"），是一種定義電子文檔結構和描述其內容的國際標準語言；通用標言爲語法置標提供了異常強大的工具，同時具備極好的擴展性，所以在數據分類和索引中很是有用；是全部電子文檔標記語言的起源，早在萬維網發明以前"通用標言"就已存在。

  • 具體解釋參照：http://baike.baidu.com/link?url=dTCobBuXTUw0jTNi4dpsIOU2Dt0owC8WnazmV1gsgQXOegyPSDZAMZ95BN81ckCyspnO5TTgrX-hm3_ktPagruZzvIfqBISloJIXiFgJcs_euma9v9I5iABX7g0Zyxpo3zJAzbDPCoH7zBJFg13TKa

瀏覽器的兩種文檔模式歷史：

隨着 IE 的發展，其渲染引擎（早期爲 MSHTML.dll，後來命名爲 Trident）也在不斷加入新的特性以及修正一些早先版本的錯誤。在 2001 年 IE6 正式發佈以前，當時的市面主要就是 IE 和 Netscape 的 Navigator 兩款瀏覽器，而 IE 擁有很大的用戶羣，因此大多數的頁面都是針對 IE 而設計的，可是 IE 的渲染引擎卻沒有遵循 W3C 的規範，當時微軟已經認識到 W3C 規範的重要性,因此當 IE 發展到 IE6 的時候，渲染引擎（MSHTML.dll）作出了一個重要的改變，將本身原先不符合 W3C 規範中的盒模型 box mode 繪製方式改成與 W3C 標準一致，因爲這個重大的改動，原先針對 IE 舊版本所設計的 HTML 頁面都不能正確顯示了，因此在 IE6 發佈的時候附帶了一個切換回 IE5 頁面渲染方式的功能，這個功能中就首次提出了 Quirks Mode。IE6.0之後的版本在瀏覽器內嵌了兩種表現模式：Standards Mode（標準模式或Strict Mode）和Quirks mode（怪異模式或兼容模式Compatibility Mode）。在標準模式中，瀏覽器根據W3C所定的規範來顯示頁面；而在怪異模式中，頁面將以IE5，甚至IE4的顯示頁面的方式來表現，以保持之前的網頁能正常顯示。

瀏覽器是如何決定文檔模式？

瀏覽器在準備解析、繪製一個頁面的時候，它是如何決定文檔模式的呢？實際上瀏覽器在渲染頁面以前會檢查兩個內容，一個是頁面是否有 doctype 信息，另一個是頁面是否有 x-ua-compatible 信息(暫時不討論，先討論doctype)。

Doctype 檢測

對於一個 HTML 頁面，<!DOCTYP >聲明位於其中最前面的位置，處於標籤以前，這個<!DOCTYP >能夠告知瀏覽器使用哪一種 HTML 規範，針對每種規範瀏覽器一樣也會選擇對應的文檔模式。平時最多見的三種 doctype 信息對應的文檔模式以下。

當 doctype 信息以下時，代表該頁面是遵照了 HTML5 規範的，瀏覽器會選擇 Standards Mode，這種 doctype 是最推薦的一種，咱們平時設計頁面都應該加上這一個 doctype。
　　<!DOCTYPE html>
　　
當 doctype 以下時，瀏覽器一樣會選擇 Standards Mode，雖然和第一種 doctype 有一些區別，可是幾乎能夠認爲是同樣的。
　　<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
　　
當 doctype 缺失的時候，瀏覽器會選擇 Quirks Mode，這是很是不推薦的方式，咱們應該儘可能避免 Quirks Mode，這對一個 web 應用是很是不利的地方。

實例演示：

標準模式(Standards Mode)與怪異模式(Quirks Mode)下的頁面區別因爲歷史緣由，早期的 IE 瀏覽器（IE 6 之前）將盒子的 padding 和 border 算到了盒子的尺寸中，這一模型被稱爲 IE 盒模型。

在 IE 盒模型中，
box width = content width + padding left + padding right + border left + border right
box height = content height + padding top + padding bottom + border top + border bottom
而在W3C 標準的盒模型中，box 的大小就是 content 的大小。
box width = content width，
box height = content height
以下代碼所示：

enter image description here

IE5.5下的盒子總寬度爲100px.
enter image description here

谷歌上的盒子總寬度爲160px
enter image description here

  • 總結

    因而可知，Quirks 和 Standards 這兩種文檔模式渲染頁面的時候會有很大的差異，特別是盒子模型的解釋形成不少麻煩，這些差異主要是因爲渲染引擎在歷史的發展過程當中與 W3C 標準的差別性而致使的。因此對doctype的聲明尤其重要，假如沒有聲明doctype,那麼就會開啓怪異模式！

代碼以下：
enter image description here

IE5.5/IE6/IE7/IE8效果圖以下：
enter image description here

就會在Quirks Mode下，而其餘的主流標準瀏覽器的效果是怎樣的呢？因爲其餘主流的標準瀏覽器都是用的W3C標準，因此效果以下：
（分別是谷歌，360，safari,opera的測試效果）
enter image description here

假如加上了doctype聲明，IE5.5/IE6/IE7/IE8的效果是怎樣的呢？
IE5.5仍是
enter image description here

而IE6/IE7/IE8則是：
enter image description here

  • 總結

    跟其餘採用W3C的標準瀏覽器的盒子模型同樣。如今你們已經忽視了IE5.5的存在，爲了更好實現兼容，因此doctype聲明必定不可用缺省。而寫上<!DOCTYPE html>便可。

CSS3的box-sizing屬性

  • 定義和用法
    box-sizing 屬性容許您以特定的方式定義匹配某個區域的特定元素。
    例如，假如您須要並排放置兩個帶邊框的框，可經過將 box-sizing 設置爲 "border-box"。這可令瀏覽器呈現出帶有指定寬度和高度的框，並把邊框和內邊距放入框中。

    默認值：content-box
    繼承性：no
    版本：CSS3
    JavaScript 語法：object.style.boxSizing="border-box"

  • 語法
    box-sizing: content-box|border-box|inherit;

  • content-box
    這是由 CSS2.1 規定的寬度高度行爲。
    寬度和高度分別應用到元素的內容框。
    在寬度和高度以外繪製元素的內邊距和邊框。

  • border-box
    爲元素設定的寬度和高度決定了元素的邊框盒。
    爲元素指定的任何內邊距和邊框都將在已設定的寬度和高度內進行繪製。
    經過從已設定的寬度和高度分別減去邊框和內邊距才能獲得內容的寬度和高度。
    inherit規定應從父元素繼承 box-sizing 屬性的值。

代碼以下：
enter image description here
enter image description here
enter image description here

由上面代碼所示，就能夠看出，當設置box-sizing:border-box;
爲元素設定的寬度和高度決定了元素的邊框盒。
爲元素指定的任何內邊距和邊框都將在已設定的寬度和高度內進行繪製。
經過從已設定的寬度和高度分別減去邊框和內邊距才能獲得內容的寬度和高度。

便是，內容content只有130px，width：150px,在已設定的150px內，減去左右兩邊border,就是內容值130px。
-moz-box-sizing:border-box; /* Firefox /
-webkit-box-sizing:border-box; / Safari */
上面兩行代碼則兼容了Firefox和Safari,同時測試了opera,效果圖一致以下：
enter image description here

那麼IE5.5的效果以下：
enter image description here

IE6/IE7的效果以下：
enter image description here

IE8的效果以下：
enter image description here

  • 總結

    從以上能夠看出，box-sizing屬性在IE8上是能夠實現其餘標準瀏覽器的效果，但是IE5.5/IE6/IE7 卻不能徹底兼容，從兼容性上考慮，在大型的項目上儘可能不用box-sizing。有興趣的朋友，能夠去查下box-sizing 如何實現兼容咯。

  本篇文章還涉及了不少知識點，就不一一贅述了，至於頁面渲染引擎這個點，我還不是很清楚，因此後面再總結寫文咯。

  • 結語

    假若有錯誤的地方，歡迎你們指正，謝謝！ ----妙瞳
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程