Doctype作用?严格模式与混杂模式如何区分?它们有何差异?


Doctype:(Document Type)文档类型,它位于文档中最前面的位置,处于标签之前。如果你想制作符合标准的页面,一个必不可少的关键组成部分就是DOCTYPE的声明。确定了正确的Doctype,xhtml里面的标识和css才能正常生效(也就是说它会很负责地告诉浏览器怎么解释你的这个标签和你写的css)。既然它是一种声明,它的责任就是告诉浏览器文档使用哪种html或者xhtml规范。为了获取正确的Doctype声明,关键就是让dtd与文档所遵循的标准对应。例如:假定文档遵循的是xhtml 1.0 strict,那么文档的Doctype声明就应该是相应的dtd,如果Doctype声明指定的是xhtml dtd,但文档包含的依旧是html标记就是不恰当的。类似的,如果文档包含的是xhtml 1.0 strict标记,但是Doctype声明指定是html dtd也是不恰当的。

  一、选择什么样的DOCTYPE?

  xhtml 1.0中有3种dtd声明可以选择,过渡性的(Transitional)、严格的(Strict)、框架的(Frameset)。下面我们来分别介绍:

  1、过渡的:一种要求不很严格的,允许在html中使用html 4.01的标识(符合xhtml语法标准),过渡的dtd写法如下:

[html]  view plain  copy
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  

  2、严格的:一种要求严格的dtd,不允许使用任何表现层的标识和属性,严格的dtd写法如下:

[html]  view plain  copy
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  

  3、框架的:一种专门针对框架页面所使用的dtd,当页面中含有框架元素时,就要采用这种dtd,写法如下:

[html]  view plain  copy
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">  

  PS:使用严格的dtd来制作页面当然是最理想的方式,但是对于还没有深入了解web标准的网页设计者,比较适合用过渡的dtd,因为这种dtd还允许使用表现层的标识、元素和属性,比较适合大多数的网页制作人员(当然量力而为了!)

二、什么是标准模式与混杂模式?

不同文档模式主要影响CSS内容的呈现,尤其是浏览器对盒模型的解析,但在某些情况下也会影响到JavaScript的解释执行。
1、文档模式目前有四种:

混杂模式(quirks mode)
 //让IE的行为与(包含非标准特性的)IE5相同
标准模式(standards mode)
//让IE的行为更接近标准行为
准标准模式(almost standards mode)
//这种模式下的浏览器特性有很多都是符合标准的,不标准的地方主要体现在处理图片间隙的时候(在表格中使用图片时问题最明显)。
超级标准模式:
//IE8引入的一种新的文档模式,超级文档模式可以让IE以其所有版本中最符合标准的方式来解释网页内容。

ps:
总的来看,混杂模式让IE像IE5,标准模式使用IE7的呈现引擎,而超级标准模式则是IE8的默认文档模式。

(另一篇关于混杂模式解释:

 什么是混杂模式呢?
  混杂模式是一种比较宽松的向后兼容的模式。混杂模式通常模拟老式浏览器的行为,以防止老站点无法工作

  为什么会有混杂模式呢?
  当年Netscape4(译注:网景公司早期的浏览器)和IE4(微软公司早期的浏览器)实现CSS机制时,并没有遵循W3C提出的标准。Netscape4 提供了糟糕的支持,而IE4 虽然接近标准,但依旧未能完全正确的支持标准。尽管IE 5 修复了IE4 许多的问题(bugs),但是依然延续CSS实现中的其它故障(主要是盒模型(box model)问题)。为了保障自己的网站在各个浏览器上显示正确,网页开发者们不得不依据各个浏览器自身的规范来使用css,因此大部分网站的css实现并不符合W3C规范的标准。然而随着标准一致性越来越重要,浏览器开发商不得不面临一个艰难的抉择:逐渐遵循W3C的标准是前进的方向。但是改变现有的 css,完全去遵循标准,会使许多旧网站或多或少受到破坏,如果浏览器突然以正确的方式解析现存的css,陈旧的网站的显示必然会受到影响。所以,所有的浏览器都需要提供两种模式:混杂模式服务与旧式规则,而严格模式服务于标准规则

2、两种模式间的差异

对于这两种模式之间的差异,最显著的一个例子与Windows上IE专有的盒模型有关。在IE 6出现时,在标准模式中使用的是正确的盒模型,在混杂模式中使用的则是老式的专有盒模型。为了维持对IE 5和更低版本的向后兼容性,Opera 7和更高版本也在混杂模式中使用有缺点的IE盒模型。

呈现方面的其他差异比较小,而且是与特定浏览器相关的,包括对于十六进制颜色值不需要#号、假设CSS中没有指定单位的长度的单位是像素,以及在使用关键字时将字号增加一级。


3、如何触发两种模式

DOCTYPE不存在或形式不正确会导致HTML和XHTML文档以混杂模式呈现。

触发严格模式:

[html]  view plain  copy
  1. <!-- HTML 4.01 严格型 -->  
  2. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"  "http://www.w3.org/TR/html4/strict.dtd">   
  3.   
  4. <!-- XHTML 1.0 严格型 -->  
  5. <!DOCTYPE html PUBLIC  "-//W3C//DTD XHTML 1.0 Strict//EN"  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  

触发混杂模式

[html]  view plain  copy
  1. <!-- HTML 4.01 过渡型 -->  
  2. <!DOCTYPE HTML PUBLIC  "-//W3C//DTD HTML 4.01 Transitional//EN"  "http://www.w3.org/TR/html4/loose.dtd">   
  3.   
  4. <!-- HTML 4.01 框架集型 -->  
  5. <!DOCTYPE HTML PUBLIC  "-//W3C//DTD HTML 4.01 Frameset//EN"  "http://www.w3.org/TR/html4/frameset.dtd">   
  6.   
  7. <!-- XHTML 1.0 过渡型 -->  
  8. <!DOCTYPE html PUBLIC  "-//W3C//DTD XHTML 1.0 Transitional//EN"  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">   
  9.   
  10. <!-- XHTML 1.0 框架集型 -->  
  11. <!DOCTYPE html PUBLIC  "-//W3C//DTD XHTML 1.0 Frameset//EN"  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">  
IE8关闭超标准模式
[html]  view plain  copy
  1. <meta http-equiv="X-UA-Compatible" content="IE=7" />  
  2. content属性中IE的值用于指定使用哪个版本的呈现引擎来呈现页面。设计这个值的目的就是为了向后兼容那些专门为老版本的IE设计的站点和页面。  


二、严格模式与混杂模式如何区分?它们有何意义?


严格模式:又称标准模式,是指浏览器按照 W3C 标准解析代码。

混杂模式:又称怪异模式或兼容模式,是指浏览器用自己的方式解析代码。

如何区分:浏览器解析时到底使用严格模式还是混杂模式,与网页中的 DTD 直接相关。

1、如果文档包含严格的 DOCTYPE ,那么它一般以严格模式呈现。 (严格 DTD ——严格模式) 
2、包含过渡 DTD 和 URI 的 DOCTYPE ,也以严格模式呈现,但有过渡 DTD 而没有 URI (统一资源标识符,就是声明最后的地址)会导致页面以混杂模式呈现。 (有 URI 的过渡 DTD ——严格模式;没有 URI 的过渡 DTD ——混杂模式) 
3、DOCTYPE 不存在或形式不正确会导致文档以混杂模式呈现。 (DTD不存在或者格式不正确——混杂模式)
4、HTML5 没有 DTD ,因此也就没有严格模式与混杂模式的区别,HTML5 有相对宽松的语法,实现时,已经尽可能大的实现了向后兼容。 ( HTML5 没有严格和混杂之分)

意义:严格模式与混杂模式存在的意义与其来源密切相关,如果说只存在严格模式,那么许多旧网站必然受到影响,如果只存在混杂模式,那么会回到当时浏览器大战时的混乱,每个浏览器都有自己的解析模式。

三、严格模式与混杂模式的语句解析不同点有哪些?

1)盒模型的高宽包含内边距padding和边框border

 

    在W3C标准中,如果设置一个元素的宽度和高度,指的是元素内容的宽度和高度,而在IE5.5及以下的浏览器及其他版本的Quirks模式下,IE的宽度和高度还包含了padding和border。

