搜尋
首頁web前端html教學聊一聊HTML <!DOCTYPE> 标签

聊一聊HTML <!DOCTYPE> 标签

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
Jun 06, 2016 am 09:32 AM

一般一个基本html页面的结构，如下代码所示：

<html>

    <head>

        <title>我是基本的页面结构</title>

    </head>

    <body>

        //...一些其他代码

    </body>
</html>

基本的页面有了，那这个页面里的字符，浏览器要怎么来解析呢。浏览器只能根据自己的理解来生成DOM tree。然后按照自己的方式，根据里面的标签来生成对应的对象及对象层级关系。如果想把页面真正的渲染出来就需要告诉浏览器按照怎样一种规则来渲染，如果没有浏览器就会想当然的去做了。

HTML的定义使用DTD文件，这种格式用来定义SGML族语言，它包含对所有允许的元素的定义，包括它们的属性和层级关系。

当没有引入doctype标签时，页面是按照怪异模式(quirks mode)渲染的，这时候页面对样式的解析是使用浏览器的方式进行的，因为各个浏览器厂商对于页面各元素的解析行为各不相同，导致大家各有各的样，奇奇怪怪的（我是这样理解的）。
当引入doctype标签后，页面就是按照doctype标签的声明的标准，对各元素进行解析来渲染。这个时候由于声明的标准都是一致的，浏览器在对各元素的渲染方式也就相同了，这个时候页面可以在多数浏览器中实现相同的排版。这样的大家都统一了，都是按照一个标准在走，所以这个时候页面就处于标准模式(strict mode)。

怎样切换这两种模式呢？

第1种方法，通过添加和删除doctype来让页面处于相应的模式。
第2种方法，在IE中可以通过切换文档模式来快速切换。

具体这个切换有什么用，其实没什么用。
有时IE出现样式错乱，可以通过观察这个文档模式来确定BUG产生原因。
比如，之前的文章中写到过的，在文档声明前出现注释这种情况的BUG。

而在现代浏览器中，怪异模式也能很好的解析。

了解过去才知未来

在HTML 4.01中,DOCTYPEK声明引用DTD，基于SGML的语言标准。DTD的标记语言的规则，使浏览器可以正确呈现。
HTML5时代的到来，已经不基于SGML，所以也不需要引用DTD了。
下面就简单的介绍一下HTML4.01中的几种经常引用的DOCTYPE声明。

HTML 4.01 Strict

该DTD包含所有HTML元素和属性，但不包括展示性的和弃用的元素(比如font)。不允许框架集(Framesets)

HTML 4.01 Transitional

该DTD包含所有HTML元素和属性，包括展示性的和弃用的元素(比如font)。不允许框架集(Framesets)

HTML 4.01 Frameset

该DTD等于与HTML 4.01 Transitional。但允许框架集(Framesets)

XHTML 1.0 Strict

该 DTD 包含所有 HTML 元素和属性，但不包括展示性的和弃用的元素（比如 font）。不允许框架集（Framesets）。必须以格式正确的 XML 来编写标记。

XHTML 1.0 Transitional

该 DTD 包含所有 HTML 元素和属性，包括展示性的和弃用的元素（比如 font）。不允许框架集（Framesets）。必须以格式正确的 XML 来编写标记。

XHTML 1.0 Frameset

该 DTD 包含所有 HTML 元素和属性，包括展示性的和弃用的元素（比如 font）。但允许框架集（Framesets）。必须以格式正确的 XML 来编写标记。

XHTML 1.1

该 DTD 等同于 XHTML 1.0 Strict，但允许添加模型（例如提供对东亚语系的 ruby 支持）。

HTML5的声明

是不是眼睛看花了，我也看花了，写了这么多年的页面。前半时间都是在和html 4.01及xhtml打交道，但也没怎么去记这个。听说以前有的公司还会专门让默写这个，阿门。

DW中的文档类型设置

很多人的入门都是从DW开始。使用DW，可以在菜单里找到编辑-首选参数-创建文档-默认文档类型进行设置。对应图片大致如下：

选择相应的文档类型，下次再创建时会自动生成对应的文档类型的头。

如果你想装B，非要记住上面的这些个字符头。我会说你闲得蛋疼，下面可以这样去记（好吧我也蛋疼了），xhtml类似。
第1步记住基本代码

