为什么使用<!DOCTYPE html>就可以，正确使用DOCTYPE
Doctype是啥?
<!DOCTYPE> 声明位于文档中的最前面的位置，处于 <html> 标签之前。此标签可告知浏览器文档使用哪种 HTML 或 XHTML 规范。
Document Type 文档类型，缩写成DOCTYPE，在html中它就是个标签：<!DOCTYPE>，它有自己的声明格式，不是在html标签前加上它就完事了的，查看qq.com页面源码可见如下声明：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" >
在XHTML Strict DTD声明的html中出现th标签属性width时，则会出现警告信息(如下图)，改成transitional dta就不会出现警告
Doctype起啥作用?
上面也提到，Doctype告诉浏览器使用什么样的html或xhtml规范来解析html文档，上文说到的DOCTYPE组成中的第5部分所引入的dtd文件则包含了标记、attributes 、properties、约束规则。除此外，Doctype还会对浏览器的渲染模式产生影响，不同的渲染模式会影响到浏览器对于 CSS 代码甚至 JavaScript 脚本的解析，所以Doctype是非常关键的，尤其是在 IE 系列浏览器中，由DOCTYPE 所决定的 HTML 页面的渲染模式至关重要。
两种渲染模式：
- BackCompat：标准兼容模式未开启（或叫怪异模式[Quirks mode]、混杂模式）
- CSS1Compat：标准兼容模式已开启（或叫严格模式[Standards mode/Strict mode]）
长话短说两种渲染模式的由来，很久以前W3C标准没出现的时候，江湖很混乱，页面上根本就没有doctype这个东西，乱世出英雄啊，w3c标准出现后页面上就有了doctype，为了照顾老前辈的页面（没有doctype或使用HTML4以下[不包括HTML4]的DTD声明），怪异模式就出现了，保证古董页面能正常显示；江湖统一之后，大家都开始使用w3c标准，这就是标准模式。
测试ie 8、 ff10、 chrome16的渲染模式，测试文档如下：（只是给予直观感受，并非全面周到的测试）
表中提到了“近似标准模式”
近似标准模式（Almost Standards Mode）从字面意思上看与标准模式非常类似，但确实有小的差别。主要体现在对于表格单元格内垂直方向布局渲染差异。IE8 开始、Firefox、Chrome、Safari、Opera 7.5 开始，这些浏览器的标准模式更加严格的遵循了 CSS2.1 规范，故对于在目前看来不太“标准”的以前的标准模式，被赋予了“近似标准模式”的名字。但是在较早的 IE6 IE7 以及 Opera 7.5 之前版本中，浏览器无法严格遵循 CSS2.1 规范，故对于它们来说没有这个近似标准模式，也可以理解为它们的近似标准模式就是标准模式。
至于如何选择，参考表格自然明白，不用废话了！
参考资料很重要！！
【HTML <!DOCTYPE> 标签】http://www.w3cschool.cn/tag_doctype.html
【CS002: DOCTYPE 与浏览器模式分析】http://w3help.org/zh-cn/casestudies/002
【KB001: 兼容性问题与浏览器的内核及渲染模式】http://w3help.org/zh-cn/kb/001
来源：via
相关文章
- [转]从挑一段HTML的毛病，来看你真的了解HTML吗？–雅虎面试题(2014-2-7 14:43:27)
- 面试题：css九宫格 兼容IE6 考虑语义化的结构(2013-12-12 12:11:53)
- 前端开发面试题及答案(2013-12-2 16:1:8)
- input动态赋值不触发onchange之oninput,onpropertychange,onchange的用法和区别(2013-11-20 23:34:31)
- [分享]js+css美化radio和checkbox(2013-7-11 13:9:29)
- label标签for属性及绑定事件的关联(2013-7-9 15:8:15)
- 复制input 包含手动输入的值(2013-7-8 10:49:46)
- document.getElementsByClassName使用方法(2013-6-27 13:30:12)
- 为什么一个img在一个div里有额外的空间 怎么让div自适应图片的高度(2013-6-24 13:23:58)
- 指定IE的文档兼容模式 meta X-UA-Compatible EmulateIE7(2013-4-10 19:7:12)
