第23章 可扩展超文本标记语言(XHTML)
XHTML是万维网协会(W3C)定义和推荐的最新一代Web标准。尽管HTML是人们已经习惯使用的Web网页设计语言,而且采用HTML编写的网页已有数以百万计,但由于XHTML的语法比HTML的语法严谨得多,使用XHTML设计的Web网页更易于在网络上交换,因此XHTML立下的目标就是要在不久的将来取代HTML。
XHTML与HTML非常相似,名称上也只是加了一个表示可扩展的字母X。XHTML易学易用,把用HTML开发的Web网页转换成XHTML网页也不是很难,而且已经有这样的转换软件[3]。实际上,在XHTML 1.0发布以前就已经建立了很多XHTML站点,只不过在浏览网页时没有引起注意而已。
本章将介绍XHTML的基础知识。在阅读本章之前,读者需要了解HTML和XML的基础知识。
23.1 XHTML是什么
23.1.1 XHTML是什么可扩展超文本标记语言(Extensible Hypertext Markup Language,XHTML)是HTML语言的下一代语言。XHTML是用XML格式重新改写的HTML,XHTML 1.0是HTML4.01的改写版本。XHTML使用的词汇是HTML的词汇,使用的语法是XML的语法。
23.1.2 XHTML和HTML的差别
XHTML和HTML的主要差别是,XHTML 元素必需正确嵌套,XHTML文档必需是合格文档,标签名称必需是小写字母,以及所有元素必需是有开始标签和结束标签。
1,XHTML元素必需正确嵌套在HTML中,某些元素允许存在不正确的嵌套。例如,
<b><i>这段文字是黑斜体</b></i>
在XHTML中,所有元素必需正确嵌套。例如,
<b><i>这段文字是黑斜体</i></b>
2,XHTML文档必需是合格文档
XHTML文档必需严格遵照XML语法规则来构造。一个XHTML元素必需嵌套在根元素内,所有其他元素可以包含子元素,而子元素必需正确地嵌套在父元素内。基本的文档结构如下所示:
<html>
<head>,.,</head>
<body>,.,</body>
</html>
3,标签名称必需是小写字母这是因为XHTML文档是XML的应用,而XML是区分大小写的。例如,下面是两个错误的标签:
<BODY>
<P>这是一个段落</P>
</BODY>
正确的标签为:
<body>
<p>这是一个段落</p>
</body>
4,所有的XHTML元素必需是闭合的在XHTML中,所有元素都必需有开始标签和结束标签。例如,下面是两个错误的XHTML元素:
<p>这是介绍香港的段落
<p>这是介绍台湾的段落正确的XHTML元素为,
<p>这是介绍香港的段落</p>
<p>这是介绍台湾的段落</p>
空元素也必需是闭合的。它有一个结束标签,或者有一个带“/>”符号串的开始标签。例如,下面是两个错误的XHTML元素:
这是新产品<br>
这里有一幅图像<img src="topdog_student.gif" alt="Topdog Student">
正确的XHTML元素为这是新产品
这里有一幅图像<img src="topdog_student.gif" alt=" Topdog Student " />
23.2 XHTML语法要编写出合格XHTML文档,则需要掌握它的语法。XHTML语法规则主要包括属性名必需用小写字母、属性值必需要用引号、不允许属性最小化、id(识别码)属性代替名称属性、语言属性、强制性XHTML元素。
1,属性名必需用小写字母例如,下面是一个错误的属性名:
<table WIDTH="100%">
正确的属性名为
<table width="100%">
2,属性值必需要用引号例如,下面是一个错误的属性值:
<table width=100%>
正确的属性值为
<table width="100%">
3,不允许属性最小化例如,下面都是错误的属性:
<dl compact>
<input checked>
<input readonly>
<input disabled>
<option selected>
<frame noresize>
正确的属性为
<dl compact="compact">
<input checked="checked">
<input readonly="readonly">
<input disabled="disabled">
<option selected="selected">
<frame noresize="noresize">
表23-1列出了HTML中的最小化属性和在XHTML中的表示法。
表23-1 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"
4,用id代替名称属性在HTML 4.01中,为元素定义了一个name(名称)属性。在XHTML中,使用id(识别码)代替名称。例如,下面是错误的名称属性:
<img src="picture.gif" name="picture1" />
正确的属性名称为
<img src="picture.gif" id="picture1" />
为适应比较老的浏览器,属性名称应该使用两个名称(即name和id)。例如,下面是一个使用name和id的元素
<img src="picture.gif" id="picture1" name="picture1" />
5,语言属性在XHTML中,几乎每一个元素都用到语言(lang)属性,它指定在元素中的内容要使用的语言。指定语言属性的目的是帮助搜索引擎检索文档,以及便于浏览器浏览文档。如果在元素中使用语言属性,则必需添加xml:lang属性,例如,
<div lang="en" xml:lang="en"> This paragraph is in English!</div>
6,强制性XHTML元素所有XHTML文档必需有DOCTYPE声明,html,head和body元素必需出现在文档中,title必需出现在head元素中。下面所示的文档是一个最小的XHTML文档模板
<!DOCTYPE Doctype goes here>
<html>
<head>
<title>Title goes here</title>
</head>
<body>
Body text goes here
</body>
</html>
注意,DOCTYPE声明不是XHTML文档本身,它也不是XHTML元素,并且不应该有结束标签
23.3 XHTML的文档类型定义
23.3.1 XHTML文档结构一个XHTML文档主要由下列三个部分组成:文档类型声明(DOCTYPE)、文档头(head)和文档主体(body)。XHTML文档的基本结构如下所示:
<!DOCTYPE,..>
<html>
<head>
<title>..,</title>
</head>
<body>,.,</body>
</html>
DOCTYPE声明总是放在XHTML的第一行。
【例1】一个“简单的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 XHTML document</title>
</head>
<body>
<p>a simple paragraph</p>
</body>
</html>
其中,DOCTYPE定义的文档类型是,
<!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 XHTML document</title>
</head>
<body>
<p>a simple paragraph</p>
</body>
</html>
23.3.2 三种文档类型定义文档类型定义(DTD)用来指定网页的语法规则。这些语法规则用于指定特定类型文档的标记(包括元素集和实体说明)。目前,XHTML 1.0标准定义了三种XHTML文档类型定义:严谨型(Strict)、过渡型(Transitional)和框架型(Frameset)。
1,XHTML 1.0 Strict
严谨型文档类型定义(Strict DTD)包含没有被废弃或者没有出现在框架网页中的元素和属性。它用于清除标记,以避免文档显示出现混乱。这个文档类型与级联样式(CSS)一起。严谨型文档定义用DOCTYPE声明,
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
2,XHTML 1.0 Transitional
过渡型文档类型定义(Transitional DTD)包含严谨型文档类型定义中的所有内容,以及被废弃的元素和属性。用于充分利用HTML的演示特性,以及使不理解级联样式(CSS)的浏览器能够正常工作。过渡型文档用DOCTYPE声明:
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
⑶ XHTML 1.0 Frameset
框架型文档类型定义(Frameset DTD)包含过渡型文档类型定义中的所有内容和框架网页定义,用于把浏览器窗口分割成两个或两个以上的显示窗口。框架型文档用DOCTYPE声明:
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
23.4 从HTML到XHTML
把一个Web站点从HTML型的站点转换成XHTML型的站点,需要熟悉XHTML的语法规则。转换一个Web站点必需要做的工作如下:
⑴ 在HTML文档中,把DOCTYPE声明添加到文档的第一行。例如,
<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
注意,DOCTYPE声明中用的是过渡型DTD。也可以尝试使用严谨型DTD。
⑵ 把HTML文档中的所有标签和属性名称都改成小写字母。
⑶ 把HTML文档中的所有属性值都添加双引号或单引号。
⑷ 修改HTML文档中的所有空标签。例如,把<hr>和<br>分别修改成<hr />和

