我不知道的DOCTYPE

最熟悉的往往最容易被忽略 ——DOCTYPE

关于DTD


wiki解释

A document type declaration, or DOCTYPE, is an instruction that associates a particular SGML or XML document (for example, a webpage) with a document type definition (DTD) (for example, the formal definition of a particular version of HTML1.0 - HTML 4.0).[1] In the serialized form of the document, it manifests as a short string of markup that conforms to a particular syntax.

这段话的大致意思是 文档类型声明(DTD)是用特定的文件类型相关联的指令 (如特定版本的 HTML1.0-html 4.0 的正式定义) 定义sgml 或 xml 文档(如网页)。在文档的序列化中,它表现为标记的短字符串,符合特定语法。

w3c 解释

A DTD is a Document Type Definition.
A DTD defines the structure and the legal elements and attributes of an XML document.

简单明了,DTD是文档类型的申明(这样描述不太全面,我觉的还应该包含语法规则在里面),DTD定义了XML文档的结构与合法元素以及XML属性。

MDN解释

<!DOCTYPE> 通知浏览器您用来编写文档 的HTML(或XML)版本。Doctype是一个声明,而不是标签 ; 您也可以将其称为“文档类型声明”,或简称为“DTD”。

DTD语法结构


HTML 4.01 Strict

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

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

HTML 4.01 Transitional

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

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

HTML 4.01 Frameset

   <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"  "http://www.w3.org/TR/html4/frameset.dtd"> 

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

HTML 5

   <!DOCTYPE html>

一般的结构模式为:

   <!DOCTYPE root-element PUBLIC "FPI" ["URI"] [ <!-- internal subset declarations -->]>

or

   <!DOCTYPE root-element SYSTEM "URI" [ <!-- internal subset declarations -->]>

公共和系统的关键字,代表它是什么样的文档类型定义的。如果它是公共的,那么这个关键字后面的“公共标识”称为FPI(正式公共标识)是受限制的,如果它是系统中,只有一个系统标识符必须给出。它指出,XML解析器必须找到系统中的特定方式的文档类型定义

HTML5的DOCTYPE声明,是非常短的,因为它缺乏一个URL或FPI(正式公共标识)的形式的文档类型定义(DTD)的引用。在HTML5中,正规的语法是大写字母定义,但即使两个小写字母和小写大写混合物是也被视为有效。此外HTML5不是基于SGML,使用DOCTYPE只为模式选择。该声明是在所有主流浏览器的支持。

XHTML与HTML类似,点击查看

浏览器模式


为了能够很好地显示满足标准的页面,又能最大程度兼容不合法的HTML。 浏览器厂商一般会提供两种浏览器模式:

标准模式(standards mode):浏览器根据标准规约来渲染页面。
混杂模式(quirks mode):浏览器采用更加宽松的、向后兼容的方式来渲染页面。
混杂模式下,浏览器会模仿旧浏览器的行为,比如IE6,在此基础上兼容新的标准特性。 混杂模式又称兼容模式、怪异模式等。

DOCTYPE切换


浏览器根据不同的DOCTYPE选择不同的渲染方法就叫做DOCTYPE切换。 其实DOCTYPE切换就是用来识别和兼容旧网页的。

以下情况浏览器会采用标准模式渲染:

  • 给出了完整的DOCTYPE声明
  • DOCTYPE声明了Strict DTD
  • DOCTYPE声明了Transitional DTD和URI

以下情况浏览器会采用混杂模式渲染:

  • DOCTYPE声明了Transitional DTD但未给出URI
  • DOCTYPE声明不合法
  • 未给出DOCTYPE声明
    tip:如果你是使用最新标准编写的页面但未给出DOCTYPE声明,这时就可能会出现一些怪异的行为。 例如盒模型不正确、窗口的size不正确等问题。所以,尽量为你网站的所有页面都给出合法的DOCTYPE声明

<!doctype html> 的作用


  1. 你可以轻松的写下这个doctype,而不用担心会写错;
  2. 你大概省下了105字节字符,对于一个每日PV达到千万级的站点,它可以省下相当客观流量;
  3. 它是向后兼容的,是的,html5的doctype就是这样写的,并且现代浏览器都认识它;
  4. !doctype申明为标准模式;
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,772评论 6 477
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,458评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,610评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,640评论 1 276
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,657评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,590评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,962评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,631评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,870评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,611评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,704评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,386评论 4 319
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,969评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,944评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,179评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 44,742评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,440评论 2 342

推荐阅读更多精彩内容

  • 1. XML简介 以下内容来自于http://www.w3school.com.cn/xml 基本知识 XML 和...
    WebSSO阅读 1,894评论 1 7
  • 格式后期处理。 Jeremy Keith在 Fronteers 2010 上的主题演讲 今天我想跟大家谈一谈HTM...
    LordZhou阅读 1,118评论 0 17
  • 简介网络浏览器很可能是使用最广的软件。在这篇入门文章中,我将会介绍它们的幕后工作原理。我们会了解到,从您在地址栏输...
    wengjq阅读 1,996评论 2 15
  • 序章 谈谈“浏览器兼容性”的问题?很多前端的面试或笔试中,都有比较笼统的“说说你所知道的各浏览器存在的兼容问题”,...
    麻辣小隔壁阅读 3,033评论 1 57
  • 补完课的我们,就像脱缰的野马一样,奔驰在自由的田野。 整日无所事事却未感到半分轻松。作业就像堆起来的城堡那么高。没...
    野草莓少女的信箱阅读 106评论 1 0