噩梦开始的源头：之前写html或者jsp页面，从来不注意doctype的声明，也不太明白doctype的作用。直到最近碰到了一个非常奇葩的 bug：某一个页面在IE7和8，Chrome，ff等下正常，但是在IE9下显示有问题，我就开始找啊找，各种调试，各种log，终于在 httpWatch里边找到了答案：DOCTYPE未声明。于是我给页面添加了<!DOCTYPE html>,果然奏效了。

下面我就尽可能简洁扼要的说一下DOCTYPE的作用和用法。

1作用：声明文档的解析类型(document.compatMode)，避免浏览器的怪异模式。

  document.compatMode：
BackCompat：怪异模式，浏览器使用自己的怪异模式解析渲染页面。
CSS1Compat：标准模式，浏览器使用W3C的标准解析渲染页面。
 

这个属性会被浏览器识别并使用，但是如果你的页面没有DOCTYPE的声明，那么compatMode默认就是BackCompat,

这也就是恶魔的开始 -- 浏览器按照自己的方式解析渲染页面，那么，在不同的浏览器就会显示不同的样式。

如果你的页面添加了<!DOCTYPE html>那么，那么就等同于开启了标准模式，那么浏览器就得老老实实的按照W3C的

标准解析渲染页面，这样一来，你的页面在所有的浏览器里显示的就都是一个样子了。

这就是<!DOCTYPE html>的作用。

2 使用：<!DOCTYPE html>

2.1 使用也很简单，就是在你的html页面的第一行添加"<!DOCTYPE html>"一行代码就可以了

2.2 jsp的话，添加在<%@ page %>的下一行。

2.3 不用区分大小写哦

想了解更多，可以参考：

w3c : http://www.w3school.com.cn/tags/tag_doctype.asp

博文：http://i.wanz.im/2010/05/28/why_doctype_html/

<!DOCTYPE html>很重要的更多相关文章

  1. web文档类型DOCTYPE html很重要

    之前写html或者jsp页面,从来不注意DOCTYPE 的声明,也不太明白DOCTYPE 的作用.直到最近碰到了一个非常奇葩的bug:某一个页面在IE7和8,Chrome,ff等下正常,但是在IE9下 ...

  2. document.documentElement.clientHeight 与 document.body.clientHeight(杜绝千篇一律的抄袭!!)

    document.documentElement.clientHeight 与 document.body.clientHeight用来获取页面可视高度我觉得有点问题.这两个应该不是一个东西. 页面中 ...

  3. HTML5学习笔记简明版（1）：HTML5介绍与语法

    HTML5介绍 HTML5是继HTML4以后的下一代HTML标准规范,它提供了一些新的元素和属性(例如<nav>网站导航块和<footer>).新型的标签有利于搜索引擎和语义分 ...

  4. WPF4.5新特性(MSDN的翻译读不太懂)

    WPF4.5新特性(MSDN的翻译读不太懂) 1. 新的Doctype声明 XHTML的声明太长了,我相信很少会有前端开发人员能手写出这个Doctype声明. <!DOCTYPE html PU ...

  5. html5基础的常用的技巧

    html5基础的常用的技巧 1. 新的Doctype声明 XHTML的声明太长了,我相信很少会有前端开发人员能手写出这个Doctype声明. <!DOCTYPE html PUBLIC &quo ...

  6. 22个HTML5的初级技巧

    Web技术的发展速度太快了,如果你不与时俱进,就会被淘汰.因此,为了应对即将到来的HTML5,本文总结了22个HTML5的初级技巧,希望能对你进一步学习好HTML5会有所帮助. 1. 新的Doctyp ...

  7. 看到了必须要Mark啊，最全的编程中英文词汇对照汇总（里面有好几个版本的，每个版本从a到d的顺序排列）

    java:  第一章: JDK(Java Development Kit) java开发工具包 JVM(Java Virtual Machine) java虚拟机 Javac  编译命令 java   ...

  8. ie11 突然不能加载外部css 很神奇 头部改为 <!DOCTYPE> <html>

    <!DOCTYPE html> <html> 改为 <!DOCTYPE> <html>   OK了

  9. 很强大的HTML+CSS+JS面试题（附带答案）

    一.单项选择(165题) 1.HTML是什么意思? A)高级文本语言 B)超文本标记语言 C)扩展标记语言 D)图形化标记语言 2.浏览器针对于HTML文档起到了什么作用? A)浏览器用于创建HTML ...

随机推荐

  1. oracle‘s package,function,proceture编译时无响应（解决）

    在对Procedure.Function或Package进行Debug时,如果长时间没有操作,公司的防火墙会杀掉会话连接.这个时候数据库不会主动的释放会话的资源,如果再次对Procedure.Func ...

  2. Flex中的initialize,creationComplete和applicationComp

    转自:http://blog.csdn.net/sjz168/article/details/7244374 1.Application标签中有三个事件initialize,creationCompl ...

  3. from表单如果未指定action，submit提交时候会执行当前url

    <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding= ...

  4. 1.1Axure简介

    1.部件:点击部件右上角的?,可以看到相关注释,注释底部有网站链接,可查看部件的详细介绍.

  5. JPA快速入门(自用)

    该案例为JPA的实体映射案例,将该项目解压导入到myeclipse中即可使用,然后直接使用hibernate即可! 文件地址:files.cnblogs.com/mrwangblog/JPA-Hibe ...

  6. IBM CLI 和 ODBC

    Installing and Configuring DB2 Clients Running CLI/ODBC Programs The DB2 Call Level Interface (CLI) ...

  7. 【Java EE 学习 71 上】【数据采集系统第三天】【增加页面】【增加问题】【编辑页面，编辑问题】

    增加页面和编辑页面.增加问题和编辑问题的页面使用的都是相同的页面,最后调用的方法是saveOrUpdate方法,所以只说一个就可以了. 一.增加页面 比较简单,略.流程如下: 单击“增加页”超链接-& ...

  8. 在Mac上开启自带的Apache，httpd服务

    下面演示的是Mac自带的httpd服务 启动httpd服务 AppledeMacBook-Pro:python2_zh apple$ sudo apachectl start AppledeMacBo ...

  9. [MVC4]初识.NET MVC4

    最近一个月都在专心做unity3d的斗地主游戏,从早到晚,最后总算是搞出来了,其中的心酸只有自己知道.最近才有功夫闲下来,还是学习学习之前的老本行——asp.net,现在用.net做项目流行MVC,而 ...

  10. 删除流氓软件McAfee

    如何解决卸载McAfee时出现"处于托管模式时无法删除"问题 问题现象: 这几天在为客户终端换装杀毒软件时出现这么一个问题:在控制面板的添加或删除程序里面将"McAfee ...