`
accpxudajian
  • 浏览: 451971 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

<!DOCTYPE html>很重要

    博客分类：
  • Web
DOCTYPEdocument.compatMode
阅读更多

噩梦开始的源头：之前写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/

 

 

 

 

 

 

 

 

 

 

愤怒的coder  - 以后所有页面都要添加DOCTYPE

 

 

分享到：
| 获取行政区划地名地址的简称
评论
1 楼 yhlllq 2014-02-25  
我也遇到了同样的问题，而且只能这样写，写成<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">不行
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    【JavaScript源代码】javascript局部自定义鼠标右键菜单.docx

    javascript局部自定义鼠标右键菜单 ...DOCTYPE html&gt;　&lt;html&gt;　&lt;head&gt;　&lt;meta charset="utf-8"&gt;　&lt;title&gt;&lt;/title&gt;　&lt;style type="text/css"&gt;　#TextBox{　width: 200px;　height: 200px;　border: 1px solid #000;　

    【JavaScript源代码】js制作轮播图效果.docx

    js制作轮播图效果 　轮播图在前端开发中我认为是一个比较重要的点，因为包含了很多...DOCTYPE html&gt;　&lt;html lang="en"&gt;　&lt;head&gt;　&lt;meta charset="UTF-8"&gt;　&lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;　

    【JavaScript源代码】基于事件冒泡、事件捕获和事件委托详解.docx

    基于事件冒泡、事件捕获和事件委托详解 　事件冒泡、事件捕获和事件委托　在javascript里，事件委托是很重要的一个东西，事件委托依靠的就是事件冒泡和捕获的机制，我先来解释一下...DOCTYPE html&gt;　&lt;html&gt;　&lt;head&gt;　&lt;m

    自己整理的一些HTML的基础知识，如果能够帮助到你们，我就很开心啦

    DOCTYPE html&gt; 描述当前文件的版本信息，如果没有详细说明4.0还是x1.0 那就是5版本。2、&lt;html&gt;html文件3、&lt;head&gt;网页的头部4、&lt;meta charset=“UTF-8”&gt; utf-8 是国际编码的意思，如果不写，或者写成其他都会有问题...

    解读html5关于html5的应用与认识

    ,&lt;footer&gt;、&lt;nav&gt;、&lt;time&gt;、&lt;mark&gt;、&lt;figure&gt; 和 &lt;figcaption&gt;。 这些标签被除了IE 外的所有现代浏览器（Firefox 3+、Safari 3.1+、Chrome 2+、and Opera 9.6+）支持。Javascript 提供了document.createElement(tag...

    基于MyEclipse搭建maven+springmvc整合图文教程(含源码0

    DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"&gt; &lt;html&gt; &lt;head&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8"&gt; &lt;title&gt;...

    FCKeditor RedFishX配置版

    &lt;br&gt; }&lt;br&gt; &lt;/script&gt;&lt;br&gt;&lt;/head&gt;&lt;br&gt;&lt;body&gt;&lt;br&gt; &lt;form id="dataform" method="post" action="target.aspx"&gt;&lt;br&gt; &lt;textarea id="content"&gt;&lt;/textarea&gt;&lt;br&gt; &lt;/form&gt;&lt;br&gt;&lt;/body&gt;&lt;br&gt;&lt;/html&gt;&lt;br&gt;&lt;br&gt;说明：&lt;br&gt;&lt;br&gt;...

    FCKeditor RedFishX配置版 1.1

    &lt;br&gt;}&lt;br&gt;&lt;/script&gt;&lt;br&gt;&lt;/head&gt;&lt;br&gt;&lt;body&gt;&lt;br&gt;&lt;form id="dataform" method="post" action="target.aspx"&gt;&lt;br&gt;&lt;textarea id="content"&gt;&lt;/textarea&gt;&lt;br&gt;&lt;/form&gt;&lt;br&gt;&lt;/body&gt;&lt;br&gt;&lt;/html&gt;&lt;br&gt;&lt;br&gt;说明：&lt;br&gt;&lt;br&gt;&lt;script ...

    open lacal

    DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt; &lt;head&gt; &lt;meta ...

    HTML5开发实训

    DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8" /&gt; &lt;title&gt;Hello MobileTalk&lt;/title&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-...

    zabbixcli:用于将zabbix模板作为YAML文件管理的工具

    重要提示：我强烈建议您在使用此工具之前删除所有当前模板，并仅使用zabbixcli管理您的zabbix模板。范本随意使用任何这些模板 ，对其进行修改或自行制作。用法可以通过运行带有-h标志的zabbixcli来找到工具使用指南...

    JavaScript Table行定位效果

    DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt; &lt;body&gt; &lt;table cellpadding="5" ...

    material-components-web-components：材料设计Web组件

    材质Web组件 重要说明：Material Web Components尚在开发中，在1.0发行之前可能会有重大更改。 Material Web Components（MWC）是由Google维护的实现的的集合。 成分 ...doctype html &gt; &lt; html

    详解vue.js全局组件和局部组件

    这两天学习了Vue.js 感觉组件这个地方知识点挺多的，而且很重要，所以，今天添加一点小笔记。 首先Vue组件的使用有3个步骤，创建组件构造器，注册组件，使用组件3个方面。 代码演示如下： &lt;!DOCTYPE html&gt; &lt;...

    cms后台管理

    &lt;li&gt;&lt;a href="${a.url}" target="_blank"&gt;${a.title}&lt;/a&gt;&lt;/li&gt; [/#list] 就是简单的将tag_list中的内容，即“paramWrap.put(OUT_LIST, DEFAULT_WRAPPER.wrap(list));”中放入的数据遍历出来 style_2-1.html中的...

    html页面展示json数据并格式化的方法

    DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta http-equiv=Content-Type content=text/html; charset=UTF-8&gt; &lt;style&gt; pre {outline: 1px solid #ccc; padding: 5px; margin: 5px; } .string {

    AngularJS入门教程之数据绑定用法示例

    DOCTYPE html&gt; &lt;html ng-app&gt; &lt;head lang=en&gt; &lt;meta charset=UTF-8&gt; [removed][removed] &lt;title&gt;tutorial02&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;div&gt; 用户名：&lt;input type=...

    angularJS中router的使用指南

    这几天看了angularjs和backbone，大看了解了knockout和...&lt;br&gt;//这个重要是做IE的兼容，发现不管用，IE坑爹，你懂的 &lt;body ng-app=”routeApp” class=”ng-app:routeApp” id=”routeApp”&gt; &lt;h1&gt;Route Demo i

    springmybatis

    mybatis 用来建立 sessionFactory 用的，里面主要包含了数据库连接相关东西，还有 java 类所对应的别名，比如 &lt;typeAlias alias="User" type="com.yihaomen.mybatis.model.User"/&gt; 这个别名非常重要，你在 具体的类...

    HTML-CSS：html-css参考

    常见HTML标签根据要在页面上构建哪些元素，可以选择许多HTML标签。 您可以随时在此处查找HTML标签。 但是，这是一些最常见HTML标记的简短列表，您会在整个课程中看到这些... &lt;p&gt; Hello World&lt;/p&gt; &lt;/body&gt; &lt;/h

Magicbox
Global site tag (gtag.js) - Google Analytics