浏览器呈现模式

现代浏览器包括不同的呈现模式,目的是既支持遵循标准的网页,也支持为老式浏览器而设计的网页。其中, Standards (标准)模式(也就是严格呈现模式)用于呈现遵循最新标准的网页,而 Quirks (包容)模式(也就是松散呈现模式或者兼容模式)用于呈现为传统浏览器而设计的网页。另外,注意Mozilla/Netscape 6新增了一种 Almost Standards (近似标准)模式,用于支持为标准的某个老版本而设计的网页。

什么是 doctype切换? 
      放在网页顶部的doctype声明是让浏览器进入正确呈现模式的关键。浏览器自动切换到恰当的呈现模式,以便正确显示由doctype声明所指定的文档种类。

理论上,这应该是一个非常直观的切换。假如doctype指出当前网页是一个遵循标准(也就是HTML 4+或XHTML 1+)的文档,浏览器就会切换到Standards模式。假如没有指定doctype,或者指定HTML 3.2以及更老的版本,浏览器就切换到Quirks模式。这样一来,浏览器既能正确显示遵循标准的文档,又不至于完全舍弃老式的、与标准不符的网页。

doctype切换的问题 
      但是,doctype切换是一个不完善的方案。即使你在Web文档中使用了一个doctype声明,浏览器也可能不会采取你希望的呈现模式来显示网页。原因是多方面的,包括形式错误的doctype,以及不同<?xml version="1.0" encoding="UTF-8"?>) 开头,其中包括XHTML网页。然而,IE,Opera和旧版Safari都希望文档的第一行是doctype声明。所以,如果在它之前还有其他任何东西(包括XML prolog),就无法识别doctype。因此,XML prolog的存在会使IE,Opera和Safari进入Quirks模式。XML prolog并非必需的,所以你可在XHTML网页中安全地省略它。注意:一定要在http-equiv meta标记中包括一个charset属性,以弥补XML prolog中缺失的encoding属性。

丢失的URL或者相对URL: 
     在完整的doctype声明中,要包括相应的文档类型定义(DTD)文件的URL。如果URL丢失,或者指定的是一个相对路径(而不是完全限定的Internet地址),大多数浏览器都会进入Quirks模式,不管doctype声明规定的是什么模式。

形式错误的doctype : 
      浏览器对doctype声明的形式和格式非常敏感,如果不能识别一个形式错误的doctype,就会强制进入Quirks模式(正是因为这个原因,所以我们建议将一个已知正确的doctype拷贝和粘贴到文档中,而不是亲自输入它)。之所以出现形式错误的doctype,一个常见的原因是在doctype的第一部分与URL之间缺少一个空格。将一个分两行的doctype折叠成单独一行,常常会丢失那个空格。

过渡期的 doctype : 
      浏览器处理过渡期的doctype时,最容易出现不一致的问题。IE和Opera使用Standards模式;Netscape 6和旧版本的Safari使用Quirks模式;Netscape 7、Mozilla 1和新版本的Safari使用Netscape的Almost Standards模式,它是Standards模式的一个具有更好容错性的版本。 
未知的 doctype : 
      浏览器在处理不能识别的doctype时,也存在不一致的现象。IE和Opera会进入Standards模式;换言之,它假定不能识别的doctype是尚未在浏览器中集成的一个新标准。Netscape 6则相反,会在遇到不能识别的doctype时切换到Quirks模式。 
      doctype切换也许是让浏览器进入正确呈现模式并正确显示网页的一种有效手段,前提是你注意到了各种浏览器的不一致,并能积极主动地避免各种问题。

二、使用正确的doctype声明

我们平时在做页面的时候可能会忽视这一点(包括鄙人,通常都是懒于不写而使用浏览器默认),随着目前网页编码规范化热潮的到来,大家都有必要了解一下这个细节,会有用处的。俗话说没有规矩不成方圆呢。

虽然大多数Web文档的顶部都有doctype声明,但很多人都没有注意它。它是在你新建一个文档时,由Web创作软件草率处理的众多细节之一。虽然doctype被许多人忽视,但在遵循标准的任何Web文档中,它都是一项必需的元素。doctype会影响代码验证,并决定了浏览器最终如何显示你的Web文档。

doctype的作用

