XHTML 是什么?

XHTML 是什么?

  • XHTML 指可扩展超文本标签语言(EXtensible HyperText Markup Language)。
  • XHTML 的目标是取代 HTML。
  • XHTML 与 HTML 4.01 几乎是相同的。
  • XHTML 是更严格更纯净的 HTML 版本。
  • XHTML 是作为一种 XML 应用被重新定义的 HTML。
  • XHTML 是一个 W3C 标准。

XHTML 是一个 W3C 标准

XHTML 于2000年的1月26日成为 W3C 标准。

W3C 将 XHTML 定义为最新的HTML版本。XHTML 将逐渐取代 HTML。

所有新的浏览器都支持 XHTML

XHTML 与 HTML 4.01 兼容。

所有新的浏览器都支持 XHTML。
为什么要使用XHTML?

XHTML 是 HTML 与 XML(扩展标记语言)的结合物。

XHTML 包含了所有与 XML 语法结合的 HTML 4.01 元素。

为什么要使用XHTML?

XML 是一种标记化语言,其中所有的东西都要被正确的标记,以产生形式良好的文档。

XML 用来描述数据,而 HTML 则用来显示数据。

今天的市场中存在着不同的浏览器技术,某些浏览器运行在计算机中,某些浏览器则运行在移动电话和手持设备上。而后者没有能力和手段来解释糟糕的标记语言。

因此,通过把 HTML 和 XML 各自的长处加以结合,我们得到了在现在和未来都能派上用场的标记语言 - XHTML。

XHTML 可以被所有的支持 XML 的设备读取,同时在其余的浏览器升级至支持 XML 之前,XHTML 使我们有能力编写出拥有良好结构的文档,这些文档可以很好地工作于所有的浏览器,并且可以向后兼容。
XHTML 与 HTML 之间的差异

最主要的不同:

  • XHTML 元素必须被正确地嵌套。
  • XHTML 元素必须被关闭。
  • 标签名必须用小写字母。
  • XHTML 文档必须拥有根元素。

元素必须被正确地嵌套

在 HTML 中,某些元素可以像这样彼此不正确地嵌套:

<b><i>This text is bold and italic</b></i>
在 XHTML 中,所有的元素必须像这样彼此正确地嵌套:

<b><i>This text is bold and italic</i></b>

提示:在嵌套列表中一个容易犯的错误,是忘记内部列表必须位于 li 元素中,就像下面这样:

这是错误的:

<ul>
  <li>Coffee</li>
  <li>Tea
    <ul>
      <li>Black tea</li>
      <li>Green tea</li>
    </ul>
  <li>Milk</li>
</ul>

这是正确的:

<ul>
  <li>Coffee</li>
  <li>Tea
    <ul>
      <li>Black tea</li>
      <li>Green tea</li>
    </ul>
  </li>
  <li>Milk</li>
</ul>

注意:在正确代码的例子中,我们在 </ul> 之后插入了一个 </li> 标签。

XHTML 元素必须被关闭

非空标签必须使用结束标签。

这是错误的:

<p>This is a paragraph
<p>This is another paragraph
这是正确的:

<p>This is a paragraph</p><p>This is another paragraph</p>

空标签也必须被关闭

空标签也必须使用结束标签,或者其开始标签必须使用/>结尾。

这是错误的:

A break: <br>
A horizontal rule: <hr>
An image: <img src="happy.gif" alt="Happy face">
这是正确的:

A break: <br />
A horizontal rule: <hr />
An image: <img src="happy.gif" alt="Happy face" />

XHTML 元素必须小写

XHTML 规范定义:标签名和属性对大小写敏感。

这是错误的:

<BODY><P>This is a paragraph</P></BODY>
这是正确的:

<body><p>This is a paragraph</p></body>

XHTML 文档必须拥有一个根元素

所有的 XHTML 元素必须被嵌套于 <html> 根元素中。其余所有的元素均可有子元素。子元素必须是成对的且被嵌套在其父元素之中。基本的文档结构如下:

<html>
<head> ... </head>
<body> ... </body>
</html>



XHTML 语法

更多的 XHTML 语法规则:

  • 属性名称必须小写
  • 属性值必须加引号
  • 属性不能简写
  • 用 Id 属性代替 name 属性
  • XHTML DTD 定义了强制使用的 HTML 元素

属性名称必须小写

这是错误的:
<table WIDTH="100%">
这是正确的:

<table width="100%">

属性值必须加引号

这是错误的:

<table width=100%>
这是正确的:

<table width="100%">

属性不能简写
这是错误的:

<input checked>
<input readonly>
<input disabled>
<option selected>
<frame noresize>
这是正确的:

