首頁 > web前端 > H5教程 > HTML5標準學習-DOCTYPE頭部分析

HTML5標準學習-DOCTYPE頭部分析

黄舟
發布: 2017-03-27 15:36:26
原創
2028 人瀏覽過

上一篇文章主要講述了HTML文件的構成,同時膚淺地接觸了「標籤省略」這個概念,本文會從概念上介紹HTML文件中第一個出現的重要元素- DOCTYPE。透過一種特定的語法,作為一種元數據,來描述XML文件中允許出現的元素,以及各元素的組成、嵌套規則等。

##但是在HTML中,DOCTYPE又有著一些不同的效果,其中之一就是著名的觸發瀏覽器標準模式的功能。

狀態,在該模式下,瀏覽器的盒子模型、樣式解析、佈局等都與標準規定的存在差異。等等,只規定了在標準模式下的概念和行為,正如文檔構成中提到的,DOCTYPE是一個HTML文檔絕對不可以省略的部分,因此就根本不存在“Quirks模式”這樣的概念。因為標準中沒有對Quirks模式做出任何的規定,因此不同瀏覽器在Quirks模式下的處理也是不同的,應用Quirks模式可謂難上加難。 #在HTML4的標準中,DOCTYPE被歸屬於「HTML版本資訊」一章中。

#過渡模式:.

#框架模式:

  • 在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&#39;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個或多個空格,關於空格的定義請參考簡介中的解釋。

  • 字元HTML,同樣大小寫不敏感。

  • 1個或多個空格。

  • 結束標記,即>。 </p> <li><p>不再推薦的DOCTYPE - deprecated doctype</p></li> <li> <p>即所謂HTML4時代的幾個DOCTYPE,其組成如下:</p> <p>在標準中,Public ID和System ID是有嚴格的對應關係的,如果規定的System ID不能有Public ID,則上面的第8項可選內容也就不能存在。 HTML5徹底放棄了HTML4中的過渡型和框架型的DOCTYPE,同時整合了XHTML的DOCTYPE聲明,得出以下6種組合方式:</p> </li> <ul class=" list-paddingleft-2" style="list-style-type: square;"> <li><p><code>&lt ;!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0//EN">

  • ##

  • ##

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

  • #

    1. 1個或多個空格。
    2. 一對引號或單引號(必須前後匹配),引號中放置一個與前面的Public ID對應的System ID。
      一段文本,即
    1. ,大小寫不敏感。

    2. 1個或多個空格。
    3. 字元
    4. HTML

      ,同樣大小寫不敏感。

    5. 1個或多個空格。
    6. 字元
    7. PUBLIC

      ,大小寫不敏感。

    8. 繼續1個或多個空格。
    9. 一對引號或單引號(必須前後符合),引號放置一個Public ID。
    10. 可選內容:
    11. 1或多個空格。
    12. 結束標記,即
    13. >

    遺留工具DOCTYPE - leagacy tool compatible doctype
  • 顧名思義,完全是為了兼容久遠時代的歷史遺產而準備的DOCTYPE ,甚至已經沒辦法考證什麼樣的「工具」會搞出這種DOCTYPE來……遺留工具型的DOCTYPE的組成如下:
  • 比如這樣的DOCTYPE就屬於此類:

    < ;!doctype HTML system "about:legacy-compat">

    ,基本上除了大小寫,沒有什麼值得改變的。

    1. 一段文本,即
    2. #,大小寫不敏感。

    3. 1個或多個空格。
    4. 字元
    5. HTML

      ,同樣大小寫不敏感。

    6. 1個或多個空格。
    7. 字元
    8. SYSTEM

      ,大小寫不敏感。

    9. 繼續1個或多個空格。
    10. 一對引號或單引號(必須前後符合),引號放一段文字
    11. about:legacy-compat

      ,注意這段文字是大小寫敏感的。

    12. 1個或多個空格。
    13. 結束標記,即
    14. >

    現實的細節

    對於DOCTYPE的作用,在真正的瀏覽中,僅僅起到觸發瀏覽器的標準模式的作用。雖然根據標準,一個HTML文檔中,DOCTYPE前可以有其他的元素,如一個U+FFEF的BOM,幾個

    註釋

    ,一點空格,但是在當前的狀態下,並沒有這麼理想:

      對於IE6-9,如果DOCTYPE前有註釋,會進入Quirks模式。
    • 對於IE6,如果DOCTYPE前存在一個XML聲明,會進入Quirks模式。
    • 寫完才發現,問題又全出在IE下…關於DOCTYPE的問題糾結至此,下一章主要講述編碼聲明的問題。

    以上是HTML5標準學習-DOCTYPE頭部分析的詳細內容。更多資訊請關注PHP中文網其他相關文章!

    相關標籤:
    來源:php.cn
    本網站聲明
    本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
    熱門教學
    更多>
    最新下載
    更多>
    網站特效
    網站源碼
    網站素材
    前端模板