!DOCTYPE

　　!DOCTYPE是什么：

　　在所有 HTML 文档中规定 DOCTYPE 是非常重要的，这样浏览器就能了解预期的文档类型， 告诉浏览器要通过哪一种规范（文档类型定义 DTD）解析文档（比如HTML或XHTML规范）；

　　!DOCTYPE声明不属于 HTML 标签；tag; 它是一条指令，告诉浏览器编写页面所用的标记的版本。

　　HTML 4.01 中的 doctype 需要对 DTD 进行引用，因为 HTML 4.01 基于 SGML。而 HTML 5 不基于 SGML，因此不需要对 DTD 进行引用，但是需要 doctype 来规范浏览器的行为（html 5简化了这种声明，意在告诉浏览器使用统一的标准即可, 这个统一的标准去哪里找啊,www.w3.org）。

　　常见的DOCTYPE如下：

HTML4.01 strict：不允许使用表现性、废弃元素（如font）以及frameset。声明：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

HTML4.01 Transitional:允许使用表现性、废弃元素（如font），不允许使用frameset。声明：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

HTML4.01 Frameset:允许表现性元素，废气元素以及frameset。声明：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

XHTML1.0 Strict:不使用允许表现性、废弃元素以及frameset。文档必须是结构良好的XML文档。声明：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

XHTML1.0 Transitional:允许使用表现性、废弃元素，不允许frameset，文档必须是结构良好的XMl文档。声明： 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

XHTML 1.0 Frameset:允许使用表现性、废弃元素以及frameset，文档必须是结构良好的XML文档。声明：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">


HTML 5: 
<!doctype html>

　　HTML5中的!doctype是不区分大小写的;

　　我的DW默认的声明模板是下面这样的：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

　　我的webstrom中默认的模板是这样的：

<!DOCTYPE html>

　　现代的浏览器需要不同模式， 既要呈现久远的HTML界面， 不至于界面结构混乱不堪， 也需要呈现W3C标准的界面：

　　1：标准的显示方式就是---标准模式(strict),

　　2：不标准的显示方式---怪异模式(没定义doctype或者doctype错误等等情况,都会让界面进入quirk模式)，