空1//EN" "http://www.w3.org/TR/html4/填空2.dtd">

第2步记住文档类型英文

html 4.01类型
Strict (空 Strict)
Transitional (Transitionnal loose)
Frameset(Frameset frameset)

第3步填进去

如果你在默默记，一个你可以去吹牛了，另一个你应该尽快尝试HTML5了。

小提示

  • 声明没有结束标签
  • 声明对大小写不敏感
  • 始终向 HTML 文档添加 声明，这样浏览器才能获知文档类型。
  • 声明必须是 HTML 文档的第一行
  • 声明不是 HTML 标签；它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令。

总结

个人拙见：在整个HTML的演进过程中，文档类型各浏览器解析页面依据的标准，促进了html语言的发展，也方便广大页面开发人员，可以把主要精力放到创新页面内容上，而不是各种兼容上。HTML5的出现，也是这种统一后的发展。大家不在寻求各自的特立独行，而是创造更好的生态环境，把对标准的实现做为目标。之后这些进入历史的内容，也就留给我们吹吹牛得了。那里讲得不对的，真心希望可以指出来，以纠正我长久的认知错误。

附录一：SGML

以下内容来自百度百科

简介

标记分为两种：
一种称为procedardmarkup，用来描述文档显示的样式；
另一种称为descriptive markup，用来描述文档中的文字的用途。制定SGML的基本思想是把文档的内容与样式分开。

工作原理

一个典型的文档可被分成3个层次：结构(structure)、内容(content)和样式(style)。SGML主要是处理结构和内容之间的关系。

(1) 结构

　　为了描述文档的结构，SGML定义了一个称为“文档类型定义(Document Type Definition，DTD)”的文件(file)，它为组织文档的文档元素(例如章和章标题，节和主题等)提供了一个框架。此外，DTD还为文档元素之间的相互关系制定了规则。例如，“章的标题必须是在章开始之后的第一个文档元素”，“每个列表至少要有两个项目”等。DTD定义的这些规则可以确保文档的一致性。

(2) 内容

　　这里指的内容就是信息本身。内容包括信息名称(标题)、段落、项目列表和表格中的具体内容，具体的图形和声音等。确定内容在DTD结构中的位置的方法称为“加标签(tagging)”，而创建SGML文档实际上就是围绕内容插入相应的标签。这些标签就是给结构中的每一部分的开始和结束做标记。

附录二：HTML 元素和有效的 DTD

标签 HTML5 HTML 4.01 / XHTML 1.0 XHTML 1.1
Transitional Strict Frameset
Yes Yes Yes Yes Yes
Yes Yes Yes Yes Yes
No Yes Yes Yes Yes
Yes Yes Yes Yes Yes
No Yes No Yes No
Yes Yes Yes Yes No
Yes No No No No
Yes No No No No
Yes No No No No
Yes Yes Yes Yes Yes
Yes Yes Yes Yes Yes
No Yes No Yes No
Yes No No No No
Yes Yes Yes Yes No
No Yes Yes Yes Yes
Yes Yes Yes Yes Yes
Yes Yes Yes Yes Yes

Yes Yes Yes Yes Yes
Yes Yes Yes Yes Yes
Yes No No No No
Yes Yes Yes Yes Yes
No Yes No Yes No
Yes Yes Yes Yes Yes
Yes Yes Yes Yes Yes
Yes Yes Yes Yes No
Yes Yes Yes Yes No
Yes No No No No
Yes No No No No
Yes Yes Yes Yes Yes
Yes Yes Yes Yes No
Yes No No No No
Yes Yes Yes Yes Yes
No Yes No Yes No
Yes Yes Yes Yes Yes
Yes Yes Yes Yes Yes
Yes Yes Yes Yes Yes
Yes Yes Yes Yes Yes
Yes No No No No
Yes Yes Yes Yes Yes
Yes No No No No
Yes No No No No
No Yes No Yes No
Yes No No No No
Yes Yes Yes Yes Yes
No No No Yes No
No No No Yes No
Yes Yes Yes Yes Yes
Yes No No No No

to

