噩梦开始的源头：之前写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. SpringBoot启动报：Caused by: java.lang.IllegalArgumentException: At least one JPA metamodel must be present!

    使用spring boot对项目改造,启动报错: Caused by: java.lang.IllegalArgumentException: At least one JPA metamodel m ...

  2. UVA11019 Matrix Matcher【hash傻逼题】【AC自动机好题】

    LINK1 LINK2 题目大意 让你在一个大小为\(n*m\)的矩阵中找大小是\(x*y\)的矩阵的出现次数 思路1:Hash hash思路及其傻逼 你把一维情况扩展一下 一维是一个bas,那你二维 ...

  3. Jenkins搭建.NET自动编译发布本地环境

    最近在做一个团队项目的时候,用到了自动编译发布部署环境[也可以说是持续集成],于是顺便学习了下这个环境的搭建过程. 持续集成 持续集成是一种软件开发实践,即团队开发成员经常集成它们的工作,通常每个成员 ...

  4. [BZOJ2727][HNOI2012]双十字

    bzoj luogu sol 先预处理从每个点出发向上/下/左/右能延伸多长. 考虑怎么计算答案.我们只要枚举中轴线,再枚举上方的十字交点,枚举下方的十字交点,然后算答案即可. 考虑一个左右宽的最小值 ...

  5. 开始SDK之旅-入门2-集成流程图、轨迹图到系统

    http://bbs.ccflow.org/showtopic-2562.aspx 经测试,基本可用,还需增加 WF/Admin/pub.ascx 首先你得先理解流程图的数据的获取方式,其他的就很容易 ...

  6. Angular 安装

    1.angular安装 npm  install -g angular 2. 显示angular安装路径 npm config ls 3. angular 双向绑定 <!DOCTYPE html ...

  7. 【解决Jira】Chrome提示Java插件因过期而遭到阻止(JIRA上传截屏截图)

    最近经常被这个问题所困扰:用Chrome访问JIRA上传截屏截图时,地址栏下面弹出通知,提示JAVA插件已过期.但是由于公司要求统一开发环境和设置,不能更新到最新版,就像这样: 结果网页上的Java就 ...

  8. Windows应用程序的VC链接器设置

    Windows应用程序的VC链接器设置 /*转载请注明出自 听风独奏 www.GbcDbj.com */ Windows应用程序分为GUI(Graphical User Interface)和CUI( ...

  9. 中信信用卡淘气金卡，V金卡，大众点评金卡，易卡白金卡

    中信 | 谈谈经典多倍积分卡:易卡&悦卡(超详细+图解+思考)! http://www.flyertea.com/thread-1972766-1-1.html 易卡积分测试,购物/机票/外卖 ...

  10. [saiku] saiku-添加数据源以及保证数据源的一致性

    采用任何一种添加数据源的方式都不能保证数据源的一致和完整,所以需要两种结合来管理数据源 1.通过saiku的管理台添加数据源 ① 第一种方式:schema和ds都在管理台添加 1)上传schema文件 ...