HTML學習筆記——DOCTYPE和DTD，標準模式和兼容模式

時間 2020-02-05

標籤 html 學習筆記 doctype dtd 標準模式兼容欄目 HTML 简体版

原文原文鏈接

主要涉及知識點：
HTML與XHTML
HTML與XHTML的區別
DOCTYPE與DTD的概念
DTD的分類以及DOCTYPE的聲明方式
標準模式（Standard Mode）和兼容模式（Quircks Mode）
標準模式（Standard Mode）和兼容模式（Quircks Mode）的區別
HTML與XHTML HTML:超文本標記語言 (Hyper Text Markup Language)
XHTML:可擴展超文本標記語言 (EXtensible HyperText Markup Language)，是一種置標語言。
HTML是一種基於標準通用標記語言（SGML）的應用，XHTML則基於可擴展標記語言（XML）
XHTML的目標是取代HTML，與HTML4.01幾乎相同，是更嚴格更純淨的 HTML 版本。
HTML 和 XHTML 的區別簡單來講，XHTML 能夠認爲是 XML 版本的 HTML，爲符合 XML 要求，XHTML 語法上要求更嚴謹些。
本質上說，XHTML是一個過渡技術，結合了部分XML的強大功能及大多數HTML的簡單特性。創建XHTML的目的就是實現HTML向XML的過渡。在HTML5成爲主流以前，Html4.01一直是大多數人使用的Html版本，Html5目標是取代HTML4.01和XHTML1.0標準，旨在提升網頁性能，增長頁面交互。
HTML與XHTML的區別 XHTML 與 HTML 4.01 標準沒有太多的不一樣。主要的不一樣體如今下面幾點：
XHTML 元素必須被正確地嵌套。
XHTML 元素必須被關閉。
標籤名必須用小寫字母。
XHTML 文檔必須擁有根元素。
DOCTYPE與DTD的概念文檔類型定義(Document Type Definition)是一套爲了進行程序間的數據交換而創建的關於標記符的語法規則，是HTML的驗證機制。DOCTYPE標籤是一種標準通用標記語言的文檔類型聲明，聲明文檔的解析類型，它的目的是要告訴標準通用標記語言解析器，它應該使用什麼樣的DTD（用什麼樣的文檔標準）來解析文檔。DTD定義了文檔中的元素(標記和屬性)和實體，以及相互關係。經過DTD驗證XML文檔的有效性。DTD爲解析器提供瞭解析HTML文檔的依據。
DTD的分類以及DOCTYPE的聲明方式因爲HTML5不基於 SGML，所以不須要對DTD進行引用；可是須要doctype來規範瀏覽器的行爲(讓瀏覽器按照它們應該的方式來運行)。
所以HTML5的DOCTYPE聲明：
php

<!DOCTYPE html>

而HTML4.01基於SGML，因此須要對DTD進行引用，才能告知瀏覽器文檔所使用的文檔類型，有如下三種類型：
HTML 4.01 Strict DOCTYPE聲明：html

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

HTML 4.01 Transitional DOCTYPE聲明：瀏覽器

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

HTML 4.01 Frameset DOCTYPE聲明：框架

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

XHTML 1.0 Strict DOCTYPE聲明：ide

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

XHTML 1.0 Transitional DOCTYPE聲明：性能

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

XHTML 1.0 Frameset DOCTYPE聲明：學習

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