⑸ Web站点上的所有HTML文档都要符合W3C DTD的要求。
把HTML文档转换成XHTML文档可以手工做,也可以借助转换工具(如Dave Raggett的HTML TIDY[2])做。
23.5 XHTML 1.0一览表
23.5.1 XHTML标签按照功能分类,XHTML标签可分成如下几类:
基本标签:<!DOCTYPE>,<html>,<body>,<h1>,……,<h6>,<p>,
,<hr />,<!-->。
字符格式标签:<b>,<strong>,<i>,<em>,<big>,<small>,<sup>,<sub>,<bdo>。
输出标签:<pre>,<code>,<tt>,<kbd>,<var>,<samp>。
块标签:<acronym>,<abbr>,<address>,<blockquote>,<q>,<cite>,<ins>,<del>,
链接标签:<a>,<link>。
框架标签:<frame>,<frameset>,<noframes>,<iframe>。
输入标签:<form>,<input>,<textarea>,<button>,<select>,<optgroup>,<option>,<label>,<fieldset>,<legend>。
列表标签:<ul>,<ol>,<li>,<dl>,<dt>,<dfn>,<dd>。
图像标签:<img />,<map>,<area />。
表格标签:<table>,<caption>,<th>,<tr>,<td>,<thead>,<tbody>,<tfoot>,<col>,<colgroup>。
样式标签:<style>,<div>,<span>。
元信息标签:<head>,<title>,<meta>,<base />。
程序设计标签:<script>,<noscript>,<object>,<param>。
按字母顺序排序的标签见表23-2。表中,
NN:表示Netscape支持该标签的最早版本
IE,表示Internet Explorer支持该标签的最早版本
DTD,表示XHTML 1.0 DTD中允许的标签。S=Strict,T=Transitional,F=Frameset
表23-2 XHTML 1.0标签标签
说明
NN
IE
DTD
<!-->
Defines a comment
3.0
3.0
STF
<!DOCTYPE>?
Defines the document type

