HTML文档类型
DOCTYPE，是英文Document type的缩写，翻译为“文档类型”
DOCTYPE标签是单独出现的，定义了标准文档的类型
【说明】
①文档类型，会使浏览器使用相应标准加载网页并显示
②文档类型定义在HTML文档的第一行，在html标签之前
③文档不定义DOCTYPE，浏览器将无法获知HTML或XHTML文档的类型，因此会进入混乱模式，详见：浏览器模式
【浏览器表现模式】
浏览器从服务端获取网页后会根据文档的DOCTYPE定义显示网页，如果文档正确定义了DOCTYPE浏览器则会进入标准模式（Standards Mode），否则浏览器会进入怪异模式或混杂模式（Quirks mode）
【浏览器多种表现模式的来源】
浏览器开发初期W3C倡导的网页标准并不流行，因此浏览器有独特的对网页标签或属性的解析模式，随着日后网页标准的流行，浏览器增加了对新标准的支持（Standards Mode标准模式），但又没有放弃对原有模式的兼容（Quirks mode怪异模式），这就是浏览器多种表现模式的来源。
而且Standards Mode W3C标准推出以后，浏览器都开始采纳新标准，但存在一个问题就是如何保证旧的网页还能继续浏览，在标准出来以前，很多页面都是根据旧的渲染方法编写的，如果用的标准来渲染，将导致页面显示异常。为保持浏览器渲染的兼容性，使以前的页面能够正常浏览，浏览器都保留了旧的渲染方法（如：微软的IE）。这样浏览器渲染上就产生了Quircks mode怪异模式和Standars mode标准模式，两种渲染方法共存在一个浏览器上。
那么浏览器究竟该采用哪种模式渲染呢？这就引出的DTD，既是网页的头部声明，浏览器会通过识别DTD而采用相对应的渲染模式：
1. 浏览器要使老旧的网页正常工作，但这部分网页是没有doctype声明的，所以浏览器对没有doctype声明的网页采用quirks mode解析。
2. 对于拥有doctype声明的网页，什么浏览器采用何种模式解析，这里有一张详细列表可参考：http://hsivonen.iki.fi/doctype/
3. 对于拥有doctype声明的网页，这里有几条简单的规则可用于判断：对于那些浏览器不能识别的doctype声明，浏览器采用strict mode解析
4. 在doctype声明中，没有使用DTD声明或者使用HTML4以下（不包括HTML4）的DTD声明时，基本所有的浏览器都是使用quirks mode呈现，其他的则使用strict mode解析。
5. 可以这么说，在现有有doctype声明的网页，绝大多数是采用strict mode进行解析的。
6. 在ie6中，如果在doctype声明前有一个xml声明(比如:<?xml version="1.0" encoding="iso-8859-1"?>)，则采用quirks mode解析。这条规则在ie7中已经移除了。
【为什么使用<!DOCTYPE HTML>】
不管是刚接触前端，还是你已经“精通”web前端开发的内容，你应该知道在你写html的时候需要定义文档类型；你知道如果没有它，浏览器在渲染页面的时候会使用怪异模式；你知道各个浏览器在怪异模式下对各个元素渲染是有差异的。所以你会写像这样的doctype：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
好在现在的各种web开发工具都足够强大，支持插入模板代码，因此你并不需要把这又长又臭的doctype一个个字母的敲出来。但是如果你受够了它，你也许可以尝试下面这个写法：
<!DOCTYPE html>
哇哦，很简洁哦！好处显而易见：
一、你可以轻松的写下这个doctype，而不用担心会写错；
二、它是向后兼容的，是的，html5的doctype就是这样写的，并且现代浏览器都认识它
如果你跟我一样一直以为：没有指定dtd将会开启浏览器的怪异模式，这种说法是错的！
正确的说法应该是：没有定义doctype才会开启怪异模式，也就是说你只需要定义<!doctype html>就可以让浏览器在严格模式（标准模式）下渲染页面，而不需要指定某个类型dtd。
让我们来回顾一下，所有的浏览器都需要两种模式：怪异模式和严格模式（也有人叫标准模式）。IE 6 for Windows/mac, Mozilla, Safari和Opera 都实现了这两种模式，但是IE 6以下版本永远定在了怪异模式。关于两种模式，你需要知道以下几点：
①在标准化之前写的页面是没有doctype的，因此没有doctype的页面是在怪异模式下渲染的。
②反过来说，如果web开发人员加入的doctype，说明他知道他所要做的事情，大部分的doctype会开启严格模式（标准模式），页面也会按照标准来渲染。
③任何新的或者未知的doctype都会开启严格模式（标准模式）。
④每个浏览器都有自己的方式来激活怪异模式。
注意：你可以根本不需要根据你选择的doctype来验证你的页面，只要doctype标签存在就足以开启严格模式（标准模式）了
我们只需要一小段JavaScript代码就可以得到答案，它就是：
mode=document.compatMode;
这个代码可以用来判断，当前浏览器是处于怪异模式还是标准模式，该属性的兼容性毋庸置疑
你可以在你想测试的浏览器里查看：
便可看到结果了，据我所知，这样并没有激活怪异模式，即使是ie6下
【JS判断浏览器解析模式/方式】
在js中如何判断当前浏览器正在以何种方式解析？
document对象有个属性compatMode ,它有两个值：
①BackCompat 对应quirks mode
②CSS1Compat 对应strict mode
var mode = document.compatMode; console.log(mode)
【怪异模式与标准模式区别】
Quirks mode和Standars mode最大的不同就是提现在对盒模式的解释上，这也是我们在js里要注意的地方。
什么是盒模式？ 这是针对块级元素说的，说白了就是把块级元素想像成一个装东西的盒子，而margin,padding,border,width这些css属性构成了盒模式。
在Standars mode标准模式中：
元素真正的宽度 = margin-left + border-left-width + padding-left + width + padding-right + border-right-width + margin-right;
在Quirks mode怪异模式中：
width则是元素的实际宽度，内容宽度 = width - (margin-left + margin-right + padding-left + padding-right + border-left-width + border-right-width)
1. 内联元素 ，例如<a>|<span>等，定义上下边界不会影响到行高（line-height），内联元素距离上一行元素的距离由行高决定，而不是填充或边界。
2. 内联元素（display: inline） 内联元素不需要在新行内显示，而且也不强迫其后的元素换行，如a|em|span等都为内联元素。内联元素可以为任何其他元素的子元素。
3. 浮动元素（无论左或者右浮动）边界不压缩 ，且若浮动元素不声明宽度，则其宽度趋向于0，即压缩到其内容能承受的最小宽度。
4. 如果盒中没有内容，则即使定义了宽度和高度都为100%，实际上只占0% ，因此不会被显示，此点在采取层布局的时候需特别注意。
5. 边界值可为负，其显示效果各浏览器可能不相同。
6. 填充值不可为负。
7. 边框默认的样式（border-style）为不显示（none）。
【用法】
官方解析：
在实际的项目中，我们还需要在获取浏览是否IE，这样就可以得到IE的渲染模式了。在Ext中的代码：isBorderBox=isIE&&!isStrict
当文档有了标准声明时， document.compatMode 的值就等于 "CSS1compat"， 因此， 我们可以根据 document.compatMode 的值来判断文档是否加了标准声明
var height = document.compatMode=="CSS1Compat" ? document.documentElement.clientHeight : document.body.clientHeight;
【注意：】这里document.compatMode（文档渲染模式）用来判断当前浏览器采用的渲染方式
①等于BackCompat怪异模式时，浏览器客户区宽度是document.body.clientWidth
②等于CSS1Compat标准模式时，浏览器客户区宽度是document.documentElement.clientWidth
浏览器客户区高度、滚动条高度、滚动条的Left、滚动条的Top等等都是上面的情况。
一个准确获取网页客户区的宽高、滚动条宽高、滚动条Left和Top的代码：
if (document.compatMode == \"BackCompat\") {
cWidth = document.body.clientWidth;
cHeight = document.body.clientHeight;
sWidth = document.body.scrollWidth;
sHeight = document.body.scrollHeight;
sLeft = document.body.scrollLeft;
sTop = document.body.scrollTop;
}else { //document.compatMode == \"CSS1Compat\"
cWidth = document.documentElement.clientWidth;
cHeight = document.documentElement.clientHeight;
sWidth = document.documentElement.scrollWidth;
sHeight = document.documentElement.scrollHeight;
sLeft = document.documentElement.scrollLeft == 0 ?
document.body.scrollLeft : document.documentElement.scrollLeft;
sTop = document.documentElement.scrollTop == 0 ?
document.body.scrollTop : document.documentElement.scrollTop;
}简而言之：
var pageWidth=window.innerWidth,
pageHeight=window.innerHeight;
if(typeof pageWidth!='number'){
if(document.compatMode=='CSS1Compat'){//标准模式
pageWidth=document.documentElement.clientWidth;
pageHeight=document.documentElement.clientHeight;
}else{
pageWidth=document.body.clientWidth;
pageHeight=document.body.clientHeight;
}
}（以上代码兼容目前流行的全部浏览器，包括：IE、Firefox、Safari、Opera、Chrome）
常用的浏览器表现模式包括：
①IE
IE包括两种模式：标准模式（Standards Mode）与怪异模式或混杂模式（Quirks mode），简称为IE(S)与IE(Q)
②FireFox
FIreFox包括三种模式：Full Standards Mode、Almost Standards Mode与Quirks Mode。对这三种模式的描述见：Mozilla's DOCTYPE sniffing
③Opera
Opera包括三种模式：Quirks、Standards与Almost Standards。对这三种模式的描述见：DOCTYPE Switches support in Opera
.