doctype声明指出阅读程序应该用什么规则集来解释文档中的标记。在Web文档的情况下,“阅读程序”通常是浏览器或者校验器这样的一个程序,“规则”则是W3C所发布的一个文档类型定义(DTD)中包含的规则。

每个DTD都包括一系列标记、attributes和properties,它们用于标记Web文档的内容;此外还包括一些规则,它们规定了哪些标记能出现在其他哪些标记中。每个Web建议标准(比如HTML 4 Frameset和XHTML 1.0 Transitional)都有自己的DTD。假如文档中的标记不遵循doctype声明所指定的DTD,这个文档除了不能通过代码校验之外,还有可能无法在浏览器中正确显示。对于标记不一致的问题,浏览器相较于校验器来说更宽容。但是,不正确的doctype声明经常导致网页不正确显示,或者导致它们根本不能显示。

选择正确的doctype

为了获得正确的doctype声明,关键就是让DTD与文档所遵循的标准对应。例如,假定文档遵循的是XHTML 1.0 Strict标准,文档的doctype声明就应该引用相应的DTD。另一方面,如果doctype声明指定的是XHTML DTD,但文档包含的是旧式风格的HTML标记,就是不恰当的;类似地,如果doctype声明指定的是HTML DTD,但文档包含的是XHTML 1.0 Strict标记,同样是不恰当的。

有的时候,也可以根本不使用一个doctype声明。如果没有指定有效的doctype声明,大多数浏览器都会使用一个内建的默认DTD。在这种情况下,浏览器会用内建的DTD来试着显示你所指定的标记。对于一些临时性的、匆忙拼凑的文档(这种文档有许多),你确实可以考虑省略doctype声明,并接受浏览器的默认显示。

完全可以从头编写一个doctype声明,并让它指向自己选择的一个DTD。然而,由于大多数Web文档都需要遵循由W3C发布的某个国际公认的Web标准,所以那些文档通常都要包含以下标准doctype声明之一:

HTML 2:<!DOCTYPE html PUBLIC "-//IETF//DTD HTML 2.0//EN">

HTML 3.2:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">

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">

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:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

XHTML 1.1 plus MathML plus SVG:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 plus MathML 2.0 plus SVG 1.1//EN" "http://www.w3.org/2002/04/xhtml-math-svg/xhtml-math-svg.dtd">

除了上面列出的doctype声明,具有特殊要求的一些文档还使用了其他几种声明。

doctype声明通常是文档的第一行,要在<html>标记以及其他文档内容之前。注意,在XHTML文档中,doctype的前面偶尔会出现一条XML处理指令(也称为XML prolog):<?xml version="1.0" encoding="utf-8"?>

为了确保网页正确显示和顺利通过验证,使用正确的doctype是关键。与内容相反的、不正确的或者形式错误的doctype是大量问题的罪魁祸首。

用DW设计网页时,新建一个文件,看代码最前面总要出现一个下面的东东,
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">这个是DW自动在网页文件页增加了DTD信息,可以删。 删除后,浏览器会使用的默认DTD。
三、选择什么样的DOCTYPE

开始制作符合标准的站点,第一件事情就是声明符合自己需要的DOCTYPE。

查看本页原代码,可以看到第一行就是: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

打开一些符合标准的站点,例如著名web设计软件开发商 Macromedia ,设计大师 Zeldman 的个人网站,会发现同样的代码。而另一些符合标准的站点(例如 k10k.net )的代码则如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">br>。完整代码如下:

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

我们选择什么样的DOCTYPE 
      理想情况当然是严格的DTD,但对于我们大多数刚接触web标准的设计师来说,过渡的DTD(XHTML 1.0 Transitional)是目前理想选择(包括本站,使用的也是过渡型DTD)。因为这种DTD还允许我们使用表现层的标识、元素和属性,也比较容易通过W3C的代码校验。 注:上面说的"表现层的标识、属性"是指那些纯粹用来控制表现的tag,例如用于排版的表格、背景颜色标识等。在XHTML中标识是用来表示结构的,而不是用来实现表现形式,我们过渡的目的是最终实现数据和表现相分离。

