HTML5標準學習 – DOCTYPE

来源:http://www.cnblogs.com/shouce/archive/2016/03/17/5285971.html
-Advertisement-
Play Games

所謂DOCTYPE,最初是XML的概念,即通過一種特定的語法,作為一種元數據,來描述XML文檔中允許出現的元素,以及各元素的組成、嵌套規則等。具體的概念可以在WIKI中中得到一個更詳細的結果。 但是在HTML中,DOCTYPE又有著一些不同的效果,其中之一就是著名的觸發瀏覽器標準模式的功能。即如果沒


所謂DOCTYPE,最初是XML的概念,即通過一種特定的語法,作為一種元數據,來描述XML文檔中允許出現的元素,以及各元素的組成、嵌套規則等。具體的概念可以在WIKI中中得到一個更詳細的結果。

但是在HTML中,DOCTYPE又有著一些不同的效果,其中之一就是著名的觸發瀏覽器標準模式的功能。即如果沒有DOCTYPE,瀏覽器會進入一種被稱為Quirks模式的怪異狀態,在該模式下,瀏覽器的盒模型、樣式解析、佈局等都與標準規定的存在差異。

需要註意的是,所謂的HTML標準、DOM標準等,只規定了在標準模式下的概念和行為,正如文檔構成中提到的,DOCTYPE是一個HTML文檔絕對不可以省略的部分,因此就根本不存在“Quirks模式”這樣的概念。也正是因為標準中沒有對Quirks模式做出任何的規定,因此不同瀏覽器在Quirks模式下的處理也是不同的,應用Quirks模式可謂難上加難。

HTML4的DOCTYPE

在HTML4的標準中,DOCTYPE被歸屬於“HTML版本信息”一章中。在該章節中,標準指定了3種DOCTYPE:

  • 嚴格模式:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
  • 過渡模式:<!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 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

在HTML4的標準中,每一個DOCTYPE對應的dtd文件都是有合法的URL指定的,可以通過互聯網進行下載。瀏覽器可以根據URL獲得到dtd的具體內容,並根據內容的規定來解析文檔。

現實是不同的

HTML4如同XML一樣,是一個相當理想化的標準。但是,現實往往並沒有這麼理想,試想下麵的HTML文檔:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" 
                      "http://www.w3.org/TR/html4/frameset.dtd">
<html>
    <head>
        <title>I'm not a frameset</title>
    </head>
    <body>
        <p>So what?</p>
    </body>
</html>

這個文檔採用了一個框架模式的DOCTYPE,但其正文確沒有使用任何<frame>元素,相對應地使用了應該由嚴格模式或者過渡模式指定的,標準的HTML結構。那麼在這種情況下,瀏覽器能做什麼呢?

拒絕渲染該頁面?不,瀏覽器不敢這麼做,在激烈的市場競爭之中,如果因此而導致部分頁面無法渲染的話,就只能眼睜睜看著市場份額註入別家田了。所以瀏覽器頂多弱弱地報一個警告以示抗議,卻依舊得乖乖地解析出這個文檔並正確渲染。

這就是所謂的瀏覽器的“容錯性”,事實上無論你的DOCTYPE是什麼,瀏覽器都會以最大的相容能力去解析一個文檔,並以最大的努力讓這個文檔顯示得符合開發者的預期。而瀏覽器的這一特性,也逐漸讓標準制定者開始意識到,DOCTYPE似乎真的不怎麼重要。因此,在HTML5中,DOCTYPE發生了一次重大的變化……

HTML5的DOCTYPE

到了HTML5了,這一變化相信多數人已經知道,就是HTML5將DOCTYPE的聲明簡化了,只需要<!DOCTYPE html>即可。

正好前文所述,在HTML4時代,標準制定者已經認識到,DOCTYPE對瀏覽器的渲染並沒有太大的幫助,除了給無聊的w3c驗證器看以外,DOCTYPE似乎只有觸發瀏覽器相容模式的作用。於是標準工作組採取了非常實際的態度,測試了所有課程順觸發標準模式的最簡DOCTYPE,最終得出了這一結論。

但是故事不會這麼簡單,標準工作組也不是完成這麼簡單的動作就撒手不管的無賴分子,事實上他們還是很盡責任地考慮到了向後相容性、可擴展性等一系列的事情,最後將DOCTYPE一章用了大量文字來進行描述,得到一個非常詳實的結果。

HTML5的參考手冊相關章節中,將DOCTYPE分為3類:

普通DOCTYPE - normal doctype

普通DOCTYPE就是我們所見的最簡形式,即<!DOCTYPE html>,他的真正組成是這樣的:

  1. 一段文本,即<!DOCTYPE,大小寫不敏感。
  2. 1個或多個空格,關於空格的定義請參照簡介中的解釋。
  3. 字元HTML,同樣大小寫不敏感。
  4. 1個或多個空格。
  5. 結束標記,即>
不再推薦的DOCTYPE - deprecated doctype

