噩梦开始的源头：之前写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. 将 UWP 中 CommandBar 的展开方向改为向下展开

    在 UWP 中使用 CommandBar 来迅速添加一组功能按钮是非常迅速的,是 UWP 中推荐的交互方案之一.也许你能见到 CommandBar 按你所需向下展开,不过可能更多数情况会看到 Comm ...

  2. ambassador 学习九 多ambassador部署说明

    目前官方稳文档没有写,但是demo 里面有,所以就整理出来,其实目前demo里面的 多实例部署用了多个服务的service(使用nodeport 暴露地址,具体使用就是制定ambassador 实例的 ...

  3. mysql学习--基本使用

    一旦安装完毕,MySQL 服务器应该自己主动启动. sudo start mysql #手动的话这样启动 sudo stop mysql #手动停止 当你改动了配置文件后,你须要重新启动 mysqld ...

  4. oracle 查版本号

    oracle是强大的数据库,我们怎样看它的版本呢? 工具/原料 oracle 数据库, sqlplus 方法/步骤 首先进入sqlplus,cmd---plsql,登陆我们的用户,如:user/pas ...

  5. c++ 声明和定义的区别

    从编译原理上来说,声明是仅仅告诉编译器,有个某类型的变量会被使用,但是编译器并不会为它分配任何内存.而定义就是分配了内存. int a;在外面是作为一个语句,这就是定义,会构造对象,定义本身也是声明. ...

  6. redis的maxmemory与maxmemory-policy关系

    如果redis配置了maxmemory和maxmemory-policy策略,则当redis内存数据达到maxmemory时,会根据maxmemory-policy配置来淘汰内存数据,以避免OOM.r ...

  7. 随笔教程：FastAdmin 如何打开新的标签页

    随笔教程:FastAdmin 如何打开新的标签页 FastAdmin 有弹窗功能有时候不能胜任所有情况,有一定局限性. 那这时候就需要在新的标签页打开页面. 在 FastAdmin 中打新的标签页很简 ...

  8. 使用ffmpeg步骤（转）

    av_register_all();//初始化ffmpeg库,如果系统里面的ffmpeg没配置好这里会出错  if (isNetwork) {      //需要播放网络视频      avforma ...

  9. C#综合揭秘——细说事务

    引言 其实事务在数据层.服务层.业务逻辑层多处地方都会使用到,在本篇文章将会为大家一一细说. 其中前面四节是事务的基础,后面的三节是事务的重点,对事务有基础的朋友可以跳过前面四节. 文章有错漏的地方欢 ...

  10. Excel图片调整大小

    Excel图片调整大小 Sub 图片调整合适大小() ' Debug.Print ActiveWorkbook.Name 图片显示比例 = 0.9 '1为顶满单元格 Dim wb As Workboo ...