打个比方:人体模特换衣服。模特就好比数据,衣服则是表现形式,模特和衣服是分离的,这样你就可以随意换衣服。而原来HTML4中,数据和表现是混杂在一起的,要一次性换个表现形式非常困难。呵呵,有点抽象了,这个概念需要我们在应用过程中逐步领会。

补充 
     DOCTYPE声明必须放在每一个XHTML文档最顶部,在所有代码和标识之上。

四、官方是这样定义 DOCTYPE HTML PUBLIC 的

!DOCTYPE

--------------------------------------------------------------------------------

指定了 HTML 文档遵循的文档类型定义(DTD)。

Microsoft? Internet Explorer 6 的新增内容。你可使用此声明将 Internet Explorer 6 及以后版本切换到标准兼容模式下。

语法

HTML 顶级元素 可用性 "注册//组织//类型 标签//定义 语言""URL"

可能值

顶级元素:指定 DTD 中声明的顶级元素类型。这与声明的 SGML 文档类型相对应。 HTML 默认。HTML。

可用性:指定正式公开标识符(FPI)是可公开访问的对象还是系统资源。 PUBLIC 默认。可公开访问的对象。  SYSTEM 系统资源,如本地文件或 URL。

注册:指定组织是否由国际标准化组织(ISO)注册。 + 默认。组织名称已注册。 - 组织名称未注册。Internet 工程任务组(IETF)和万维网协会(W3C)并非注册的 ISO 组织。

组织:指定表明负责由 !DOCTYPE 声明引用的 DTD 的创建和维护的团体或组织的名称,即 OwnderID。 IETF IETF。 W3C W3C。

类型:指定公开文本类,即所引用的对象类型。 DTD 默认。DTD。

标签:指定公开文本描述,即对所引用的公开文本的唯一描述性名称。后面可附带版本号。 HTML 默认。HTML。

定义:指定文档类型定义。 Frameset 框架集文档。 Strict 排除所有 W3C 专家希望逐步淘汰的代表性属性和元素,因为样式表已经很完善了。Transitional 包含除 frameSet 元素的全部内容。

语言:指定公开文本语言,即用于创建所引用对象的自然语言编码系统。该语言定义已编写为 ISO 639 语言代码(大写两个字母)。 EN 默认。英语。

URL:指定所引用对象的位置。

注释

此声明必须出现在文档的起始处,出现在 html 标签之前。

!DOCTYPE 元素不需要关闭标签。

此元素在 Microsoft? Internet Explorer 3.0 的 HTML 中可用。

你可使用此声明在 Internet Explorer 6 及以后版本中切换为严格的标准兼容模式。若想打开此开关,请在你的文档顶部包含 !DOCTYPE 声明,在声明中指定合法的标签,在某些情况下,还需要指定定义和/或 URL。

注意 在标准兼容模式下,不能保证与其它版本的 Internet Explorer 保持兼容。当打开标准兼容模式时,文档的渲染行为也许与将来版本的 Internet Explorer 不同。若内容本来就是固定的(如刻录在 CD 上),则不应该使用此模式。

示例

下面的例子演示了如何使用 !DOCTYPE 声明指定文档遵从的 DTD,并将 Internet Explorer 6 及更高版本切换到标准兼容模式。 下面例子中的声明都指定了遵从 HTML 4.0 DTD。第二种声明指定了“Strict”。第一种声明没有指定。这两种声明都将会把 Internet Explorer 6 及以后版本切换到标准兼容模式。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"> 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Strict//EN">

下面例子中的声明都指定了遵从“Transitional”HTML 4.0 DTD。第二种声明指定了 DTD 的 URL。第一种声明没有指定。第二种声明将会把 Internet Explorer 6 及以后版本切换到标准兼容模式。第一种声明不会。

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

下面的表格列出了所有的 HTML/XHTML 元素,并定义了每个元素可以出现在哪种文档类型声明 (DTD) 中 。

标签 HTML 4.01 / XHTML 1.0 XHTML 1.1 Transitional Strict Frameset