即所謂HTML4時代的幾個DOCTYPE,其組成如下:

  1. 一段文本,即<!DOCTYPE,大小寫不敏感。
  2. 1個或多個空格。
  3. 字元HTML,同樣大小寫不敏感。
  4. 1個或多個空格。
  5. 字元PUBLIC,大小寫不敏感。
  6. 繼續1個或多個空格。
  7. 一對引號或單引號(必須前後匹配),引號中放一個Public ID。
  8. 可選內容:
    1. 1個或多個空格。
    2. 一對引號或單引號(必須前後匹配),引號中放一個與前面的Public ID對應的System ID。
  9. 1個或多個空格。
  10. 結束標記,即>

在標準中,Public ID和System ID是有嚴格的對應關係的,如果規定的System ID不能有Public ID,則上面的第8項可選內容也就不能存在。HTML5徹底放棄了HTML4中的過渡型和框架型的DOCTYPE,同時整合了XHTML的DOCTYPE聲明,得出以下6種組合方式:

  • <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0//EN">
  • <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html40/strict.dtd">
  • <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
  • <!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 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  • <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
遺留工具DOCTYPE - leagacy tool compatible doctype

顧名思義,完全是為了相容久遠時代的歷史遺產而準備的DOCTYPE,甚至都已經沒辦法考證什麼樣的“工具”會搞出這種DOCTYPE來……遺留工具型的DOCTYPE的組成如下:

  1. 一段文本,即<!DOCTYPE,大小寫不敏感。
  2. 1個或多個空格。
  3. 字元HTML,同樣大小寫不敏感。
  4. 1個或多個空格。
  5. 字元SYSTEM,大小寫不敏感。
  6. 繼續1個或多個空格。
  7. 一對引號或單引號(必須前後匹配),引號中放一段文本about:legacy-compat,註意這段文本是大小寫敏感的。
  8. 1個或多個空格。
  9. 結束標記,即>

比如這樣的DOCTYPE就屬於此類:<!doctype HTML system "about:legacy-compat">,基本上除了大小寫,沒有什麼值得改變的。

現實的細節

對於DOCTYPE的作用,在真正的瀏覽中,僅僅起到觸發瀏覽器的標準模式的作用。雖然根據標準,一個HTML文檔中,DOCTYPE前可以有其他的元素,如一個U+FFEF的BOM,幾個註釋,一點空格,但是在當前的狀態下,並沒有這麼理想:

  • 對於IE6-9,如果DOCTYPE前存在註釋,會進入Quirks模式。
  • 對於IE6,如果DOCTYPE前存在一個XML聲明,會進入Quirks模式。

寫完才發現,問題又全出在IE下……關於DOCTYPE的問題糾結至此,下一章主要講述編碼聲明的問題。


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • Swift是蘋果2014年推出的全新的編程語言,它繼承了C語言、ObjC的特性,且剋服了C語言的相容性問題。Swift發展過程中不僅保留了ObjC很多語法特性,它也借鑒了多種現代化語言的特點,在其中你可以看到C#、Java、Javascript、Python等多種語言的影子。同時在2015年的WWD
  • Elasticsearch中數據都存儲在分片中,當執行搜索時每個分片獨立搜索後,數據再經過整合返回。那麼,如果要實現分頁查詢該怎麼辦呢? 更多內容參考 "Elasticsearch資料彙總" 按照一般的查詢流程來說,如果我想查詢前10條數據: 1 客戶端請求發給某個節點 2 節點轉發給個個分片,查詢
  • 轉載自:http://www.cnblogs.com/xusir/archive/2013/05/19/3086878.html
  • 裝飾者模式(Decorator):動態地為一個對象添加一些額外的職責,若要擴展一個對象的功能,裝飾者提供了比繼承更有彈性的替代方案。 結構圖: 下麵用一個實例來講解一下裝飾者模式《head first 設計模式》中的例子:比如在星巴茲咖啡館,人們需要根據自己的愛好來訂購咖啡,而具體的coffee種類
  • Spring載入XML配置文件
  • 500 500的錯誤通常是由於伺服器上代碼出錯或者是拋出了異常 解決方法:查看一下對應的代碼是不是有問題。 502 502即 Bad Gateway網關(這裡的網關是指CGI,即通用網關介面,從名字就能看出來是php的cgi的問題)錯誤,nginx發生這種錯誤通常是nginx與php(通常是php-
  • 簡介: 下載: 點擊這裡下載 討論: 點擊這裡討論 截圖: 簡介: 下載: 點擊這裡下載 討論: 點擊這裡討論 截圖:
  • 開始製作自己的個人簡歷啦,決定要使用固定導航欄,又打算使用fullpage.js做全屏滾動。 仔細看了fullpage文檔之後,發現不用額外寫js代碼就可以實現以下效果: 1.當滾動翻頁時,導航欄也自動定位到這一頁的標簽 2.當然點擊標簽時,也是滾動到那一頁而不是直接跳轉的。 一、準備工作肯定是要先
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...