HTML 第一行 DOCTYPE 「文件類型」對 CSS 是必要的

DOCTYPE 「文件類型」

當我們開啟一個空白的新網頁時,在 HTML 中的第一行都有 「DOCTYPE」 這在現今主流瀏覽器 CSS 的使用上是必要的喔!!

這第一行稱為「文件類型」洋文縮寫叫「DTD」主要是用來定義網頁中 HTML 語法的版本,不同的 HTML 語法版本多多少少會有一些不同的標籤,寫法和結構都不太相同,不過,平時用慣了 Dreamweaver 的話,不看原始碼時,用起來倒是沒有什麼感覺。

CSS 教學 - 網頁排版  - HTML 第一行 DOCTYPE 「文件類型」對 CSS 是必要的 - fly07

「標準模式」

常用的四種設定方法如下:

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

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

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

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

Quirks 舊版模式

就是因為用慣了 Dreamweaver 對原始碼沒有什麼感覺,有些人索性就會把第一行的 DOCTYPE 給刪掉,這下可慘了,會影響到我們現在寫的 CSS 語法, 如果 HTML 缺少第一行的 DOCTYPE 設定,將會使得瀏覽器無法在「標準模式」下顯示 CSS 效果!

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

by
姜智豪
老師

 

當您對本文有任何問題或指教,歡迎到我們的【網頁設計交流討論區】一起交流討論喔!

 

關於「姜智豪 老師」

於 1996 年開始從事網頁設計工作 20 多年,參與設計過許多網站專案的開發,一直熱衷網頁設計工作至今。從 1998 年開始從事教學工作,對於網頁設計教學有相當高的熱忱,於 2006 年創立飛肯設計學苑。主要專長 Photoashop、 HTML、CSS、RWD、JavaScript、jQuery 等網頁技術,對於 SEO 優化搜尋引擎排名提昇,以及 Instructional Design 教學專案設計亦有深入的研究。
posted in CSS 教學 - 網頁排版 and tagged , , , , , , .

留言功能已關閉。