三種DTD類型的做用說明：
Strict : 乾淨的標記，免於表現層的混亂，與層疊樣式表（CSS）配合使用。
Transitional :包含 W3C 所指望移入樣式表的呈現屬性和元素。使用不支持層疊樣式表（CSS）的瀏覽器時使用。
Frameset : 應當被用於帶有框架的文檔。除 frameset 元素取代了 body 元素以外，Frameset等同於 Transitional。
標準模式（Standard Mode）和兼容模式（Quircks Mode）在W3C標準出來以前，瀏覽器對頁面的渲染沒有統一的標準，各個瀏覽器對同一頁面的渲染有必定的差別，而每一個瀏覽器的不一樣版本對頁面的渲染也有必定程度上的差別。而W3C標準出來以後，瀏覽器對頁面的渲染就有了統一的標準。前者對於瀏覽器使用本身的方式渲染頁面的模式，咱們稱之爲Quircks Mode（怪異模式、兼容模式或混雜模式）；而對於後者瀏覽器按照標準解析執行代碼的模式，咱們稱之爲Standard Mode（標準模式或嚴格模式）。在標準模式中，瀏覽器根據規範呈現頁面；在兼容模式中，頁面以一種比較寬鬆的向後兼容的方式顯示。其實，還有一種模式叫近標準模式，它與標準模式一致，除了在處理下面這種狀況時：若是一個塊級元素除了空白文本（空格，tab等字符）外再無其它內容，則它的高度按0處理；若是有子元素，則它的高度不能比子元素大，不管它的font-size多大。
那麼，瀏覽器解析時到底使用標準模式仍是怪異模式？這就和以前提到的DOCTYPE有關了。
標準模式：
XHTML文檔包含完整的DOCTYPE聲明時，通常以標準模式呈現；
文檔包含嚴格DTD類型的DOCTYPE聲明時，以標準模式呈現；
文檔包含過渡DTD類型的DOCTYPE聲明且聲明包含URI時，以標準模式呈現。
兼容模式：
文檔不包含DOCTYPE聲明或DOCTYPE聲明不正確時，以兼容模式呈現；
文檔包含過渡或框架DTD類型的DOCTYPE聲明但聲明不包含URI時，以兼容模式呈現；
在IE中，若是DOCTYPE聲明在XML以後，以兼容模式呈現。
標準模式（Standard Mode）和兼容模式（Quircks Mode）的區別最後總結一下，在標準模式和兼容模式下，頁面的呈現主要有哪些區別：
關於盒模型：
在標準模式下，元素width是內容寬度，即：元素實際width = 元素width + 元素padding + 元素border，（盒子的寬度還要加上元素margin的寬度）；
在兼容模式下，元素width是元素的實際寬度，即：元素width = 元素內容width + 元素padding + 元素border，（盒子的寬度還要加上元素margin的寬度）。
盒模型：主要針對塊級元素，把每一個塊級元素都想象成一個盒子，每一個盒子有外邊距（margin）、邊框（border）、內邊距（padding）、內容（content）。字體

關於行內元素：
對於行內元素的垂直對齊樣式設置，基於 Gecko 的瀏覽器（Mozilla Firefox、HotBrowser、Mozilla Suite、Camino）標準模式對齊至基線，怪異模式對齊至底部；
對於行內元素的高度（height）和寬度（width）的設置，標準模式下不生效，而在兼容模式下會生效。
四大內核： Trident，主要有IE瀏覽器以及多核瀏覽器
Gecko，主要有Firefox以及Firefox的衍生瀏覽器
WebKit，主要有Chrome與Chrome的衍生瀏覽器、Safari以及多核瀏覽器
Presto，以前主要應用於Opera，Opera現已改用Google Chrome的Blink內核。ui

關於百分比的高度設置：在標準模式下，一個元素的高度是由其包含的內容來決定的，若是父元素沒有設置百分比的高度，子元素設置一個百分比的高度是無效的。
關於水平居中設置：在標準模式下，使用margin:0 auto可使元素水平居中，但在兼容模式下會失效。
關於!important聲明：在兼容模式下，IE6/7/8下使用!important聲明無效。
其餘：兼容模式下，設置圖片的padding會失效；table中的字體屬性不能繼承父元素的字體屬性；設置white-space:pre會失效。spa

轉載於猿2048:➫《HTML學習筆記——DOCTYPE和DTD，標準模式和兼容模式》