本文系统的讲解DOCTYPE元素.同时查证了很多的资料.因为互联网上面的资料比较杂乱,所以经过收集整理我进行了重新定义.
一.概述
本文系统的讲解DOCTYPE元素.同时查证了很多的资料.因为互联网上面的资料比较杂乱,所以经过收集整理我进行了重新定义.比如对于DOCTYPE元素的定义.主要分为基础知识和高级知识.基础知识讲解基本的DOCTYPE知识. 高级知识很多来自网络收集, 主要是实际应用的一些技巧.
二.定义
DOCTYPE是文档类型(Document Type)的缩写, <!DOCTYPE> 元素用于声明一个页面的文档类型定义(Document Type Declaration, 即DTD).此元素声明位于文档中的最前面的位置，处于 <html> 标签之前。通过确认页面的DTD,可以同时确定页面使用哪种W3C规范(比如 HTML 或 XHTML 规范)。
三.W3C规范
W3C规范的正确翻译应该为W3C推荐(W3C Recommendations).很多设计师的眼里W3C就是标准.但是许多人都是一知半解.下面列于了目前W3C规范中的HTML规范和XHTML规范,稍后会讲解HTML和XHTML的关系:
W3C HTML 规范和时间线
| 规范 | 推荐 |
| HTML 3.2 | 1997年1月14日 |
| HTML 4.0 | 1998年5月24日 |
| HTML 4.01 | 1999年12月24日 |
W3C XHTML 规范 和 时间线
| 规范 | 草案/提议 | 推荐 |
| XHTML 1.0 | 2000 年 1 月 26 日 | |
| XHTML 1.0 修订版 | 2002 年 8 月 1 日 | |
| XHTML 1.1 | 2001 年 5 月 31 日 | |
| XHTML Modules | 2001 年 4 月 10 日 | |
| XHTML Modules 1.1 | 2006 年 7 月 5 日 | |
| XHTML Basic | 2000 年 12 月 19 日 | |
| XHTML Basic 1.1 | 2006 年 7 月 5 日 | |
| XHTML Events | 2003 年 10 月 14 日 | |
| XHTML Events 2 | 2007 年 2 月 16 日 | |
| XHTML Print | 2006 年 9 月 20 日 | |
| XHTML Media Types | 2002 年 8 月 1 日 | |
| XForms 1.0 | 2003 年 10 月 14 日 | |
| XForms 1.0 (SE) | 2006 年 3 月 14 日 | |
| XForms 1.1 | 2007 年 2 月 22 日 | |
| XHTML 2.0 | 2006 年 7 月 26 日 | |
| XLink | 2001 年 6 月 27 日 | |
| HLink | 2002 年 9 月 13 日 |
XHTML可以看成是最新的HTML规范, 是一项可从 HTML 4.01 平稳迁移的 XML 应用。W3C 把 HTML 4.01 重构为 XML 的第一个步骤，导致了 XHTML 1.0 的诞生。XHTML 1.0 依赖于 HTML 4.01 标签所提供的语义。
四.规范与DTD
页面文件通过<DOCTYPE>元素声明不同的DTD, 来告知浏览器当前页面符合哪种HTML或者XHTML规范.下面只列举HTML4.01和XHTML1.0两种规范相关的DTD:
HTML
HTML 4.01 规定了三种文档类型：Strict、Transitional 以及 Frameset。
HTML Strict DTD
如果您需要干净的标记，免于表现层的混乱，请使用此类型。请与层叠样式表（CSS）配合使用：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "
http://www.w3.org/TR/html4/strict.dtd">
HTML Transitional DTD
Transitional DTD 可包含 W3C 所期望移入样式表的呈现属性和元素。如果您的读者使用了不支持层叠样式表（CSS）的浏览器以至于您不得不使用 HTML 的呈现特性时，请使用此类型：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "
http://www.w3.org/TR/html4/loose.dtd">
Frameset DTD
Frameset DTD 应当被用于带有框架的文档。除 frameset 元素取代了 body 元素之外，Frameset DTD 等同于 Transitional DTD：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "
http://www.w3.org/TR/html4/frameset.dtd">
XHTML
XHTML 1.0 规定了三种 XML 文档类型：Strict、Transitional 以及 Frameset。
XHTML Strict DTD
如果您需要干净的标记，免于表现层的混乱，请使用此类型。请与层叠样式表（CSS）配合使用：
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
XHTML Transitional DTD
Transitional DTD 可包含 W3C 所期望移入样式表的呈现属性和元素。如果您的读者使用了不支持层叠样式表（CSS）的浏览器以至于您不得不使用 XHTML 的呈现特性时，请使用此类型：
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
XHTML Frameset DTD
当您希望使用框架时，请使用此 DTD！
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
五.DOCTYPE 元素语法
语法
HTML 顶级元素 可用性 "注册//组织//类型 标签//定义 语言""URL"
语法元素说明
顶级元素：指定 DTD 中声明的顶级元素类型。这与声明的 SGML 文档类型相对应。 默认为HTML。
可用性：指定正式公开标识符(FPI)是可公开访问的对象还是系统资源。取值可以为PUBLIC或者SYSTEM.PUBLIC 默认。表示可公开访问的对象。SYSTEM表示系统资源，如本地文件或 URL。
注册：指定组织是否由国际标准化组织(ISO)注册。
+为默认,表示组织名称已注册。
-表示组织名称未注册。Internet 工程任务组(IETF)和万维网协会(W3C)并非注册的 ISO 组织。
组织：指定表明负责由 !DOCTYPE 声明引用的 DTD 的创建和维护的团体或组织的名称，即 OwnderID。 IETF为IETF。W3C为W3C。
类型：指定公开文本类，即所引用的对象类型。 默认为DTD。
标签：指定公开文本描述，即对所引用的公开文本的唯一描述性名称。后面可附带版本号。默认为HTML。
定义：指定文档类型定义。
Frameset 框架集文档。
Strict 排除所有 W3C 专家希望逐步淘汰的代表性属性和元素，因为样式表已经很完善了。
Transitional 包含除 frameSet 元素的全部内容。
语言：指定公开文本语言，即用于创建所引用对象的自然语言编码系统。该语言定义已编写为 ISO 639 语言代码(大写两个字母)。 EN 默认。英语。
URL：指定所引用对象的位置。
六.检查工具
如果要检查你的页面内容是否符合在DOCTYPE中声明的标准,可以使用W3C提供的验证工具:
http://validator.w3.org/
七.DOCTYPE切换
现代浏览器包括不同的呈现模式，目的是既支持遵循W3C标准的网页，也支持为老式浏览器而设计的网页。其中， Standards （标准）模式（也就是严格呈现模式）用于呈现遵循最新标准的网页，而 Quirks （包容）模式（也就是松散呈现模式或者兼容模式）用于呈现为传统浏览器而设计的网页。另外，注意Mozilla/Netscape 6新增了一种 Almost Standards （近似标准）模式，用于支持为标准的某个老版本而设计的网页。
理论上，这应该是一个非常直观的切换。假如页面的<!DOCTYPE>元素指出了页面的遵循标准(比如XHTML1.0), 浏览器就会切换到Standards模式。假如没有指定doctype，或者指定HTML 3.2以及更老的版本，浏览器就切换到Quirks模式。这样一来，浏览器既能正确显示遵循标准的文档，又不至于完全舍弃老式的、与标准不符的网页。 但是会有下面几种情况:
1.丢失的URL或者相对URL
在完整的doctype声明中，要包括相应的文档类型定义（DTD）文件的URL。如果URL丢失，或者指定的是一个相对路径（而不是完全限定的Internet地址），大多数浏览器都会进入Quirks模式，不管doctype声明规定的是什么模式。
2.形式错误的doctype
浏览器对doctype声明的形式和格式非常敏感，如果不能识别一个形式错误的doctype，就会强制进入Quirks模式（建议将一个已知正确的doctype拷贝和粘贴到文档中，而不是亲自输入它）。之所以出现形式错误的doctype，一个常见的原因是在 doctype 的第一部分与URL之间缺少一个空格。将一个分两行的doctype折叠成单独一行，常常会丢失那个空格。
3.过渡期的 doctype
浏览器处理过渡期的doctype时，最容易出现不一致的问题。IE和Opera使用Standards模式；Netscape 6和旧版本的Safari使用Quirks模式；Netscape 7、Mozilla 1和新版本的Safari使用Netscape的Almost Standards模式，它是Standards模式的一个具有更好容错性的版本。
4.未知的 doctype
浏览器在处理不能识别的doctype时，也存在不一致的现象。IE和Opera会进入Standards模式；换言之，它假定不能识别的 doctype 是尚未在浏览器中集成的一个新标准。Netscape 6则相反，会在遇到不能识别的doctype时切换到Quirks模式。
doctype切换也许是让浏览器进入正确呈现模式并正确显示网页的一种有效手段，前提是你注意到了各种浏览器的不一致，并能积极主动地避免各种问题。
八.XHTML使用技巧
1.紧跟在上面 DOCTYPE 声明之后的是一个 XHTML 名字空间（namespace）声明，放在增强的 <html> 元素中，写法为：
<html xmlns="http://www.w3.org/1999/xhtml">
2.由于 XHTML 1.0 页面就是合法的 XML 文档，而 XML 对于标签和属性都是区分大小写的，为了简单起见，XHTML 1.0 页面中所有的标签和属性都必须使用小写。
一些免费的工具，例如 HTML Tidy（http://tidy.sourceforge.net/），可以帮助你把标签和属性自动转换为小写。
3. 通过在 <head> 元素中添加一个 <meta> 元素来声明页面中使用的语言。
<meta http-equiv="Content-Type" content="text/html; charset=gbk" />
4.在 XHTML 中，所有的属性都必须要加上引号。
一些免费的工具，例如 HTML Tidy（http://tidy.sourceforge.net/），可以帮助你自动为所有的属性加上引号。
5. 在 XHTML 中，所有的属性都必须有值。
不能像在 HTML 4.0 中那样写：
<input type="checkbox" name="shirt" value="medium" checked>
而要写成：
<input type="checkbox" name="shirt" value="medium" checked="checked" />
6. 在 XHTML 中，所有的标签都必须关闭。
关闭标签有两种方式，包含内容的标签使用结束标签关闭，空标签在后面加上空格和"//www.submisscin.com/wap/"。例如：
<p>This is acceptable HTML and it is also valid XHTML.</p>
<img src="//www.submisscin.com/wap/logo.gif" />
7. 不要在注释内容中使用"--" 。
"--" 只能使用在 XHTML 注释的开头和结束，不能出现在注释的内容中。下面的写法都是不允许的：
<!--Invalid -- and so is the classic "separator" below. -->
<!------------------------------------>
8. 把所有的特殊符号进行HTML编码。
W3C 的 XHTML/CSS/DOM 这 3 个规范构成了一个完整而严密的体系，我称这 3 个规范为 Web 世界中"三位一体神的化身"。这 3 个规范分别代表了 Web 页面的 structure（结构）、presentation（表现）和 behaviour（行为） 3 部分。将 Web 页面严格分为这 3 层，并且尽量使每一层的内容相互独立，有助于提高页面的可重用性和模块化程度，大幅降低页面制作、维护和修改的成本。为了达到上述分层的目标，编写的 XHTML 中应该只包含与 structure 相关的标记（元素和属性）。因此应该习惯于使用 Strict 类型的 DTD，尽快摒弃那些带有表现含意的标记（这些标记在 HTML 4.0 规范中被标识为 Deprecated 即"不提倡"，并且会在 XHTML 以后的版本中被完全舍弃）；尽快摒弃基于 table 做布局的老方法，采用完全的 CSS 布局。