Yes Yes Yes Yes Yes
Yes Yes Yes Yes Yes
Yes Yes Yes Yes Yes
Yes Yes Yes Yes Yes
Yes Yes No Yes No
聊一聊HTML <!DOCTYPE> 标签 Yes Yes Yes Yes Yes
Yes Yes Yes Yes Yes
Yes Yes Yes Yes No
Yes No No No No
Yes Yes Yes Yes Yes
Yes Yes Yes Yes Yes
Yes Yes Yes Yes Yes
  		• Yes Yes Yes Yes Yes
    Yes Yes Yes Yes Yes
    Yes Yes Yes Yes No
    Yes No No No No
    Yes Yes No Yes No
    Yes Yes Yes Yes Yes
    Yes No No No No
    Yes No No No No
    No Yes No Yes No
    Yes Yes Yes Yes Yes
    Yes Yes Yes Yes Yes
      		Yes Yes Yes Yes Yes
      Yes Yes Yes Yes Yes
      Yes Yes Yes Yes Yes
      Yes No No No No

      		Yes Yes Yes Yes Yes
      Yes Yes Yes Yes Yes 
      		
Yes
Yes
Yes
Yes
Yes



      

      

Yes
No
No
No
No



      

      

Yes
Yes
Yes
Yes
Yes



      

      

Yes
No
No
No
No



      

      

Yes
No
No
No
No



      

      

Yes
No
No
No
No



      

      

Yes
Yes
No
Yes
No



      

      

Yes
Yes
Yes
Yes
Yes



      

      
<script></script>
Yes
Yes
Yes
Yes
Yes



      

      

      		
Yes
No
No
No
No



      

      

Yes
Yes
Yes
Yes
Yes



      

      

Yes
Yes
Yes
Yes
Yes



      

      

Yes
No
No
No
No



      

      

Yes
Yes
Yes
Yes
Yes



      

      

No
Yes
No
Yes
No



      

      

Yes
Yes
Yes
Yes
Yes



      

      

Yes
Yes
Yes
Yes
Yes



      

      

Yes
Yes
Yes
Yes
Yes



      

      

Yes
No
No
No
No



      

      

Yes
Yes
Yes
Yes
Yes



      

      


      

      Yes
Yes
Yes
Yes
Yes




      


      
      

      Yes
Yes
Yes
Yes
No




      


Yes
Yes
Yes
Yes
Yes



      

      

Yes
Yes
Yes
Yes
Yes



      

      


      
      


      Yes
Yes
Yes
Yes
No




      



Yes
Yes
Yes
Yes
Yes



      

      

      

      Yes
Yes
Yes
Yes
No




      

Yes
No
No
No
No



      

      

Yes
Yes
Yes
Yes
Yes



      

      


      

      
Yes
Yes
Yes
Yes
Yes



      

      

Yes
No
No
No
No



      

      

No
Yes
Yes
Yes
Yes



      

      

No
Yes
No
Yes
No



      

      

        		
Yes
Yes
Yes
Yes
Yes



        

        

Yes
Yes
Yes
Yes
Yes



        

        

Yes
No
No
No
No



        

        