STF
<a>
Defines an anchor
3.0
3.0
STF
<abbr>
Defines an abbreviation
6.2

STF
<acronym>
Defines an acronym
6.2
4.0
STF
<address>
Defines an address element
4.0
4.0
STF
<applet>
Defines an applet
3.0
3.0
TF
<area />
Defines an area inside an image map
3.0
3.0
STF
<b>
Defines bold text
3.0
3.0
STF
<base />
Defines a base URL for all the links in a page
3.0
3.0
STF
<basefont />
Defines a base font
3.0
3.0
TF
<bdo>
Defines the direction of text display
6.2
5.0
STF
<big>
Defines big text
3.0
3.0
STF
<blockquote>
Defines a long quotation
3.0
3.0
STF
<body>
Defines the body element
3.0
3.0
STF
Inserts a single line break
3.0
3.0
STF
<button>
Defines a push button
6.2
4.0
STF
<caption>
Defines a table caption
3.0
3.0
STF
<center>
Defines centered text
3.0
3.0
TF
<cite>
Defines a citation
3.0
3.0
STF
<code>
Defines computer code text
3.0
3.0
STF
<col>
Defines attributes for table columns?

3.0
STF
<colgroup>
Defines groups of table columns

3.0
STF
<dd>
Defines a definition description
3.0
3.0
STF
<del>
Defines deleted text
6.2
4.0
STF
<dir>
Defines a directory list
3.0
3.0
TF
<dfn>
Defines?a definition term

