噩梦开始的源头：之前写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 不用区分大小写哦

SO:以后所有页面都要添加DOCTYPE!

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

  1. doctype声明的重要性-------这绝对是ie的坑, 与angular无关, 我错怪你啦

    今天开发一个页面,  自己写页面, 自己实现功能. 因为以往需求都没有要求兼容ie9, 所以并未发现此坑. 今天就记录下来. 贴图对比 ie9 chrome 如图, ie9界面显示错误. 起初以为是a ...

  2. 什么是<!DOCTYPE html>

    什么是<!DOCTYPE html>? 在HTML文档初,往往会有这么一句话<!DOCTYPE html>,那么它的意义是什么呢?它是html5标准网页声明,全称为Docume ...

  3. 前端面试题-<!DOCTYPE>

    现在的各种前端开发工具都足够强大,支持插入模板代码,也就导致我们往往会忽略已经自动生成的代码,而代码的第一行 DOCTYPE 声明,就是最容易忽略的部分. 一.DOCTYPE DOCTYPE 是 do ...

  4. web前端如何让网页布局稳定性和标准性？

    刚开始学css+div布局的同学们,都比较困惑和难写的就是兼容性的问题了,特别是ie6等低版本的浏览器,随意国内逐步慢慢消失取代,但是现阶段还是会有点考虑因素再里面.我们写的网页布局怎么样才是合理的, ...

  5. DOCTYPE的重要性

    <!DOCTYPE>是文档类型声明: 声明必须是 HTML 文档的第一行,位于 <html> 标签之前.明不是 HTML 标签:它是指示 web 浏览器关于页面使用哪个 HTM ...

  6. HTML DOCTYPE 重要性

    定义和使用方法 <!DOCTYPE> 声明必须是 HTML 文档的第一行.位于 <html> 标签之前. <!DOCTYPE> 声明不是 HTML 标签.它是指示 ...

  7. HTML DOCTYPE 的重要性

    定义和用法 <!DOCTYPE> 声明必须是 HTML 文档的第一行,位于 <html> 标签之前. <!DOCTYPE> 声明不是 HTML 标签:它是指示 we ...

  8. 关于html中的doctype的重要性的认知以及IE的浏览器模式与文档模式

    浏览器模式”用于切换IE针对该网页的默认文档模式.对不同版本浏览器的条件备注解析.发送给网站服务器的用户代理(User-Agent)字符串的值.网站可以根据浏览器返回的不同用户代理字符串判断浏览器的版 ...

  9. 前端科普文—为什么<!DOCTYPE> 不可或缺

    When question comes 你一定在 HTML 页面最前面看到过这样一行代码(比如 百度): <!DOCTYPE html> 或者说类似这样的(比如 博客园-韩子迟 PS:博客 ...

随机推荐

  1. 每天一个linux命令（网络）：【转载】route命令

    Linux系统的route命令用于显示和操作IP路由表(show / manipulate the IP routing table).要实现两个不同的子网之间的通信,需要一台连接两个网络的路由器,或 ...

  2. Spring学习-学习路线

    Spring的IOC Spring的AOP , AspectJ Spring的事务管理 , 三大框架的整合

  3. [CSAcademy]Colored Forests

    csacademy description 有\(M\)种颜色编号为\(1-M\).现给树上的每个点染上这\(M\)种颜色中的一种,定义一棵树是\(\mbox{colorful}\)的当且仅当这棵树上 ...

  4. flow 编写flow-typed 定义(官方文档)

    此为官方文档,因为墙的问题,记录下来: Before spending the time to write your own libdef, we recommend that you look to ...

  5. Mac 使用ab性能测试工具

    Mac 使用ab命令进行压测 1.在Mac中配置Apache ①启动Apache,打开终端 sudo apachectl -v 如下显示Apache的版本 sudo apachectl start 这 ...

  6. socket编程---TCP

    服务器端先初始化Socket,然后与端口绑定(bind),对端口进行监听(listen),调用accept阻塞,等待客户端连接.在这时如果有个客户端初始化一个Socket,然后连接服务器(connec ...

  7. 什么是HBase（五） HBase的运维工具

    常用工具 文件修复 hbck 文件查看 hfile WAL查看工具 hlog 压缩测试工具 compressTest(字段前缀编码以及block压缩设置后进行测试) 数据迁移工具copyTable 导 ...

  8. boost::threadpool 调用类成员变量并传入参数 的方法

    1. 首先到官网下载   http://threadpool.sourceforge.net/   2. 包含头文件   #include "../boost/threadpool.hpp& ...

  9. python之数据驱动ddt

    下载ddt并安装 Pip install ddt 或者官网下载安装 http://ddt.readthedocs.io/en/latest/ https://github.com/txels/ddt ...

  10. 配置myslq提示 the configuration step starting server is taking longer than expected we apologize for thi

    .卸载重新安装,勾选日志配置选项,自定义日志输出路径