　　3：既可以显示标准的，也能够显示不标准的(过渡类型的文档类型定义transitional）;

　　

　　规范和时间线

　　HTML规范和时间线：　

规范

推荐

HTML 3.2

1997年1月14日

HTML 4.0

1998年5月24日

HTML 4.01

1999年12月24日

　　XHTML规范和时间线：

规范

草案/提议

推荐

XHTML 1.0

   

2000 年 1 月 26 日

XHTML 1.0 修订版

   

2002 年 8 月 1 日

XHTML 1.1

   

2001 年 5 月 31 日

XHTML Modules

   

2001 年 4 月 10 日

XHTML Modules 1.1

2006 年 7 月 5 日

   

XHTML Basic

   

2000 年 12 月 19 日

XHTML Basic 1.1

2006 年 7 月 5 日

   

XHTML Events

   

2003 年 10 月 14 日

XHTML Events 2

2007 年 2 月 16 日

   

XHTML Print

   

2006 年 9 月 20 日

XHTML Media Types

2002 年 8 月 1 日

   

XForms 1.0

   

2003 年 10 月 14 日

XForms 1.0 (SE)

   

2006 年 3 月 14 日

XForms 1.1

2007 年 2 月 22 日

   

XHTML 2.0

2006 年 7 月 26 日

   

XLink

   

2001 年 6 月 27 日

HLink

2002 年 9 月 13 日

   

　　!DOCTYPE切换也许是让浏览器进入正确呈现模式并正确显示网页的一种有效手段，前提是你注意到了各种浏览器的不一致，并能积极主动地避免各种问题。

　　一般来说 !DOCTYPE后面会有一个包含命名空间的html标签：

<html xmlns="http://www.w3.org/1999/xhtml">

　　xmlns是XHTML namespace的缩写。
　　作用：由于xml允许定义自己的标记，但你定义的标记和其他人定义的标记有可能相同，但表示不同的含义。当文档交换或者共享的时候就容易产生错误。为避免这种错误产生，xml采用名字空间声明，允许你通过一个网址来识别你的标记。
　　XHTML是HTML先xml过度的标记语言，它需要符合xml文档规则，因此，也需要定义名字空间，又因为XHTML1.0不能自定义标识，所以，它的名字空间都相同，就是：http://www.w3.org/1999/xhtml

　　

额外资料：文档模式

　　参考自：打开

　　文档模式也回影响到文档类型, <meta http-equiv="X-UA-Compatible">与<!DOCTYPE>结伴影响文档模式 ;

　　所有IE浏览器在默认情况下（<meta http-equiv="X-UA-Compatible">与<!DOCTYPE>均没有），是采用怪异模式（Quirks）；当有<!DOCTYPE>时，均采用浏览器版本对应的标准模式（如IE8就采用IE8标准模式，IE11就采用IE11标准模式）。

　　现在要注意的是，当出现<meta http-equiv="X-UA-Compatible">时，文档模式将会如何呢？我们首先了解一下IE11下它的content属性值范围吧，具体范围如下：

　　  IE=5、IE=7、IE=EmulateIE7、IE=8、IE=EmulateIE8、IE=9、IE=10、 IE=11、 IE=Edge

　　1. IE=5：表示采用怪异模式；

　　2. IE=7等纯数字的值：表示采用对应IE版本的标准模式，即使不是以<!DOCTYPE>作为文档第一行，文档模式依旧使用标准模式；

　　3. IE=EmulateIE7等含EmulateIE字符串的值：表示采用模拟对应IE版本的模式，如果是以<!DOCTYPE>作为文档第一行则采用该版本的标准模式，否则采用怪异模式。

　　4. IE=Edge：表示采用浏览器自身版本的文档模式，如IE11，以<!DOCTYPE html>作为文档第一行则采用IE11标准模式，否则采用怪异模式。

　　IE的怪异模式：

　　IE进入backCompat的模式的方式，常见的原因有

　　1：DOCTYPE写错了，

　　2：DOCTYPE没有写，

　　3：DOCTYPE前面有别的字符;

　　....

　　实例：

_____

<!DeeeeeeeeeeeOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitionaleeeeeeeeee//EN" "http://www.ssssssssw3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>无标题文档</title>

</head>

<style>

body{

    margin:0;

    padding:0;

    width:1000px;

    padding:200px;

}

</style>

<body>

    <div id="div0"></div>

    <script>

        function getStyle(el, prop) {

            return el.currentStyle[prop];

        };

        var node = document.createElement("div");

        node.innerHTML = document.compatMode ;//

        document.body.appendChild( node );

        node = document.createElement("div");

        node.innerHTML = document.getElementsByTagName("body")[0].offsetWidth;

        document.body.appendChild( node );

    </script>

</body>

</html>

　　IE兼容模式开启的话， 相对于当前的界面会以IE5.5的方式进行渲染，如果IE浏览器以IE5.5的方式进行解析， 会导致以下问题;

  1. 盒模型：

    在怪异模式下，盒模型为IE盒模型而非标准模式下的W3C 盒模型：在 IE 盒模型中， box width = content width + padding left + padding right + border left + border right， box height = content height + padding top + padding bottom + border top + border bottom。 而在 W3C 标准的盒模型中，box 的大小就是 content 的大小。

  2. 图片元素的垂直对齐方式:

    对于inline元素和table-cell元素，在 IE Standards Mode 下 vertical-align 属性默认取值为baseline。而当inline元素的内容只有图片时，如table的单元格table-cell。在 IE Quirks Mode 下，table单元格中的图片的 vertical-align 属性默认为bottom，因此，在图片底部会有几像素的空间。

  3. <table>元素中的字体:

    CSS 中，描述font的属性有font-family，font-size，font-style，font-weigh,上述属性都是可以继承的。而在 IE Quirks Mode 下，对于table 元素，字体的某些属性将不会从body或其他封闭元素继承到table中，特别是 font-size属性。

  4. 内联元素的尺寸:

    在 IE Standards Mode 下，non-replaced inline 元素无法自定义大小，而在 IE Quirks Mode 下，定义这些元素的width和height 属性，能够影响该元素显示的大小尺寸。

  5. 元素的百分比高度:

    CSS 中对于元素的百分比高度规定如下，百分比为元素包含块的高度，不可为负值。如果包含块的高度没有显式给出，该值等同于“auto”（即取决于内容的高度）。所以百分比的高度必须在父元素有声明高度时使用。

    当一个元素使用百分比高度时，在 IE Standards Mode 下，高度取决于内容的变化，而在 Quirks Mode 下，百分比高度则被正确应用。

  6. 元素溢出的处理：

    在 IE Standard Mode 下，overflow取默认值 visible，即溢出可见，这种情况下，溢出内容不会被裁剪，呈现在元素框外。而在 Quirks Mode 下，该溢出被当做扩展box来对待，即元素的大小由其内容决定，溢出不会被裁剪，元素框自动调整，包含溢出内容。

　　有关文档模式的参考资料:open

DOCTYPE是什么鬼？文档模式又是什么鬼？的更多相关文章

  1. 关于html中的doctype的重要性的认知以及IE的浏览器模式与文档模式

    浏览器模式”用于切换IE针对该网页的默认文档模式.对不同版本浏览器的条件备注解析.发送给网站服务器的用户代理(User-Agent)字符串的值.网站可以根据浏览器返回的不同用户代理字符串判断浏览器的版 ...

  2. 为何在有 DOCTYPE 的 HTML 文档之上仍然还会出现混杂模式?

    不使用 DOCTYPE 一定会使 HTML 文档处于混杂模式,然而使用了 DOCTYPE,也不一定就能够使文档在所有浏览器中均处于标准模式. DOCTYPE 本身不就是一个“开关”吗?为何在有 DOC ...

  3. IE11新文档模式Edge介绍与评估，及在WebBrowser应用中的使用。

    浏览器模式与文档模式概念是怎么来的? 1.浏览器模式与文档模式概念起源 为了解决兼容性的问题,在IE浏览器(IE8, IE9, IE10)中,引入了浏览器模式和文档模式两个概念,浏览网页时可以通过按F ...

  4. 2013第49周三IE9文档模式

    今天完善了原有模块的代码和注释,然后继续之前新模块的开发,并写了两边的service接口,除了因为邮件中有部分问题让我分心外,专心下来写代码的感觉真好,今天基本上没遇到多少让我新感悟的技术问题,就总结 ...

  5. X-UA-Compatible IE 浏览器默认文档模式设置

    制作网页的时候,IE8浏览器浏览页面的时候,有时候文档模式默认是IE7,导致IE8兼容性不是非常好.出现IE7应该出现的模式. 解决的方法例如以下: 在X-UA-Compatible中可用的方法有: ...

  6. 【IE】浏览器模式与文档模式 及其开发中处理方式

    原文:http://blog.csdn.net/neo_liu0000/article/details/7589731 什么是浏览器模式和文本模式? 经常使用IE开发者工具的同学,肯定见过浏览器模式和 ...

  7. 1关于script标签属性，注意点，浏览器文档模式，各种数据类型的转化

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  8. 关于HTML文档的文档模式

    HTML文档的文档模式包括混杂模式和标准模式,这两种模式主要影响CSS内容的呈现,但在某些情况下也会影响到JavaScript的解释执行. 如果在文档开始处没有发现文档类型声明,则所有浏览器都会默认开 ...

  9. 通过<meta>标签指定IE的文档模式实现CSS3兼容

    今天发现之前做好的一个页面在IE中打开显示的效果不正常,本地和服务器上显示的是两种不同的样式. 经过确认文档内容和CSS都是一样的. 通过IE F12(开发人员工具)发现不正常的样式 浏览器文档模式自 ...

随机推荐

  1. NOIP2014pj子矩阵[搜索｜DP]

    题目描述 给出如下定义: 子矩阵:从一个矩阵当中选取某些行和某些列交叉位置所组成的新矩阵(保持行与列的相对顺序)被称为原矩阵的一个子矩阵. 例如,下面左图中选取第2.4行和第2.4.5列交叉位置的元素 ...

  2. 在Flex4中嵌入字体

    如果要使用的字体不是系统字体,可以把字体嵌入到Flash中,然后引用该字体.不过字体文件一般都比较大,慎重使用该功能. 官方例子 http://help.adobe.com/en_US/flex/us ...

  3. javascript里面foreach遍历函数介绍，以及跟jquery里面each的区别

    foreach是把数组从头到尾遍历一遍,有三个参数分别是:数组元素,数组索引,数组本身.如果是一个参数,就是数组元素. var data=[1,2,3,4,5,6]; var sum=0; data. ...

  4. SQL/LINQ/Lamda

    SQL LINQ Lambda SELECT * FROM HumanResources.Employee from e in Employees select e Employees   .Sele ...

  5. web端通信技术

    1.web端通信技术:长连接.长轮询.websocket; 什么是长连接.长轮询? 就是客户端不停的向服务器发送请求以获取最新的数据信息.这里的“不停”其实是有停止的,只是我们人眼无法分辨是否停止,它 ...

  6. wget: unable to resolve host address的解决方法

    摘要:wget:无法解析主机地址.这就能看出是DNS解析的问题. wget:无法解析主机地址.这就能看出是DNS解析的问题. 解决办法: 登入root(VPS).进入/etc/resolv.conf. ...

  7. Delphi常用系统函数总结

    Delphi常用系统函数总结 字符串处理函数 Unit System 函数原型 function Concat(s1 [, s2,..., sn]: string): string; 说明 与 S : ...

  8. ext 自带搜索功能

  9. 04Spring_bean 后处理器（后处理Bean），BeanPostProcessor ，bean创建时序，动态代理

    这篇文章很重要,讲解的是动态代理,以及bean创建前后的所发生的事情.介绍一个接口:在Spring构造Bean对象过程中,有一个环节对Bean对象进行 后处理操作 (钩子函数) ----- Sprin ...

  10. quartz.net 项目无法加载的问题

    最近尝试试用一下quartz.net 做任务调度用. 下载了源代码后打开解决方案发现项目无法加载.错误如下 未找到导入的项目“C:\Users\****\Desktop\Quartz.NET-2.1. ...