<input checked="checked" />
<input readonly="readonly" />
<input disabled="disabled" />
<option selected="selected" />
<frame noresize="noresize" />
下面是一个 HTML 的简写属性列表,以及在 XHTML 中的改写:
HTML XHTML
compact compact="compact"
checked checked="checked"
declare declare="declare"
readonly readonly="readonly"
disabled disabled="disabled"
selected selected="selected"
defer defer="defer"
ismap ismap="ismap"
nohref nohref="nohref"
noshade noshade="noshade"
nowrap nowrap="nowrap"
multiple multiple="multiple"
noresize noresize="noresize"

用 id 属性代替 name 属性

HTML 4.01 针对下列元素定义 name 属性:a, applet, frame, iframe, img, 和map。

在 XHTML 中不鼓励使用 name 属性,应该使用 id 取而代之。

这是错误的:

<img src="picture.gif" name="picture1" />
这是正确的:

<img src="picture.gif" id="picture1" />

重要的兼容性提示:

你应该在 "/" 符号前添加一个额外的空格,以使你的 XHTML 与当今的浏览器相兼容。

语言属性(lang)

lang 属性应用于几乎所有的 XHTML 元素。它定义元素内部的内容的所用语言的类型。

如果在某元素中使用 lang 属性,就必须添加额外的 xml:lang,像这样:

<div lang="no" xml:lang="no">Heia Norge!</div>

强制使用的 XHTML 元素

所有 XHTML 文档必须进行文件类型声明(DOCTYPE declaration)。在 XHTML 文档中必须存在html、head、body元素,而 title 元素必须位于在 head 元素中。

下面是一个最小化的 XHTML 文件模板:

<!DOCTYPE Doctype goes here>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Title goes here</title>
</head>

<body>
</body>

</html>

提示:文件类型声明并非 XHTML 文档自身的组成部分。它并不是 XHTML 元素,也没有关闭标签。

提示:在 XHTML 中,<html> 标签内的 xmlns 属性是必需的。然而,即使当 XHTML 文档中没有这个属性时,w3.org 的验证工具也不会提示错误。这是因为,"xmlns=http://www.w3.org/1999/xhtml" 是一个固定的值,即使你没有把它包含在代码中,这个值也会被添加到 <html> 标签中。

你会在下一章学习更多关于 XHTML 文档类型声明的知识。


XHTML DTD

XHTML 定义了三种文件类型声明。

使用最普遍的是 XHTML Transitional。

<!DOCTYPE> 是强制使用的。
一个 XHTML 文档有三个主要的部分:
DOCTYPE
Head
Body
基本的文档结构是这样的:

<!DOCTYPE ...>
<html>
<head>
<title>... </title>
</head>
<body> ... </body>
</html>
在 XHTML 文档中,文档类型声明总是位于首行。

一个 XHTML 的实例

这个一个简单的(最小化的) XHTML 文档:

<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>simple document</title>
</head>
<body>
<p>a simple paragraph</p>
</body>
</html>
文档类型声明定义文档的类型:

<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
文档的其余部分类似 HTML:

<html>
<head>
<title>simple document</title>
</head>
<body>
<p>a simple paragraph</p>
</body>
</html>

3种文档类型声明

  • DTD 规定了使用通用标记语言(SGML)的网页的语法。
  • 诸如 HTML 这样的通用标记语言应该使用 DTD 来规定应用于某种特定文档中的标签的规则,这些规则包括一系列的元素和实体的声明。
  • 在通用标记语言(SGML)的文档类型声明或 DTD 中,XHTML 被详细地进行了描述。
  • XHTML DTD 使用精确的可被计算机读取的语言来描述合法的 XHTML 标记的语法和句法。

存在三种XHTML文档类型:

  • STRICT(严格类型)
  • TRANSITIONAL(过渡类型)
  • FRAMESET(框架类型)

XHTML 1.0 的三种 XML 文档类型

XHTML 1.0 规定了三种 XML 文档类型,以对应上述三种 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">

在此情况下使用:当需要利用 HTML 在表现上的特性时,并且当需要为那些不支持层叠样式表的浏览器编写 XHTML 时。


XHTML 1.0 Frameset

<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
在此的情况下使用:需要使用HTML框架将浏览器窗口分割为两部分或更多框架时。

如何升级至 XHTML?

为了将站点从 HTML 转换为 XHTML,你首先应该熟悉前几章讲解的 XHTML 语法规则。

下面讲解具体的步骤。

添加文件类型声明

将下面的文件类型声明添加至每页的首行:

<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
注意: 本站 (w3school) 使用的是严格的 DTD。不过使用过渡的 DTD 也是个不错的选择,因为对于大多数入门的开发人员来说,严格的 DTD 可能显得“太严格了”。

