DOCTYPE是document type(文檔類型)的縮寫,在web設計中用來說明你用的XHTML/HTML是什麼版本。要建立符合標準的網頁,DOCTYPE聲明是必不可少的關鍵部分。

Doctype 很容易會影響Layout上的表現,很多設計師為了方便直接地把Doctype刪除。可是這樣子是不能通過W3C的檢測。可是用上Doctype又做不到想要的東西。

文檔類型對於語法的嚴謹度有三種版本

1.過渡的(Transitional):要求非常寬鬆的DTD,它允許你繼續使用HTML4.01的標識

2.嚴格的(Strict):要求嚴格的DTD,你不能使用任何表現層的標識和屬性,例如

3.框架的(Frameset):專門針對框架頁面設計使用的DTD,如果你的頁面中包含有框架,需要採用這種DTD

Quirks 舊版模式

若將第一行的 DOCTYPE 刪除,有時候會影響到我們現在寫的 CSS 語法,如果HTML缺少第一行的 DOCTYPE 設定,將會使得瀏覽器無法在「標準模式」下顯示 CSS 效果!

缺少第一行的 DOCTYPE 設定時,瀏覽器會變成 Quirks 模式,Quirks 模式有人稱為「舊版相容模式」,主要都是讓網頁無法正確顯示 CSS 的正確效果,變成和 IE5 差不多的舊式效果! 舊式的 CSS 寫法和目前主要流行的 CSS2 寫法完全不同,呈現出來的排版效果更是大大的不同!

檢測文檔宣告與語法是否相符

當我們放上doctype標籤之後,我們怎樣才知道自己所放的標籤和網頁的html語言版本有沒有相符呢?
W3C網頁上提供了一個很貼心的程式(http://validator.w3.org/),只要把我們的網頁位址放上去檢查,就可以得知我們所放置的doctype標籤,和我們的html語言版本到底是不是相符的了。

不同文檔宣告下html語法的差別

為了進一步了解不同定義下,html語法的差別,我們先舉例說明一下doctype和常用的屬性通用性。

!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

老舊版本的瀏覽器多半是相容模式,基本上是最接近將Doctype刪除的Doctype。
Height 100% 支援
Margin 0 Auto 不支援
IE Scrolling Bar轉色支援
Img Padding 和Border 共時使用會出現問題

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

Dreamweaver預計時提供的DTD文件之一
Height 100% 不支援 (需要在Body中加入Height 100%,FireFox則需於Body及Html加入Height 100%)
Margin 0 Auto 支援
IE Scrolling Bar轉色不支援
Img Padding 支援

!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "

Dreamweaver預設時提供的DTD文件之一,Xhtml的內碼會比較特殊。 如

<BR/> <P/>

Height 100% 不支援 (需要在Body中加入Height 100%,FireFox則需於Body及Html加入Height 100%)
Margin 0 Auto 支援
IE Scrolling Bar轉色不支援
Img Padding 支援