##DOCTYPE 文档类型
DOCTYPE的作用:
声明文档的解析类型(document.compatMode),避免浏览器的怪异模式。
document.compatMode:
BackCompat:怪异模式,浏览器使用自己的怪异模式解析渲染页面。
CSS1Compat:标准模式,浏览器使用W3C的标准解析渲染页面。
这个属性会被浏览器识别并使用,但是如果你的页面没有DOCTYPE的声明,那么compatMode默认就是BackCompat,浏览器按照自己的方式解析渲染页面,那么,在不同的浏览器就会显示不同的样式。如果你的页面添加了<!DOCTYPE html>那么,那么就等同于开启了标准模式,那么浏览器就得老老实实的按照W3C的标准解析渲染页面,这样一来,你的页面在所有的浏览器里显示的就都是一个样子了。
这就是<!DOCTYPE html>的作用。
摘自:http://angrycoder.iteye.com/blog/1757539
##为什么使用<!DOCTYPE HTML>
如果你跟我一样一直以为:没有指定dtd将会开启浏览器的怪异模式,这种说法是错的!正确的说法应该是没有定义doctype才会开启怪异模式,也就是说你只需要定义<!doctype html>就可以让浏览器在严格模式(标准模式)下渲染页面,而不需要指定某个类型dtd。让我们来回顾一下,所有的浏览器都需要两种模式:怪异模式和严格模式(也有人叫标准模式)。IE 6 for Windows/mac, Mozilla, Safari和Opera 都实现了这两种模式,但是IE 6以下版本永远定在了怪异模式。关于两种模式,你需要知道以下几点:
在标准化之前写的页面是没有doctype的,因此没有doctype的页面是在怪异模式下渲染的。反过来说,如果web开发人员加入的doctype,说明他知道他所要做的事情,大部分的doctype会开启严格模式(标准模式),页面也会按照标准来渲染。任何新的或者未知的doctype都会开启严格模式(标准模式)。每个浏览器都有自己的方式来激活怪异模式。你可以看看这个清单:http://hsivonen.iki.fi/doctype/
注意:你可以根本不需要根据你选择的doctype来验证你的页面,只要doctype标签存在就足以开启严格模式(标准模式)了。如果你对我说的这些还是感到怀疑,那么请前往http://www.quirksmode.org/css/quirksmode.html#link2 了解你想知道的内容。我们只需要一小段JavaScript代码就可以得到答案,它就是:
mode=document.compatMode;
这个代码可以用来判断,当前浏览器是处于怪异模式还是标准模式,该属性的兼容性毋庸置疑,如果你表示怀疑,可以查看http://www.quirksmode.org/dom/w3c_html.html#t11。 你可以在你想测试的浏览器里访问:http://wanz.im/demo/doctype-test.html, 便可看到结果了,据我所知,这样并没有激活怪异模式,即使是ie6下
摘自:http://i.wanz.im/2010/05/28/why_doctype_html/
- 空白目录
- Day-1-Your-First-Webpage
- day1example
- 视频总结
- Day-2-Getting-a-Proper-Code-Editor-and-Formatting
- day2example
- Day-3-Lists
- day3example
- Day-4-Parent-Child-Relationships
- day4example
- Day-5-Headings
- day5example
- Day-6-Blockquotes
- day6example
- Day-7-Anchors
- day7example
- Day-8-Your-First-Stylesheet
- day8example
- Day-9-Clean-Project-Structures
- day9example
- Day-10-Images
- day10example
- Day-11-The-Necessity-of-Divs
- day11example
- Day-12-Ids-and-Classes
- day12example
- Day-13-Assignment
- day13example
- Day-14-Assignment-Solution
- Day-15-Floats-and-a-Simple-Layout
- day15example
- Day-16-NavigationLists
- day16example
- Day-17-Introduction-to-Forms
- day17example
- Day-18-Image-Replacement
- day18example
- Day-19-Typography-Basics
- day19example
- Day-20-The-Difference-Between-Relative-and-Absolute-Positioning
- day20example
- Day-21-Creating-a-Website-Fragment
- day21example
- Day-22-The-Importance-of-Validation
- day22example
- Day-23-Zen-Coding
- day23example
- Day-24-Resets-and-Normalizing
- day24example
- Day-25-CSS-Frameworks
- day25example
- Day-26-Final-Project-Markup
- day26example
- Day-27-Slicing-a-PSD
- day27example
- Day-28-How-to-Create-Snippets
- day28example
- Day-29-Website-CSS
- day29example
- Day-30-Finishing-Up-the-Website
- day30example