<a> Yes Yes Yes Yes
<abbr> Yes Yes Yes Yes
<acronym> Yes Yes Yes Yes
<address> Yes Yes Yes Yes
<applet> Yes No Yes No
<area /> Yes Yes Yes No
<b> Yes Yes Yes Yes
<base /> Yes Yes Yes Yes
<basefont /> Yes No Yes No
<bdo> Yes Yes Yes No
<big> Yes Yes Yes Yes
<blockquote> Yes Yes Yes Yes
<body> Yes Yes Yes Yes
<br /> Yes Yes Yes Yes
<button> Yes Yes Yes Yes
<caption> Yes Yes Yes Yes
<center> Yes No Yes No
<cite> Yes Yes Yes Yes
<code> Yes Yes Yes Yes
<col /> Yes Yes Yes No
<colgroup> Yes Yes Yes No
<dd> Yes Yes Yes Yes
<del> Yes Yes Yes No
<dfn> Yes Yes Yes Yes
<dir> Yes No Yes No
<div> Yes Yes Yes Yes
<dl> Yes Yes Yes Yes
<dt> Yes Yes Yes Yes
<em> Yes Yes Yes Yes
<fieldset> Yes Yes Yes Yes
<font> Yes No Yes No
<form> Yes Yes Yes Yes
<frame /> No No Yes No
<frameset> No No Yes No
<h1> to <h6> Yes Yes Yes Yes
<head> Yes Yes Yes Yes
<hr /> Yes Yes Yes Yes
<html> Yes Yes Yes Yes
<i> Yes Yes Yes Yes
<iframe> Yes No Yes No
<img /> Yes Yes Yes Yes
<input /> Yes Yes Yes Yes
<ins> Yes Yes Yes No
<isindex> Yes No Yes No
<kbd> Yes Yes Yes Yes
<label> Yes Yes Yes Yes
<legend> Yes Yes Yes Yes
<li> Yes Yes Yes Yes
<link /> Yes Yes Yes Yes
<map> Yes Yes Yes No
<menu> Yes No Yes No
<meta /> Yes Yes Yes Yes
<noframes> Yes No Yes No
<noscript> Yes Yes Yes Yes
<object> Yes Yes Yes Yes
<ol> Yes Yes Yes Yes
<optgroup> Yes Yes Yes Yes
<option> Yes Yes Yes Yes
<p> Yes Yes Yes Yes
<param /> Yes Yes Yes Yes
<pre> Yes Yes Yes Yes
<q> Yes Yes Yes Yes
<s> Yes No Yes No
<samp> Yes Yes Yes Yes
<script> Yes Yes Yes Yes
<select> Yes Yes Yes Yes
<small> Yes Yes Yes Yes
<span> Yes Yes Yes Yes
<strike> Yes No Yes No
<strong> Yes Yes Yes Yes
<style> Yes Yes Yes Yes
<sub> Yes Yes Yes Yes
<sup> Yes Yes Yes Yes
<table> Yes Yes Yes Yes
<tbody> Yes Yes Yes No
<td> Yes Yes Yes Yes
<textarea> Yes Yes Yes Yes
<tfoot> Yes Yes Yes No
<th> Yes Yes Yes Yes
<thead> Yes Yes Yes No
<title> Yes Yes Yes Yes
<tr> Yes Yes Yes Yes
<tt> Yes Yes Yes Yes
<u> Yes No Yes No
<ul> Yes Yes Yes Yes
<var> Yes Yes Yes Yes

注释:“文档类型声明”的英文译文是 doctype declaration。

