1.文档模式

文档模式的概念是由IE5.5引入,通过使用文档类型(DOCTYPE)切换实现的。不同的文档模式主要影响CSS内容的呈现,尤其是浏览器对盒模型的解析,但在某些情况下也会影响到JavaScript的解释执行。

文档模式的种类

目前存在的文档模式主要有四种:

  混杂模式(怪异模式 quirks mode):让IE的行为与(包含非标准特性的)IE5相同;

  标准模式(非怪异模式 standard mode):让IE 的行为更接近标准行为(W3C标准)。

  准标准模式(有限怪异模式 almost standard mode):由于该模式离W3C标准仍然有一段距离,因此被称作准标准模式(或有限怪异模式)。IE6、7的标准模式实际上就是准标准模式,而IE8+才有实质上的标准模式。在该模式下的浏览器特性有很多都是符合标准的,但是也存有例外。不标准的地方主要体现在处理图片 间隙的时候(表格中使用图片是问题最明显)。

  超级标准模式:  IE8引入的一种新的文档模式,超级文档模式可以让IE以其所有版本中最符合标准的方式来解释网页内容

  准标准模式与标准模式的区别几乎可以忽略不计。因此,有时候说的“标准模式”,有可能是这两种模式的任一种。

开启文档模式:

对于标准模式,可以用下面的任何一种文档类型来开启:

<!-- HTML 4.01 严格型 -->
<!DOCTYPE HTML PUBLIC"-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<!-- XHTML 1.0 严格型 -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!--HTML 5-->
<!DOCTYPE html>

对于准标准模式,可以使用过渡型(transitional)或框架集型(frameset)的文档类型来触发:

<!-- HTML 4.01 过渡型 -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <!-- HTML 4.01 框架集型 -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"> <!-- XHTML 1.0 过渡型 -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <!-- XHTML 1.0 框架集型 -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

2.<!DOCTYPE>声明

  DOCTYPE是document type(文档类型)的简写形式。用来说明使用的XHTML或者HTML的版本。其中的DTD(例如上面提到的的xhtml1-transitional.dtd)叫文档类型定义,里面包含了文档的规则,浏览器就根据你定义的DTD来解释你页面的标识,并展现出来。几种DTD的声明见文档模式的开启。

<!DOCTYPE>声明的作用:

  声明文档的解析类型(document.compatMode),避免混杂模式(怪异模式)。

  document.compatMode:
    BackCompat:怪异模式,浏览器使用自己的怪异模式解析渲染页面。
    CSS1Compat:标准模式,浏览器使用W3C的标准解析渲染页面。

  如果在文档那个开始处没有发现文档类型声明,则所有浏览器都会默认开启混杂模式(按照自己的方式解析渲染页面),因为不同浏览器在该模式下的行为差异非常大,(如果不使用某些hack技术)从而导致跨浏览器的不一致性。

<!DOCTYPE>的使用:

  在html页面的第一行添加<!DOCTYPE>的声明即可。其中几种声明方式前面已经提到过。注意,使用HTML 5的话,直接在文档开头添加<!DOCTYPE html>即可。

3.严格模式

ECMAScript 5引入了严格模式(strict mode)的概念。严格模式是为JavaScript定义了一种不同的解析与执行模型。在严格模式下,ECMAScript3中的一些不确定的行为将会得到处理,而且对某些不安全的操作也会抛出错误。

严格模式的使用:

整个脚本中启用严格模式:在脚本的顶部添加代码:"use strict";

局部启用严格模式:比如指定某函数在严格模式下执行:

function doSomething(){
"use strict";
//函数体
}

其实,"use strict"这句代码是一个编译指示(pragma),用来告诉支持的JavaScript引擎切换都严格模式下。这是为了不破坏ECMAScript3的语法二特意选定的语法。在该模式下,JavaScript的执行结果会有很大的不同。

