复习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模式下它们会对齐至底部。
最直接的例子就是图片的显示。标准模式下,图片是基线对齐的,图片与父元素下边框之间存在一点小空隙。而怪异模式下,图片是与父元素的下边框对齐的,则不存在这个问题。