有关doctype!!!的更多相关文章

  1. HTML的doctype和编码

    DOCTYPE Doctype是为了告诉浏览器用哪种版本的html去解析指令,必须位于第一行,在某些版本中需要引入DTD,html5无需引入DTD 中文乱码 原因 浏览器解析代码的编码格式与源代码编码 ...

  2. HTML之DocType的几种类型 -转载

    HTML之DocType的几种类型转载 doctype类型详细doctype的几种类型html之doctype 分类: 前端文摘  在默认情况下,FF和IE的解释标准是不一样的,也就是说,如果一个网页 ...

  3. Doctype作用?严格模式与混杂模式如何区分?它们有何意义?

    怪异模式和严格模式(译注:一般称为标准模式:Standards Mode,下文中的严格模式都可以理解为标准模式)是浏览器解析CSS时的两种‘模式’.这篇文章将简单阐述这两种模式之间的差异. 译注:一个 ...

  4. 前端面霸系列(1):doctype 、Quirks Mode & Standards Mode 、document.compatMode

    近几日,气压猛降,雾霾铺天盖地,眼看一场腥风血雨就要在前端江湖爆发,这场战争不仅是百度.腾讯.阿狸.搜狐网易新浪等江湖豪门抢夺人才的大战,也是诸位江湖人士重新洗牌的好时机.每年10月,江湖的波动胜过华 ...

  5. Doctype的作用

    <!DOCTYPE> 声明不是 HTML 标签:它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令,也就是定义文档类型. 所有的浏览器都需要两种模式:怪异模式和严格模式 ...

  6. <!DOCTYPE html>很重要

    噩梦开始的源头:之前写html或者jsp页面,从来不注意doctype的声明,也不太明白doctype的作用.直到最近碰到了一个非常奇葩的 bug:某一个页面在IE7和8,Chrome,ff等下正常, ...

  7. <!DOCTYPE html>作用

    1.定义: DOCTYPE标签是一种标准通用标记语言的文档类型声明,它的目的是要告诉标准通用标记语言解析器,它应该使用什么样的文档类型定义(DTD)来解析文档. <!DOCTYPE> 声明 ...

  8. <!DOCTYPE>标签的定义与用法

    <!DOCTYPE> 声明不是 HTML 标签:它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令. 在 HTML 4.01 中,<!DOCTYPE> 声明 ...

  9. <!DOCTYPE html PUBLIC 导致js代码不可用

    在有了这个 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w ...

  10. DOCTYPE声明作用及用法详解

    一.浏览器呈现模式和doctype 有的网页是遵循标准而创作的,但也有很多不是.即使你不能创建遵循标准的网页,也希望浏览器根据标准来正确显示那些页.目前,大量网页充斥着大量非标准代码,它们仍能正常地工 ...

随机推荐

  1. .net与Java的WebService互调

    本文记录一下.net与Java是如何进行Web Service的互相调用的. 1.准备工作 MyEclipse 10 JDK 1.6.0_13 Visual Studio 2012 .net fram ...

  2. java得到clientIP地址和MAC住址

    最近的项目应该得到client的mac住址. 服务器移植centos制,arm建筑箱.client手机和移动设备.(其他方案也应该是一流的似的) 首先,要获得ip住址: 依据client的http请求 ...

  3. 关于查看文件size

    public static long getTotalSize(String device) { StatFs sf = new StatFs (device); //long totalblocks ...

  4. MEF初体验之十一:查询组合容器

    查询组合容器 组合容器暴露了几个get exports的重载方法和导出对象和对象集合.你需要注意下面的行为: 当请求单个对象实例时,如果未发现导出,一个异常将被抛出 当请求单个对象实例时,如果发现超过 ...

  5. MySQL之终端(Terminal)管理MySQL

    原文:MySQL之终端(Terminal)管理MySQL 前言:MySQL有很多的可视化管理工具,比如“mysql-workbench”和“sequel-pro-”. 现在我写MySQL的终端命令操作 ...

  6. github中origin和upstream的区别(转)

    Fork,本身并不是git工具中的一个命令,也不是对git的扩展,它是在GitHub上的概念,是另一种clone方式——在服务器端的clone.而我们通常意义上的clone,是将远程repo 复制一份 ...

  7. ThreadLocal是否会引发内存泄露的分析(转)

    这篇文章,主要解决一下疑惑: 1. ThreadLocal.ThreadLocalMap中提到的弱引用,弱引用究竟会不会被回收? 2. 弱引用什么情况下回收? 3. JAVA的ThreadLocal和 ...

  8. 在 Windows Server 2008 R2 上安装 IIS 7.5

    原文 在 Windows Server 2008 R2 上安装 IIS 7.5 默认情况下,Windows Server(R) 2008 R2 上不安装 IIS 7.5.可以使用服务器管理器中的“添加 ...

  9. JSP/Servlet线程安全

    携带servlet开发时间.线程安全是非常重要的.否则会导致一些意想不到的结果. Servlet的生命周期是由Web负责集装箱,什么时候client第一个请求Servlet时间,容器负责初始化Serv ...

  10. Android fragment onActivityResult 不起作用

    fragment 跳转至Acivity后,fragment里面的onActivityResult 被被调用 试过非常多办法,最后getactivity().startactivityforresult ...