3.0
STF
<div>
Defines a section in a document
3.0
3.0
STF
<dl>
Defines a definition list
3.0
3.0
STF
<dt>
Defines a definition term
3.0
3.0
STF
<em>
Defines emphasized text?
3.0
3.0
STF
<fieldset>
Defines a fieldset
6.2
4.0
STF
<font>
Defines the font face,size,and color of text
3.0
3.0
TF
<form>
Defines a form?
3.0
3.0
STF
<frame>
Defines a sub window (a frame)
3.0
3.0
F
<frameset>
Defines a set of frames
3.0
3.0
F
<h1> to <h6>
Defines header 1 to header 6
3.0
3.0
STF
<head>
Defines information about the document
3.0
3.0
STF
<hr />
Defines a horizontal rule
3.0
3.0
STF
<html>
Defines an html document
3.0
3.0
STF
<i>
Defines italic text
3.0
3.0
STF
<iframe>
Defines an inline sub window (frame)
6.0
3.0
TF
<img />
Defines an image
3.0
3.0
STF
<input>
Defines an input field
3.0
3.0
STF
<ins>
Defines inserted text
6.2
4.0
STF
<isindex>

3.0
3.0
TF
<kbd>
Defines keyboard text
3.0
3.0
STF
<label>
Defines a label?
6.2
4.0
STF
<legend>
Defines a title in a fieldset
6.2
4.0
STF
<li>
Defines a list item
3.0
3.0
STF
<link>
Defines a resource reference
4.0
3.0
STF
<map>
Defines an image map?
3.0
3.0
STF
<menu>
Defines a menu list
3.0
3.0
TF
<meta>
Defines meta information
3.0
3.0
STF
<noframes>
Defines a noframe section
3.0
3.0
TF
<noscript>
Defines a noscript section
3.0
3.0
STF
<object>
Defines an embedded object

3.0
STF
<ol>
Defines an ordered list
3.0
3.0
STF
<optgroup>
Defines an option group
6.0

STF
<option>
Defines an option in a drop-down list
3.0
3.0
STF
<p>
Defines a paragraph
3.0
3.0
STF
<param>
Defines a parameter for an object
3.0
3.0
STF
<pre>
Defines preformatted text
3.0
3.0
STF
<q>
Defines a short quotation
6.2

STF
<s>
Defines strikethrough text
3.0
3.0
TF
<samp>
Defines sample computer code
3.0
3.0
STF
<script>
Defines a script
3.0
3.0
STF
<select>
Defines a selectable list
3.0
3.0
STF
<small>
Defines small text
3.0
3.0
STF
<span>
Defines a section in a document
4.0
3.0
STF
<strike>
Defines strikethrough text
3.0
3.0
TF
<strong>
Defines strong text
3.0
3.0
STF
<style>
Defines a style definition
4.0
3.0
STF
<sub>
Defines subscripted text
3.0
3.0
STF
<sup>
Defines superscripted text
3.0
3.0
STF
<table>
Defines a table
3.0
3.0
STF
<tbody>
Defines a table body

4.0
STF
<td>
Defines a table cell
3.0
3.0
STF
<textarea>
Defines a text area
3.0
3.0
STF
<tfoot>
Defines a table footer

4.0
STF
<th>
Defines a table header
3.0
3.0
STF
<thead>
Defines a table header