关于文件类型声明的一点提示

如果你希望将页面验证为正确的 XHTML,那么页面中必须含有文件类型声明。

需要注意的是,根据不同的文件类型声明,新式的浏览器对文档的处理方式也是不同的。如果浏览器读到一个文件类型声明,那么它会按照“恰当”的方式来处理文档。如果没有 DOCTYPE,文档也许会以截然不同的方式显示出来。

小写的标签和属性名

由于 XHTML 对大小写敏感,同时也由于 XHTML 仅接受小写 HTML 标签和属性名,因此你可以执行一个简单的搜索和替换命令将所有的大写标签改为小写。对属性名也要做同样的处理。我们一直在自己的网站使用小写字母,因此基本上,替换功能没有太多地派上用场。

给所有属性加上引号

由于 W3C XHTML 1.0 标准中要求所有的属性值都必须加引号,所以,如果以前没有注意到这个细节,你需要逐页地对网站进行检查。这是一项费时的工作,所以绝不要再忘记为属性值加引号了。

空标签:<hr> , <br> 和 <img>

在 XHTML 中是不允许使用空标签(Empty tags)的。<hr> 和 <br> 标签应该被替换为 <hr /> 和 <br />。

这样做又产生了一个新问题,Netscape 会误读 <br/> 标签。我们不清楚原因所在,不过将之改为 <br />后就没有问题了。认识到这一点后,你需要再一次通过搜索和替换功能对标签进行更改。

其他一些标签(比如 <img> 标签)也会碰到上述同样的问题。不要使用闭合标签来关闭 <img>,而是要在标签的末端添加 / >。

验证站点

做完所有这一切以后,使用下面的链接根据官方的 W3C DTD 对所有修改过的页面进行验证: XHTML Validator。接下来,可能还会有少数的错误被发现,逐一对这些错误进行(手工地)修正。我们的经验是,最容易犯的错误是在列表中漏掉了 </li> 标签。

我们应该使用转换工具吗(比方说 TIDY)?对,我们本可以使用 TIDY。

Dave Raggett 的 HTML TIDY是用来清理HTML代码的免费工具。在处理那些由专门的 HTML 代码编辑器和转换工具生成的难以阅读的HTML代码方面,TIDY 还是做得很棒的。同时,它可以帮助你发现站点中哪些地方需要投入更多精力,使得对于残疾人士,网页具有更强的易用性。

我们没有使用 Tidy 是出于什么原因呢?当我们开始创建这个网站时,我们已经对 XHTML 非常地熟悉。当时我们已经知道使用小写标签以及为属性加引号。所以在网站测试的过程中,我们只是简单地通过 W3C 的 XHTML 验证器进行了测试,并修正了少许的错误。更重要的是,我们已经学到了很多关于编写 Tidy 式 HTML 代码的知识。

XHTML 验证
XHTML 文档是根据文档类型声明进行验证的。

通过 DTD 验证 XHTML

XHTML 文档是根据文档类型声明(DTD)进行验证的。只有将正确的 DTD 添加到文件的首行,XHTML 文件才会被正确地验证。

严格 DTD 包含没有被反对使用的或不出现在框架结构中的元素和属性:

!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"
过渡 DTD 包含严格 DTD 中的一切,外加那些不赞成使用的元素和属性。

!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
框架 DTD 包含过渡 DTD 中的一切,外加框架。

!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"
这个一个简单的 XHTML 文档:

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

<html>

<head>
<title>simple document</title>
</head>

<body>
<p>a simple paragraph</p>
</body>

</html>

使用 W3C 验证器来测试你的 XHTML

在下面的文本框中输入你的网址:


XHTML 模块
XHTML 模块化模型定义了 XHTML 的模块。

XHTML 模块化的原因

XHTML 是简单而庞大的语言。XHTML 包含了网站开发者需要的大多数功能。

对于某些特殊的用途,XHTML 太大且太复杂,而对于其他的用途,它又太简单了。

通过将 XHTML 分为若干模块,W3C 已经创造出数套小巧且定义良好的 XHTML 元素,这些元素既可被独立应用于简易设备,又可以与其他 XML 标准并入大型且更复杂的应用程序。

通过使用模块化的 XHTML,产品和软件设计者可以:

  • 选择被某种设备所支持的元素。
  • 在不打破 XHTML 标准的情况下,使用 XML 对 XHTML 进行扩展。
  • 针对小型设备,对 XHTML 进行简化。
  • 通过添加新的 XML 功能(比如 MathML, SVG, 语音和多媒体),针对复杂的应用对 XHTML 进行扩展。
  • 定义 XHTML 框架,比如 XHTML BASIC (针对移动设备的 XHTML 子集)。
XHTML 模块

