《HTML5+CSS3網頁設計入門必讀》——2.4 DOCTYPE:形式更簡潔
本節書摘來自非同步社群《HTML5+CSS3網頁設計入門必讀》一書中的第2章,第2.4節,作者: 【英】Jeremy Keith , 【美】Dan Cederholm 更多章節內容可以訪問雲棲社群“非同步社群”公眾號檢視。
2.4 DOCTYPE:形式更簡潔
文件型別宣告(Document Type Declaration)簡稱為doctype,一直用於指定文件所編寫的標記型別。
HTML 4.01的 doctype如下所示(»為自動換行標記):
<!DOCTYPE HTML PUBLIC »
"-//W3C//DTD HTML 4.01//EN" »
"http://www.w3.org/TR/html4/strict.dtd">
XHTML 1.0 的doctype如下所示:
<!DOCTYPE html PUBLIC »
"-//W3C//DTD XHTML 1.0 Strict //EN" »
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
這些doctype看起來並不易讀,但它們以其獨特的方式簡單地說明了:“該文件用HTML 4.01編寫”或“該文件用XHTML 1.0編寫”。
如果doctype聲稱“該文件用HTML5編寫”,那麼按道理其中應該會出現數字5。但事實並非如此。HTML5的doctype如下所示:
<!DOCTYPE html>
該doctype是如此之短,甚至可以讓人將其背誦下來。
這實在是太不可思議了!如果 doctype中不含有版本號,那麼該如何指定其他版本的HTML呢?
第一次看到HTML5的doctype的時候,我認為這是高度傲慢的結果。心想:“難道他們真相信這就是標記規範的最終版了嗎?”
然而事實上,HTML5的doctype是非常務實的。由於HTML5需要支援現有內容,所以其doctype可以應用於現有的HTML 4.01文件和XHTML 1.0文件。任何未來版本的HTML也需要支援HTML5中的現有內容,因此應用版本號來標記文件的觀念是有缺陷的。
事實上,doctype並不那麼重要。假設需要為一個文件提供HTML 4.01的doctype。如果該文件中包含來自另一個規範的元素,如HTML 3.2或HTML5,那麼瀏覽器將仍然呈現該文件的這一部分。這是因為瀏覽器支援的是特性,而非doctype。
起初,文件型別宣告(Document Type Declaration)是為驗證器而非為瀏覽器而設計的。瀏覽器僅在“doctype轉換”的情況下才會關注doctype——“doctype轉換”(doctypy switching)是一個聰明的小黑客,它根據是否存在合適的doctype來轉換顯示模式,即怪異模式(quirks mode)或標準模式(standard mode)。
為了確保瀏覽器以標準模式顯示,至少需要HTML5的doctype。事實上,這是包含doctype的唯一原因。不用HTML5的doctype編寫的HTML文件仍然是有效的HTML5。
相關文章
- 《HTML5+CSS3網頁設計入門必讀》——6.6問與答HTMLCSSS3網頁
- 《HTML5+CSS3網頁設計入門必讀》——1.2建立Web內容HTMLCSSS3網頁Web
- 《HTML5+CSS3網頁設計入門必讀》——1.3 XHTML2:不被接受HTMLCSSS3網頁
- 《HTML5+CSS3網頁設計入門必讀》——第2章 HTML5的設計2.1 設計原則HTMLCSSS3網頁
- 《HTML5+CSS3網頁設計入門必讀》——1.7 XHTML已被廢棄:XHTML的語法永存HTMLCSSS3網頁
- 《HTML5+CSS3網頁設計入門必讀》——1.5 從WebApps1.0到HTML5HTMLCSSS3網頁WebAPP
- 簡潔的網頁設計原則網頁
- 《HTML5+CSS3網頁設計入門必讀》——1.9在不涉及Web伺服器的情況下分發內容HTMLCSSS3網頁Web伺服器
- 《HTML5+CSS3網頁設計入門必讀》——第1章 標記簡史1.1 從IETF到W3C:HTML4的誕生過程HTMLCSSS3網頁
- 淺談零信任網路,入門必讀!
- “簡潔大氣”設計指南
- 極簡 Node.js 入門 - 2.4 定時器Node.js定時器
- Python+django網頁設計入門(15):公用模板設計與使用PythonDjango網頁
- Python+django網頁設計入門(16):優化設計複用分頁程式碼PythonDjango網頁優化
- Android簡潔架構設計Android架構
- 簡潔的bash程式設計技巧程式設計
- 網頁設計入門應該學什麼?網站設計八步驟分享網頁網站
- 一文帶你響應式網頁設計入門網頁
- 給網頁設計師的移動端網頁設計簡明指南網頁
- 使用 Macro 讓你的程式碼更簡潔,更具有可讀性Mac
- 網頁佈局CSS技巧-Web設計必知網頁CSSWeb
- 新手入門必讀 (請進)--簡體字版 (2千字)
- CSS分頁簡潔樣式CSS
- 【譯】系統設計入門之面試題解答 —— 設計一個網頁爬蟲面試題網頁爬蟲
- 用Java程式設計 請保持簡潔Java程式設計
- 資料庫設計簡單入門資料庫
- 讓你的DEVONthink UI 介面更簡潔?devUI
- 如何讓我們的模型更簡潔模型
- 程式設計和網路程式設計入門程式設計
- java入門之初讀___java程式設計思想Java程式設計
- 從萌新到大神必讀書籍 《Python快樂程式設計基礎入門》Python程式設計
- 網頁設計師必用的11個SEO技巧網頁
- 網頁設計師必備的10個CSS技巧網頁CSS
- [翻譯] 讓你的程式碼更簡短,更整潔,更易讀的ES6小技巧
- 極簡網頁設計技巧,打造簡約之美網頁
- 直播系統app原始碼,簡潔好看的登入頁面APP原始碼
- Web頁面中的“門”—Web端登入頁的設計Web
- 設計模式入門-簡單工廠模式設計模式