关于文档模式、DCOTYPE声明及严格模式的更多相关文章

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

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

  2. Prism 4 文档 ---第5章 实现MVVM模式

        MVVM模式有助于清楚的区分应用程序界面的业务层和展现层.保持一个清晰的应用程序逻辑和UI分离有助于处理开发和设计过程中大量的问题,同时,使得应用程序的测试,维护,和扩展更加容易.MVVM也可 ...

  3. 2013第49周三IE9文档模式

    今天完善了原有模块的代码和注释,然后继续之前新模块的开发,并写了两边的service接口,除了因为邮件中有部分问题让我分心外,专心下来写代码的感觉真好,今天基本上没遇到多少让我新感悟的技术问题,就总结 ...

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

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

  5. 文档类型DTD,DOCTYPE和浏览器模式

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

  6. IE的文档模式, 及Textarea呈现bug一例

    做了个非常简单的页面, 仅有几行html代码, 内容如下: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtm ...

  7. 【HTML&CSS】 第一章:DTD文档声明

    <!DOCTYPE> 声明必须是 HTML 文档的第一行,位于 <html> 标签之前. <!DOCTYPE> 声明不是 HTML 标签:它是指示 web 浏览器关 ...

  8. html4.0.1,h5,xhml,文档声明区别

    <!DOCTYPE> 声明不是 HTML 标签:它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令. 提示:请始终向 HTML 文档添加 <!DOCTYPE> ...

  9. 1关于script标签属性,注意点,浏览器文档模式,各种数据类型的转化

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

随机推荐

  1. python 历险记(四)— python 中常用的 json 操作

    目录 引言 基础知识 什么是 JSON? JSON 的语法 JSON 对象有哪些特点? JSON 数组有哪些特点? 什么是编码和解码? 常用的 json 操作有哪些? json 操作需要什么库? 如何 ...

  2. 简单理解Zookeeper的Leader选举【转】

    Leader选举是保证分布式数据一致性的关键所在.Leader选举分为Zookeeper集群初始化启动时选举和Zookeeper集群运行期间Leader重新选举两种情况.在讲解Leader选举前先了解 ...

  3. php数据库的增删改查

    1.查询: 数据的显示,这里就可以嵌入php来进行数据的输出 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 ...

  4. springboot系列十二、springboot集成RestTemplate及常见用法

    一.背景介绍 在微服务都是以HTTP接口的形式暴露自身服务的,因此在调用远程服务时就必须使用HTTP客户端.我们可以使用JDK原生的URLConnection.Apache的Http Client.N ...

  5. Python3学习笔记08-tuple

    元组与列表类似,不同之处在于元组的元素不能修改 元组使用小括号,列表使用方括号 元组创建很简单,只需要在括号中添加元素,并使用逗号隔开即可 tup1 = ('Google', 'Runoob', 19 ...

  6. composer安装laravel框架时未生成Vendor解决办法

    三个方法并没有关联,可以单独尝试也可以一起设置. 方法一. 去php.ini中查看下面三个扩展项是否开启 extension=php_fileinfo.dll extension=php_mbstri ...

  7. Java验证码

    下面这段代码可用于Jsp+Servle+JavaBean中做验证码: <%@ page contentType="image/jpeg" import="java. ...

  8. input text 去掉标签下拉提示

    autocomplete 属性 autocomplete 属性规定输入字段是否应该启用自动完成功能. 自动完成允许浏览器预测对字段的输入.当用户在字段开始键入时,浏览器基于之前键入过的值,应该显示出在 ...

  9. IE6下select被这罩住

    在我们做弹出遮罩层时经常遇到这种问题,就是select被这罩住不兼容IE6,其实解决这种问题并不难,只要掌握住原理就挺简单的. 首先就是当遮罩层出现时select要暂时隐藏,但是不能用display: ...

  10. 基于axios创建的实例使用axios.all,报错:this.$http is not a function,但请求成功

    报以下错误: 原因: axios实例没有all这个方法,all是axios的静态方法 解决方法: 以下方法不是最好的,还没找到更好的解决办法,目前先这样解决.