W3C 已将 XHTML 的定义分为28种模型:

模块名称 描述
Applet Module (Applet模块) 定义已被废弃的applet元素。
Base Module (基础模块) 定义基本元素。
Basic Forms Module (基础表单模块) 定义基本的表单元素 (forms)。
Basic Tables Module (基础表格模块) 定义基本的表格元素 (table)。
Bi-directional Text Module (双向文本模块) 定义bdo元素。
Client Image Map Module(客户端图像映射模块) 定义浏览器端图像映射元素(image map elements)。
Edit Module (编辑模块) 定义编辑元素删除和插入。
Forms Module (表单模块) 定义所有在表单中使用的元素。
Frames Module (框架模块) 定义frameset元素。
Hypertext Module (超文本模块) 定义a元素。
Iframe Module (内联框架模块)
定义i
frame元素。
Image Module (图像模块) 定义图像元素 (img)。
Intrinsic Events Module () 定义事件属性 (event),比如onblur和onchange。
Legacy Module (遗留模块) 定义被废弃的元素和属性。
Link Module (链接模块) 定义链接 (link)元素。
List Module (列表模块) 定义列表元素ol, li, ul, dd, dt,和dl。
Metainformation Module (元信息模块) 定义meta元素。
Name Identification Module (名称识别模块) 定义已被废弃的name属性。
Object Module (对象模块) 定义对象元素 (object)和param元素。
Presentation Module (表现模块) 定义表现元素比如b和i。
Scripting Module (脚本模块) 定义脚本 (script)和无脚本 (noscript)元素。
Server Image Map Module(服务器端图像映射模块) 定义服务器端图像映射(server side image map)元素
Structure Module (结构模块) 定义以下元素:html, head, title and body。
Style Attribute Module (样式属性模块) 定义样式属性。
Style Sheet Module (样式表模块) 定义样式元素。
Tables Module (表格模块) 定义用于表格中的元素。
Target Module (Target模块) 定义target属性。
Text Module (文本模块) 定义文本容器元素 (text container),比如p和h1。
*注: 已被废弃的元素不应被用于XHTML之中。

XHTML 标准属性
HTML 标签拥有属性。每个标签的特殊属性均被列于每个标签描述之下。这里列出的属性是通用于每个标签的核心属性和语言属性(有个别例外)。

核心属性 (Core Attributes)

以下标签不提供下面的属性:base, head, html, meta, param, script, style, 以及 title 元素。
属性 描述
class class_rule 或 style_rule 元素的类(class)
id id_name 元素的某个特定id
style 样式定义 内联样式定义
title 提示文本 显示于提示工具中的文本

语言属性 (Language Attributes)

以下标签不提供下面的属性:base, br, frame, frameset, hr, iframe, param, 以及 script 元素。
属性 描述
dir ltr | rtl 设置文本的方向
lang 语言代码 设置语言代码
键盘属性 (Keyboard Attributes)
属性 描述
accesskey 字符 设置访问某元素的键盘快捷键
tabindex 设置某元素的Tab次序

XHTML 事件属性

窗口事件 (Window Events)

仅在 body 和 frameset 元素中有效。
属性 描述
onload 脚本 当文档被载入时执行脚本
onunload 脚本 当文档被卸下时执行脚本

表单元素事件 (Form Element Events)

仅在表单元素中有效。
属性 描述
onchange 脚本 当元素改变时执行脚本
onsubmit 脚本 当表单被提交时执行脚本
onreset 脚本 当表单被重置时执行脚本
onselect 脚本 当元素被选取时执行脚本
onblur 脚本 当元素失去焦点时执行脚本
onfocus 脚本 当元素获得焦点时执行脚本

键盘事件 (Keyboard Events)

在下列元素中无效:base, bdo, br, frame, frameset, head, html, iframe, meta, param, script, style, 以及 title 元素。
属性 描述
onkeydown 脚本 当键盘被按下时执行脚本
onkeypress 脚本 当键盘被按下后又松开时执行脚本
onkeyup 脚本 当键盘被松开时执行脚本

鼠标事件 (Mouse Events)

在下列元素中无效:base, bdo, br, frame, frameset, head, html, iframe, meta, param, script, style, title 元素。
属性 描述
onclick 脚本 当鼠标被单击时执行脚本
ondblclick 脚本 当鼠标被双击时执行脚本
onmousedown 脚本 当鼠标按钮被按下时执行脚本
onmousemove 脚本 当鼠标指针移动时执行脚本
onmouseout 脚本 当鼠标指针移出某元素时执行脚本
onmouseover 脚本 当鼠标指针悬停于某元素之上时执行脚本
onmouseup 脚本 当鼠标按钮被松开时执行脚本

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值