DOCTYPE作用及用法详解

peng_joy

浏览: 108367 次
性别:
来自: 济南

最近访客更多访客>>

yangfuqian

wq611403

mq261207483

oyzcha

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

html

一、浏览器呈现模式和doctype

有的网页是遵循标准而创作的，但也有很多不是。即使你不能创建遵循标准的网页，也希望浏览器根据标准来正确显示那些页。目前，大量网页充斥着大量非标准代码，它们仍能正常地工作。事实上，为旧版浏览器设计的大多数代码都能在新版浏览器中正确显示（虽然呈现方式可能有所区别）。这是什么原因呢？事实上，假如严格遵循最新标准，会完全破坏那些页的生存基础。对于任何希望有所作为的浏览器来说，这当然是令人无法接受的。

浏览器呈现模式

现代浏览器包括不同的呈现模式，目的是既支持遵循标准的网页，也支持为老式浏览器而设计的网页。其中， 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。

组织：指定表明负责由 !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