2)可以设置行内元素的高宽

    在Standards模式下,给span等行内元素设置wdith和height都不会生效,而在quirks模式下,则会生效。

3)可设置百分比的高度

    在standards模式下,一个元素的高度是由其包含的内容来决定的,如果父元素没有设置高度,子元素设置一个百分比的高度是无效的。

4)用margin:0 auto设置水平居中在IE下会失效

    使用margin:0 auto在standards模式下可以使元素水平居中,但在quirks模式下却会失效,quirk模式下的解决办法,用text-align属性:

   body{text-align:center};#content{text-align:left}

5)quirk模式下设置图片的padding会失效

6)quirk模式下Table中的字体属性不能继承上层的设置

7)quirk模式下white-space:pre会失效


补充内容:

一、常用的具体声明:

1、HTML5(一种):<!DOCTYPE html>

2、HTML 4.01(三种):严格模式包含所有 HTML 元素和属性,但不包括展示性的和弃用的元素(比如 font),不允许框架集(Framesets);过渡模式包含所有 HTML 元素和属性,包括展示性的和弃用的元素(比如 font),不允许框架集(Framesets);框架模式等同于过渡模式,但允许框架集内容。 

HTML 4.01 Strict :<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

HTML 4.01 Transitional :<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"  "http://www.w3.org/TR/html4/loose.dtd">

HTML 4.01 Frameset :<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"  "http://www.w3.org/TR/html4/frameset.dtd">

3、XHTML 1.0(四种):前三种模式同上,XHML 必须以格式正确的 XML 来编写标记。 

XHTML 1.0 Strict :<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 

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

XHTML 1.0 Frameset: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"> 

XHTML 1.1 该 DTD 等同于 XHTML 1.0 Strict,但允许添加模型。<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

二、严格模式与混杂模式的来源


当年Netscape4(网景公司早期的浏览器)和IE4(微软公司早期的浏览器)实现CSS机制时,并没有遵循W3C提出的标准。Netscape4 提供了糟糕的支持,而IE4 虽然接近标准,但依旧未能完全正确的支持标准。尽管IE 5 修复了IE4 许多的问题,但是依然延续CSS实现中的其它故障(主要是盒模型问题)。

为了保障自己的网站在各个浏览器上显示正确,网页开发者们不得不依据各个浏览器自身的规范来使用css,因此大部分网站的css实现并不符合W3C规范的标准。

然而随着标准一致性越来越重要,浏览器开发商不得不面临一个艰难的抉择:逐渐遵循W3C的标准是前进的方向。但是改变现有的 css,完全去遵循标准,会使许多旧网站或多或少受到破坏,如果浏览器突然以正确的方式解析现存的css,陈旧的网站的显示必然会受到影响。所以,所有的浏览器都需要提供两种模式:混杂模式服务于旧式规则,而严格模式服务于标准规则。

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值