`
yanyanquan
  • 浏览: 451124 次
  • 性别: Icon_minigender_1
  • 来自: 江门
社区版块
存档分类
最新评论

DOCTYPE元素详解

    博客分类:
  • W3C
 
阅读更多

一.概述

本文系统的讲解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 中,所有的标签都必须关闭。

关闭标签有两种方式,包含内容的标签使用结束标签关闭,空标签在后面加上空格和"/"。例如:

<p>This is acceptable HTML and it is also valid XHTML.</p>

<img src="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 布局。  

 

九.推荐的 XHTML 相关书籍

《HTML 与 XHTML 权威指南》,Chuck Musciano & Bill Kennedy 著。

《XHTML教程》,Chelsea Valentine & Chris Minnick 著。

《网站重构》,Jeffrey Zeldman 著。

 

转载:http://www.cnblogs.com/zhangziqiu/

分享到:
评论

相关推荐

    DOCTYPE元素详解 完整版

    DOCTYPE&gt;元素是HTML文档中非常重要的一个指令,它位于文档的最前面位置,必须在标签之前。&lt;!DOCTYPE&gt;声明的目的是告诉浏览器这个页面所使用的文档类型定义,以及该页面遵循的W3C规范。在HTML中,主要有三种文档类型...

    Hibernate配置文件中映射元素详解

    【Hibernate配置文件中映射元素详解】 在对象关系映射(ORM)框架Hibernate中,对象与数据库表之间的关联是通过一个XML配置文件来定义的。这个XML文件包含了映射元素,用于描述Java类如何转化为数据库中的表。映射...

    web.xml配置详解

    DOCTYPE 声明中包含了几个特性,告诉我们关于 DTD 的信息,如 web-app 定义该文档的根元素、PUBLIC 意味着 DTD 文件可以被公开使用、DTD 由 Sun Microsystems, Inc. 维护等。 web.xml 文件的根元素是 web-app,DTD...

    JS获取元素多层嵌套思路详解

    如果一段html嵌套过多,在js中获取还是比较麻烦的,我写了几套方案,大家可以参考参考,如果你有...元素多层嵌套,JS获取问题&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;span&gt;span &lt;span&gt;span &lt;span&gt;1 &lt;spa

    XML结构参数详解

    DOCTYPE 相册 [ &lt;!ELEMENT 相册 (图片*,描述?)&gt; &lt;!ELEMENT 图片 EMPTY&gt; &lt;!ATTLIST 图片 id ID #REQUIRED src CDATA #IMPLIED&gt; &lt;!ELEMENT 描述 (#PCDATA)&gt; ]&gt; &lt;相册&gt; &lt;图片 id="001" src="image1.jpg"/&gt; ...

    web.xml配置详解, web.xml web.xml 配置实例

    XML 头必须是文件中的第一项,DOCTYPE 声明必须是第二项,而 web-app 元素必须是第三项。在 web-app 元素内,元素的次序也很重要。服务器不一定强制要求这种次序,但它们允许完全拒绝执行含有次序不正确的元素的 Web...

    Servlet中Web.xml详解

    #### 三、元素详解 下面列出可以直接出现在`&lt;web-app&gt;`元素内的合法元素及其必需的顺序。需要注意的是,这些元素都是可选的,可以省略但不能放置在错误的位置。 - **`&lt;icon&gt;`**:此元素指出了IDE和GUI工具用来表示...

    web.xml 详解

    例如,XML头必须是文件的第一项,`DOCTYPE`声明必须紧随其后,而`&lt;web-app&gt;`元素必须是第三项。在`&lt;web-app&gt;`元素内部,元素的顺序同样重要,虽然服务器可能不强制要求这种顺序,但某些服务器确实这样做了。这意味着...

    部署描述文件web.xml配置详解.doc

    #### 三、`web-app`元素的子元素详解 `web-app`元素包含多个子元素,这些子元素用于描述Web应用的不同方面。根据DTD的规定,这些子元素按特定的顺序排列,并且有的是可选的。 1. **`icon`元素** - 用于指定应用的...

    web配置文件详解

    ### Web配置文件详解 #### 一、概述 部署描述符是一种特定类型的XML文件,主要用于描述一个Servlet或JSP应用程序的各个方面。它包含了多种关键性的配置信息,例如servlet的注册与映射、监听器的注册等。对于部署...

    Mybatis Generator最完整配置详解

    DOCTYPE generatorConfiguration PUBLIC "-//mybatis.org//DTD MyBatis Generator Configuration 1.0//EN" "http://mybatis.org/dtd/mybatis-generator-config_1_0.dtd"&gt; ``` - **XML声明**:定义了XML文档的基本...

    DOM4J使用详解

    例如,创建一个新的元素并添加到已有元素下: ```java Element parent = ...; // 获取父元素 Element child = document.createElement("child"); parent.add(child); ``` 3. 删除节点: - 使用`Element`的`...

    HTML语言详解 HTML语言详解HTML语言详解

    ### HTML语言详解 #### 1. HTML的基本概念与定义 HTML(HyperText Markup Language)是一种标准标记语言,用于创建网页并定义网页结构。它通过一系列的标签(Tags)来描述文档的内容及其显示方式,使浏览器能够...

    html完全使用详解

    DOCTYPE html&gt;`开头,声明文档类型为HTML5。接着是`&lt;html&gt;`元素,它包含了整个网页的内容。`&lt;html&gt;`内有两部分关键元素:`&lt;head&gt;`和`&lt;body&gt;`。`&lt;head&gt;`包含元数据,如页面标题`&lt;title&gt;`,而`&lt;body&gt;`则包含用户在...

Global site tag (gtag.js) - Google Analytics