什么是文档声明？
<!DOCTYPE> 声明必须是 HTML 文档的第一行，位于 <html> 标签之前。所有文档的开头都会有文档声明<!DOCTYPE>标签来声明它采用哪种标准来解析当前网页。
<!DOCTYPE> 声明不是 HTML 标签；它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令。
DTD 是什么？
DTD：文档类型定义(Document Type Definition)是一套关于标记符的语法规则。DTD 在 <!DOCTYPE> 声明中引用。
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
以上是html4 的文档声明。在声明标签中引用了 DTD 文件。
浏览器渲染的两种模式：
要想写出跨浏览器的CSS，必须知道浏览器解析CSS的两种模式：
- 标准模式(strict mode) //CSS1Compat
- 怪异模式(quirks mode) // BackCompat 也叫兼容模式
文档声明和渲染模式的关系（标准模式和怪异模式）：
所谓的标准模式是指，浏览器按W3C标准解析执行代码；怪异模式则是使用浏览器自己的方式解析执行代码，因为不同浏览器解析执行的方式不一样，所以我们称之为怪异模式。浏览器解析时到底使用标准模式还是怪异模式，与你网页中的DTD声明直接相关，DTD声明定义了标准文档的类型（标准模式解析）文档类型，会使浏览器使用相应的方式加载网页并显示，忽略DTD声明，将使网页进入怪异模式(quirks mode)。
没有文档声明的话大多数浏览器都将会转换到为怪异模式(quirk mode)，有些地方会称为混杂模式或兼容模式，这种模式下浏览器会以老版本的浏览器使用的规则来渲染页面，不同浏览器的混杂模式表现不一样
也就是说，如果在文档开头有文档声明，浏览器就会遵循声明中 DTD 文档标准（html4 以及之前的版本需要在文档声明中引用D TD。html5 的文档声明不需要引用DTD，因为html5 不遵循DTD 标准），进入标准模式 CSS1Compat；
否则，文档缺少声明或者缺少 DTD 标准，则进入怪异模式（兼容） BackCompat
没有文档声明，将会进入怪异模式
<html>
<head>
<title>认真学习前端</title>
</head>
<body>
<h3>好好学习，天天向上</h3>
</body>
</html>如果你的网页代码不含有任何声明，那么浏览器就会采用怪异模式解析，便是如果你的网页代码含有DTD声明，浏览器就会按你所声明的标准解析。
html 4 的文档声明：
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>认真学习前端</title>
</head>
<body>
<h3>好好学习，天天向上</h3>
</body>
</html>html5 的文档声明：不需引用 DTD 文件
<!DOCTYPE html>
<html>
<head>
<title>认真学习前端</title>
</head>
<body>
<h3>good good study day day up</h3>
</body>
</html>到底标准模式和怪异模式有什么不同呢？
Quirks mode－怪异模式、混杂模式、兼容模式（document.compatMode=BackCompat），浏览器使用自己的怪异模式解析渲染页面（目的是向后兼容），浏览器都按照自己的方式解析渲染页面，那在不同的浏览器就会显示不同的样式(无<!DOCTYPE html>声明 以HTML5为例)。而且，由于不遵循文档标准，所以对不严格的语法会产生兼容。
Strict/Standards mode－标准模式、严格模式（document.compatMode=CSS1Compat），浏览器使用W3C的标准解析渲染页面(有<!DOCTYPE html>声明 以HTML5为例) 。
浏览器都支持两种解析模式，在旧的、没有采用W3C标准的网页中，使用怪异模式解析，可以使页面正常显示；在声明采用标准模式的网页中，使用标准模式解析，可以让页面使用W3C的标准特性
怎么根据不同情况写文档声明？
- 如果使用html5 写的文档
<!DOCTYPE html>- 如果你接手的是一个遗留网页，最初并没有DTD声明，并且使用了很多在XHTML中已经废除的标签，需要向后兼容，那么，我们建议你使用 XHTML兼容模式（也叫过渡模式），声明如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">如何判定现在是标准模式还是怪异模式：
方法一：window.document.compatMode 用来判断当前浏览器采用的渲染方式。
alert(window.document.compatMode)
//BackCompat 表示怪异模式
//CSS1Compat 表示标准模式方法二：jquery为我们提供的方法，如下：
//在 Internet Explorer 怪癖模式（QuirksMode）中返回 False
//标准模式 返回 true
alert($.boxModel)
alert($.support.boxModel)标准模式（CSS1Compat）、怪异模式（BackCompat） 和 document.body 、document.documentElement 什么关系？
总结：
两种模式下，提取浏览器的尺寸时，使用的语法不同：
- 怪异模式（BackCompat）使用 document.body
- 标准模式（CSS1Compat）使用 document.documentElement
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;
} PS:（IE>=9）建议使用 window.pageYOffset 来代替 window.scrollY，使用 window.pageXOffset 代替 window.scrollX