什麼是 DOCTYPE？

<!DOCTYPE> 宣告位於 HTML 文件最頂端，在 <html> 標籤之前。它告訴瀏覽器當前文件遵循哪種文件型別定義 (DTD)，進而決定瀏覽器以何種模式 (標準模式、近標準模式、怪異模式) 解析渲染頁面。正確的 DOCTYPE 是確保跨瀏覽器一致性的第一步。

W3C 規格演進脈絡

HTML 規範時間線

• HTML 3.2 — 1997/01/14
• HTML 4.0 — 1998/05/24
• HTML 4.01 — 1999/12/24 (最廣泛使用的經典版本)

XHTML 規範時間線

XHTML 將 HTML 重構為 XML 應用，要求更嚴格的語法 (標籤閉合、屬性加引號、小寫標籤)。

• XHTML 1.0 — 2000/01/26 推薦
• XHTML 1.1 — 2001/05/31 (模組化)
• XHTML Basic / Print / Mobile Profile 等針對特定裝置的子集

常用 DTD 宣告完整對照表

HTML 4.01 三種 DTD

類型	適用場景	宣告語法
Strict	純結構語義，完全配合 CSS 排版，不使用表現屬性/元素	<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "https://www.w3.org/TR/html4/strict.dtd">
Transitional	過渡期專案，需相容舊瀏覽器，允許部分表現屬性 (如 bgcolor, align)	<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "https://www.w3.org/TR/html4/loose.dtd">
Frameset	使用框架集 (<frameset>) 的頁面	<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "https://www.w3.org/TR/html4/frameset.dtd">

XHTML 1.0 三種 DTD

類型	適用場景	宣告語法
Strict	嚴格 XML 語法，純語義結構	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Transitional	最常用，允許表現屬性，相容性最佳	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Frameset	框架頁面	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

HTML5 時代的 DOCTYPE

HTML5 簡化為唯一宣告：<!DOCTYPE html>。不區分大小寫，無需引用 DTD 網址。所有現代瀏覽器 (含 IE6+) 均啟用標準模式。這是目前新專案的首選。

進階應用技巧與常見誤區

1. DOCTYPE 必須寫在第一行

前面不能有任何字元 (含空白、BOM、註解)，否則 IE 會進入怪異模式。

2. 嚴格模式 vs 怪異模式的渲染差異

• 盒模型計算不同 (IE 怪異模式 width 包含 padding/border)
• 圖片垂直對齊基準不同
• 表格字體繼承行為不同
• CSS 大小寫敏感度不同

3. XHTML 傳輸 MIME 型別陷阱

若伺服器以 text/html 傳送 XHTML，瀏覽器仍按 HTML 解析，XML 的嚴格錯誤處理不生效。真正的 XHTML 需 application/xhtml+xml，但 IE8 以下不支援。

4. 條件註解搭配 DOCTYPE 修復 IE Bug

<!--[if IE 6]>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<![endif]-->
<!--[if gt IE 6]>