之前写html或者jsp页面，从来不注意DOCTYPE 的声明，也不太明白DOCTYPE 的作用。直到最近碰到了一个非常奇葩的bug：某一个页面在IE7和8，Chrome，ff等下正常，但是在IE9下显示有问题，我就开始找啊找，各种调试，终于在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 不用区分大小写哦

web文档类型DOCTYPE html很重要的更多相关文章

  1. Error-Javascript：错误：页面文档类型(DOCTYPE)未声明!

    ylbtech-Error-Javascript:错误:页面文档类型(DOCTYPE)未声明! 1.返回顶部 1. HTML1300: 进行了导航.文件: TransferNote.aspxHTML1 ...

  2. XHTML 1.0 的三种 XML 文档类型 DOCTYPE

    XHTML 1.0 的三种 XML 文档类型 XHTML 1.0 规定了三种 XML 文档类型 XHTML 1.0 Strict <!DOCTYPE html PUBLIC "-//W ...

  3. HTML DOCTYPE文档类型举例说明

    HTML DOCTYPE文档类型举例说明 HTML4.01文档过渡定义类型,此类型定义的文档可以使用HTML中的标签与元素包括一些不被W3C推荐的标签(例如:font.b等),不可以使用框架 < ...

  4. 文档类型DTD，DOCTYPE和浏览器模式

    出处:http://blog.csdn.net/freshlover/article/details/11616563 浏览器从服务端获取网页后会根据文档的DOCTYPE定义显示网页,如果文档正确定义 ...

  5. HTML文档类型DTD与浏览器怪异模式

    虽然在兼容IE6时候经常会注意到两个模式的区别,但是系统的理解起来,还没有认真总结过.看了一些网上的资料.结合自己的理解汇总了一下,放在这里备忘并分享给大家. 浏览器从服务端获取网页后会根据文档的DO ...

  6. DOCTYPE html PUBLIC 指定了 HTML 文档遵循的文档类型定义

    DOCTYPE html PUBLIC 指定了 HTML 文档遵循的文档类型定义 今天看到一篇CSS应用的一个友好搜索,我按网页上的代码复制.粘贴后预览时总达不到效果,而直接拷贝他的实例却能达到效果, ...

  7. 文档类型、DOCTYPE切换和浏览器模式

    DTD(文档类型定义)是一种机器可读的规则,它们定义XML或HTML的特定版本中允许有什么.不允许有什么.在解析网页时,浏览器将使用这些规则检查页面的有效性并且采取相应的措施.浏览器通过分析页面的DO ...

  8. doctype（文档类型）的作用是什么?转载

    <!DOCTYPE> 声明位于文档中的最前面的位置,处于 <html> 标签之前.此标签可告知浏览器文档使用哪种 HTML 或 XHTML 规范. Document Type ...

  9. !DOCTYPE html文档类型声明简写 HTML5 DOCTYPE缩写

    html5之!DOCTYPE html文档类型声明简写,在HTML5中DOCTYPE简写非常重要. 一.概述   -   TOP 让CSS样式表生效,DOCTYPE声明是必须的,以前TABLE布局的网 ...

随机推荐

  1. Laravel-高级篇-Artisan

    (慕课网_轻松学会Laravel-高级篇_天秤vs永恒老师_http://www.imooc.com/learn/702) 一.概述 Artisan是Laravel中自带的命令行工具的名称 由强大的S ...

  2. POJ 2392 Space Elevator 背包题解

    多重背包.本题不须要二分优化.相对简单点.由于反复数十分小,小于10. 而添加一个限制每种材料的高度做法.假设使用逆向填表,那么仅仅须要从这个高度往小递归填表就能够了. 还有就是注意要排序,以限制高度 ...

  3. Class的生命周期

    之前的<JVM类载入机制-ClassLoader>和<初探JVM-ClassLoader源代码>,仅仅是讨论了Class的载入部分,如今来纵观一下整个Class的生命周期. C ...

  4. Android自定义控件（三）——有弹性的ListView

    上一次我们试验了有弹性的ScrollView.详情 这一次,我们来试验有弹性的ScrollView. 国际惯例,效果图: 主要代码: import android.content.Context; i ...

  5. keepalived vip漂移基本原理及选举算法

    keepalived可以将多个无状态的单点通过虚拟IP(以下称为VIP)漂移的方式搭建成一个高可用服务,常用组合比如 keepalived+nginx,lvs,haproxy和memcached等.它 ...

  6. js Date扩展Format()函数

    Date.prototype.Format = function (formatStr) { var str = formatStr; var Week = ['日', '一', '二', '三', ...

  7. （转）怎样查看局域网中自己的IP地址和其他电脑的IP地址?

    开始菜单->运行->打cmd,回车->再弹出的黑框里打ipconfig -all,回车显示的IP Address就是你的ip地址看局域网的电脑的ip用软件比较方便,比如p2p终结者, ...

  8. Oracle函数function

    --function /* 函数是有返回值.-只能有一个返回值. 语法 Create or replace func1(参数) Return varchar2 As Pl/sql块 Return 'J ...

  9. C# Excel 读取为Datatable

    最近项目用到的读取Excel 为DataTable 兼容2003.2007.2010.记录一下,以后会用到 引用 NPOI.dll 和 EPPlus.dll using System; using S ...

  10. css实现超连接按钮形式显示

    <html> <head> <meta http-equiv="Content-Type" content="text/html; char ...