4.0
STF
<title>
Defines the document title
3.0
3.0
STF
<tr>
Defines a table row
3.0
3.0
STF
<tt>
Defines teletype text
3.0
3.0
STF
<u>
Defines underlined text
3.0
3.0
TF
<ul>
Defines an unordered list
3.0
3.0
STF
<var>
Defines a variable
3.0
3.0
STF
23.5.2 XHTML标签的属性
XHTML标签可以有属性。对几乎所有标签都适用的核心属性列在表23-3,语言属性列在表23-4,键盘标签列在表23-5。
表23-3 核心属性属性
值
说明
class
class_rule or style_rule
The class of the element
id
id_name
A unique identifier for an element
title
tooltip_text?
A text to display in a tool tip
不用核心属性的标签:base,head,html,meta,param,script,style,title。
表23-4 语言标签属性
值
说明
dir
ltr | rtl
Sets the text direction
lang
language_code
Sets the language code
不用语言属性的标签:base,br,frame,frameset,hr,iframe,param,script。
表23-5 键盘标签属性
值
说明
accesskey
character
Sets a keyboard shortcut to access an element
tabindex
Number
Sets the tab order of an element
23.5.3 XHTML事件的属性
Window事件列在表23-6,表单元素事件列在表23-7,键盘事件列在表23-8,鼠标器事件列在表23-9。
表23-6 Window事件属性
值
说明
onload
script
Script to be run when a document loads
onunload
script
Script to be run when a document unloads
不用Windows事件属性的标签:body,frameset
表23-7 表单元素事件属性
值
说明
onchange
script
Script to be run when the element changes
onsubmit
script
Script to be run when the form is submitted
onreset
script
Script to be run when the form is reset
onselect
script
Script to be run when the element is selected
Onblur
script
Script to be run when the element loses focus
Onfocus
script
Script to be run when the element gets the focus
表23-8 键盘事件属性
值
说明
onkeydown
script
What to do when key pressed
onkeypress
script
What to do when key pressed and released
onkeyup
script
What to do when key released
不用键盘事件的标签:base,bdo,br,frame,frameset,head,html,iframe,meta,param,script,style,title。
表23-9 鼠标器事件属性
值
说明
onclick
script
What to do on a mouse click
ondblclick
script
What to do on a mouse doubleclick
onmousedown
script
What to do when mouse button is pressed
onmousemove
script
What to do when mouse pointer moves
onmouseover
script
What to do when mouse pointer moves over an element
onmouseout
script
What to do when mouse pointer moves out of an element
onmouseup
script
What to do when mouse button is released
不用鼠标器事件的标签:base,bdo,br,frame,frameset,head,html,iframe,meta,param,script,style,title。
练习与思考题
XHTML是什么?
XHTML是Web标准?
XML和HTML要被XHTML取代吗?
HTML要被XHTML取代吗?
在下列标签中,哪一个是正确的XHTML段落标签?
⑴ <p></p>
⑵ <P></P>
⑶ <P></p>
⑷ </p><p>
在下列标签中,哪一个是正确的XHTML断行标签?

⑵ <br>
⑶ <break/>
在下列属性和属性值中,哪一个是正确的XHTML 的属性和属性值?
⑴ width="80"
⑵ WIDTH="80"
⑶ WIDTH=80
⑷ width=80
XHTML中的所有元素必需是闭合的吗?
⑴ 对
⑵ 错
DOCTYPE声明不用结束标签,对吗?
⑴ 对
⑵ 错在XHTML文档中,下列元素中哪一个是强制性的?
⑴ doctype,html,head,body和title
⑵ doctype,html,head,和body
⑶ doctype,html和body
下列代码是不是合格的XHTML代码?
⑴ <p>A <b><i>short</b></i> paragraph</p>
⑵ <p>A <b><i>short</i></b> paragraph
⑶ <p>A <b><i>short</i></b> paragraph</p>
在下列代码中,哪一个是正确的语言引用?
⑴ <div lang="en" xml:lang="en">Hello World!</div>
⑵ <div xml:lang="en">Hello World!</div>
⑶ <div lang="en">Hello World!</div>
在XHTML文档中允许属性最小化?
⑴ 是
⑵ 否所有XHTML文档都需要doctype?
⑴ 是
⑵ 否参考答案:
23.2.(是),23.3.(不),23.4.(是),23.5.⑴,23.6.⑴,23.7.⑴,23.8.⑴,23.9.⑴,23.10.⑴,
23.11.⑶,23.12.⑴,23.13.⑵,23.14.⑴。
参考文献和站点
W3C Recommendation 26 January 2000,XHTML? 1.0,The Extensible HyperText Markup Language,A Reformulation of HTML 4 in XML 1.0,http://www.w3.org/TR/xhtml1/。
Refsnes Data,The Complete XHTML 1.0 Reference,http://www.w3schools.com/xhtml/xhtml_reference.asp。
Dave Raggett,Clean up your Web pages with HTML TIDY,http://www.w3.org/People/Raggett/tidy/。
Gerald Oskoboiny,HTML Validation Service,http://validator.w3.org/。
Free Webmaster Help, Tutorials,http://www.freewebmasterhelp.com/tutorials/index.htm。