复习HTML
定义和用法
DOCTYPE翻译过来就是文档类型的意思，向 HTML 文档添加<!DOCTYPE>声明，告知浏览器响应的文档类型。
<!DOCTYPE> 声明必须是 HTML 文档的第一行，位于<html>标签之前。
<!DOCTYPE> 声明不是 HTML 标签；它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令。
浏览器的标准模式与怪异模式
来由
微软发布IE5时，未遵循W3C标准。在发布IE6时既想遵循标准，又想老的兼容IE5的页面能在IE6下能正常展示，于是给IE6加入“怪异模式”和“标准模式”两种渲染方式。在标准模式下，浏览器按照HTML与CSS标准（W3C)对文档进行解析和渲染；而在怪异模式下，浏览器则按照旧有的非标准的实现方式对文档进行解析和渲染。这样的话，对于旧有的网页，浏览器启动怪异模式，就能够使得旧网页正常显示；对于新的网页，则可以启动标准模式，使得新网页能够使用HTML与CSS的标准特性。
HTML 4.01
在 HTML 4.01 中有三种 <!DOCTYPE> 声明——Strict，Transitional， Frameset。
对于HTML 4.01，默认是“怪异模式”；对于新页面需要在页面顶部加以下指令（Strict）告诉浏览器使用“标准模式”。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
HTML5
在HTML5规范里，对DOCTYPE声明做了简化，变成<!DOCTYPE html>告知浏览器当前页面使用的是HTML5规范，并且使用告诉浏览器使用“标准模式”。
<!DOCTYPE html>
对于没有文档类型声明或者文档类型声明不正确的文档，浏览器就会认为它是一个旧的HTML文档，就会使用怪异模式解析和渲染该文档。
两个模式的区别
盒模型的处理差异：
标准CSS盒模型的宽度和高度等于内容区的高度和宽度，不包含内边距和边框，是标准盒模型（content-box ）
而IE6之前的浏览器实现的盒模型的宽高计算方式是包含内边距和边框的，是IE盒模型（border-box）。
因此，对于IE，怪异模式和标准模式下的盒模型宽高计算方式是不一样的；
行内元素的垂直对齐：
很多早期的浏览器对齐图片至包含它们的盒子的下边框，目前CSS的规范要求它们被对齐至盒内文本的基线。
目前标准模式下，基于Gecko的浏览器将会对齐至基线，而在quirks模式下它们会对齐至底部。
最直接的例子就是图片的显示。标准模式下，图片是基线对齐的，图片与父元素下边框之间存在一点小空隙。而怪异模式下，图片是与父元素的下边框对齐的，则不存在这个问题。