Yes
No
No
No
No



        





        



        

         扩展阅读：
        

        浏览器是怎样工作的（一）：基础知识
        

        浏览器是怎样工作的：渲染引擎，HTML解析
        

        HTML解析原理
        

        

        
        		

        
        

        陳述
        本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
        相關文章
        HTML的角色：構建Web內容HTML的角色：構建Web內容Apr 11, 2025 am	 12:12 AM
        HTML的作用是通過標籤和屬性定義網頁的結構和內容。 1.HTML通過到、等標籤組織內容，使其易於閱讀和理解。 2.使用語義化標籤如、等增強可訪問性和SEO。 3.優化HTML代碼可以提高網頁加載速度和用戶體驗。
        HTML和代碼：仔細觀察術語HTML和代碼：仔細觀察術語Apr 10, 2025 am	 09:28 AM
        htmlisaspecifictypefodyfocusedonstructuringwebcontent，而“代碼” badlyLyCludEslanguagesLikeLikejavascriptandPytyPythonForFunctionality.1）htmldefineswebpagertuctureduseTags.2）“代碼”代碼“ code” code code code codeSpassSesseseseseseseseAwiderRangeLangeLangeforLageforLogageforLogicIctInterract
        HTML，CSS和JavaScript：Web開發人員的基本工具HTML，CSS和JavaScript：Web開發人員的基本工具Apr 09, 2025 am	 12:12 AM
        HTML、CSS和JavaScript是Web開發的三大支柱。 1.HTML定義網頁結構，使用標籤如、等。 2.CSS控製網頁樣式，使用選擇器和屬性如color、font-size等。 3.JavaScript實現動態效果和交互，通過事件監聽和DOM操作。
        HTML，CSS和JavaScript的角色：核心職責HTML，CSS和JavaScript的角色：核心職責Apr 08, 2025 pm	 07:05 PM
        HTML定義網頁結構，CSS負責樣式和佈局，JavaScript賦予動態交互。三者在網頁開發中各司其職，共同構建豐富多彩的網站。
        HTML容易為初學者學習嗎？HTML容易為初學者學習嗎？Apr 07, 2025 am	 12:11 AM
        HTML適合初學者學習，因為它簡單易學且能快速看到成果。 1)HTML的學習曲線平緩，易於上手。 2)只需掌握基本標籤即可開始創建網頁。 3)靈活性高，可與CSS和JavaScript結合使用。 4)豐富的學習資源和現代工具支持學習過程。
        HTML中起始標籤的示例是什麼？HTML中起始標籤的示例是什麼？Apr 06, 2025 am	 12:04 AM
        AnexampleOfAstartingTaginHtmlis，beginSaparagraph.startingTagSareEssentialInhtmlastheyInitiateEllements，defiteTheeTheErtypes，andarecrucialforsstructuringwebpages wepages webpages andConstructingthedom。
        如何利用CSS的Flexbox佈局實現菜單中虛線分割效果的居中對齊？如何利用CSS的Flexbox佈局實現菜單中虛線分割效果的居中對齊？Apr 05, 2025 pm	 01:24 PM
        如何設計菜單中的虛線分割效果？在設計菜單時，菜名和價格的左右對齊通常不難實現，但中間的虛線或點如何...
        在線代碼編輯器究竟用什麼HTML元素實現代碼輸入？在線代碼編輯器究竟用什麼HTML元素實現代碼輸入？Apr 05, 2025 pm	 01:21 PM
        網頁代碼編輯器中的HTML元素分析許多在線代碼編輯器允許用戶輸入HTML、CSS和JavaScript代碼。最近，有人提出了一...
        See all articles
        熱AI工具
        Undresser.AI Undress
        Undresser.AI Undress
        人工智慧驅動的應用程序，用於創建逼真的裸體照片
        AI Clothes Remover
        AI Clothes Remover
        用於從照片中去除衣服的線上人工智慧工具。
        Undress AI Tool
        Undress AI Tool
        免費脫衣圖片
        Clothoff.io
        Clothoff.io
        AI脫衣器
        AI Hentai Generator
        AI Hentai Generator
        免費產生 AI 無盡。
        顯示更多
        熱門文章
        R.E.P.O.能量晶體解釋及其做什麼（黃色晶體）
        3 週前By尊渡假赌尊渡假赌尊渡假赌
        R.E.P.O.最佳圖形設置
        3 週前By尊渡假赌尊渡假赌尊渡假赌
        刺客信條陰影：貝殼謎語解決方案
        2 週前ByDDD
        R.E.P.O.如果您聽不到任何人，如何修復音頻
        3 週前By尊渡假赌尊渡假赌尊渡假赌
        WWE 2K25：如何解鎖Myrise中的所有內容
        3 週前By尊渡假赌尊渡假赌尊渡假赌
        顯示更多
        熱工具
        ZendStudio 13.5.1 Mac
        ZendStudio 13.5.1 Mac
        強大的PHP整合開發環境
        Atom編輯器mac版下載
        Atom編輯器mac版下載
        最受歡迎的的開源編輯器
        Safe Exam Browser
        Safe Exam Browser
        Safe Exam Browser是一個安全的瀏覽器環境，安全地進行線上考試。該軟體將任何電腦變成一個安全的工作站。它控制對任何實用工具的訪問，並防止學生使用未經授權的資源。
        SublimeText3 Linux新版
        SublimeText3 Linux新版
        SublimeText3 Linux最新版
        SublimeText3漢化版
        SublimeText3漢化版
        中文版，非常好用
        顯示更多
        熱門話題
        gmail信箱登陸入口在哪裡
        7456
        15
        CakePHP 教程
        1376
        52
        steam的賬戶名稱是什麼格式
        77
        11
        win11激活密鑰永久
        41
        19
        NYT連接提示和答案
        14
        10
        顯示更多