噩梦开始的源头：之前写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. 软件设计Tips

    模块-----角色----用户----部门 | |    ------权限 | 系统管理-------业务管理-------报表展示 | |         --------------------待 ...

  2. 为RecyclerView的不同item项实现不同的布局(添加分类Header)

    最近在做一个应用的时候,需要为GridLayoutManager添加头部header,然后自然而然就想到了用不同的itemType去加载不同的布局. 1.实现多item布局,用不同的itemType去 ...

  3. 游戏的套路你知道吗？ H5 Canvas刮刮乐

    玩游戏的人 很多时候都会遇到翻牌子  开宝箱. 总有人傻傻的在哪里还纠结很久到底点哪一个! 纠结  指不定翻哪一个会多一点,你明明看到那个卡片的奖项多 . 那我就告诉你好了  其实很多时候在你点开那个 ...

  4. 解决ftp上传connection reset错误

    切换到管理员,cmd下面执行:netsh advfirewall set global StatefulFTP disable MS对此的解释:https://technet.microsoft.co ...

  5. Redis基本信息

    1.Windows安装地址 https://github.com/MSOpenTech/redis/releases 2.命令行方式运行 执行redis-cli.exe 3.待续

  6. iOS多线程笔记

    在iOS开发中,有三种多线程处理方式: 1. 利用NSThread 2. NSOperation和NSOperationQueue 3. 利用GCD(Grand Central Dispatch) 使 ...

  7. mac包管理器Homebrew安装命令

    ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

  8. war项目在tomcat上面部署

    1.war包放到webapps根目录下. 2.修改tomcat目录下的conf文件夹里面的的server.xml,在<Host></Host>之间加入: <Context ...

  9. 剑指Offer-【面试题02：实现Singleton 模式——七种实现方式】

    题目:设计一个类,我们只能生成该类的一个实例 package com.cxz.demo02; /** * Created by CXZ on 2016/9/13. */ public class Si ...

  10. Error staring Tomcat Cannot connect to VM错误解决办法

    最近经常遇myEclipse以debug方式启动tomcat的错误提示如下: 直接run方式启动没有问题. 一般这个问题等一会就不再出现,如果有耐心的话,就等几分钟再启动.如果没有耐心,可以试试下面的 ...