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 标准。
所有新的浏览器都支持 XHTML
XHTML 与 HTML 4.01 兼容。
XHTML 是 HTML 与 XML(扩展标记语言)的结合物。
XML 是一种标记化语言,其中所有的东西都要被正确的标记,以产生形式良好的文档。
XML 用来描述数据,而 HTML 则用来显示数据。
今天的市场中存在着不同的浏览器技术,某些浏览器运行在计算机中,某些浏览器则运行在移动电话和手持设备上。而后者没有能力和手段来解释糟糕的标记语言。
因此,通过把 HTML 和 XML 各自的长处加以结合,我们得到了在现在和未来都能派上用场的标记语言 - XHTML。
最主要的不同:
- XHTML 元素必须被正确地嵌套。
- XHTML 元素必须被关闭。
- 标签名必须用小写字母。
- XHTML 文档必须拥有根元素。
元素必须被正确地嵌套
提示:在嵌套列表中一个容易犯的错误,是忘记内部列表必须位于 li 元素中,就像下面这样:
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea</li>
</ul>
<li>Milk</li>
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea</li>
</ul>
</li>
<li>Milk</li>
</ul>
XHTML 元素必须被关闭
非空标签必须使用结束标签。
空标签也必须被关闭
空标签也必须使用结束标签,或者其开始标签必须使用/>
结尾。
A horizontal rule: <hr>
A horizontal rule: <hr />
An image: <img src="happy.gif" alt="Happy face" />
XHTML 元素必须小写
XHTML 规范定义:标签名和属性对大小写敏感。
XHTML 文档必须拥有一个根元素
<head> ... </head>
<body> ... </body>
</html>
更多的 XHTML 语法规则:
- 属性名称必须小写
- 属性值必须加引号
- 属性不能简写
- 用 Id 属性代替 name 属性
- XHTML DTD 定义了强制使用的 HTML 元素
属性名称必须小写
属性值必须加引号
<input readonly>
<input disabled>
<option selected>
<input readonly="readonly" />
<input disabled="disabled" />
<option selected="selected" />
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 取而代之。
重要的兼容性提示:
语言属性(lang)
lang 属性应用于几乎所有的 XHTML 元素。它定义元素内部的内容的所用语言的类型。
强制使用的 XHTML 元素
所有 XHTML 文档必须进行文件类型声明(DOCTYPE declaration)。在 XHTML 文档中必须存在html、head、body元素,而 title 元素必须位于在 head 元素中。
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Title goes here</title>
</head>
<body>
</body>
提示:文件类型声明并非 XHTML 文档自身的组成部分。它并不是 XHTML 元素,也没有关闭标签。
提示:在 XHTML 中,<html> 标签内的 xmlns 属性是必需的。然而,即使当 XHTML 文档中没有这个属性时,w3.org 的验证工具也不会提示错误。这是因为,"xmlns=http://www.w3.org/1999/xhtml" 是一个固定的值,即使你没有把它包含在代码中,这个值也会被添加到 <html> 标签中。
XHTML 定义了三种文件类型声明。
<html>
<head>
<title>... </title>
</head>
<body> ... </body>
一个 XHTML 的实例
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>
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
<head>
<title>simple document</title>
</head>
<body>
<p>a simple paragraph</p>
</body>
3种文档类型声明
- DTD 规定了使用通用标记语言(SGML)的网页的语法。
- 诸如 HTML 这样的通用标记语言应该使用 DTD 来规定应用于某种特定文档中的标签的规则,这些规则包括一系列的元素和实体的声明。
- 在通用标记语言(SGML)的文档类型声明或 DTD 中,XHTML 被详细地进行了描述。
- XHTML DTD 使用精确的可被计算机读取的语言来描述合法的 XHTML 标记的语法和句法。
存在三种XHTML文档类型:
- STRICT(严格类型)
- TRANSITIONAL(过渡类型)
- FRAMESET(框架类型)
XHTML 1.0 的三种 XML 文档类型
XHTML 1.0 规定了三种 XML 文档类型,以对应上述三种 DTD。
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
在此情况下使用:需要干净的标记,避免表现上的混乱。请与层叠样式表配合使用。
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
在此情况下使用:当需要利用 HTML 在表现上的特性时,并且当需要为那些不支持层叠样式表的浏览器编写 XHTML 时。
PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
为了将站点从 HTML 转换为 XHTML,你首先应该熟悉前几章讲解的 XHTML 语法规则。
添加文件类型声明
"-//W3C//DTD XHTML 1.0 Transitional//EN"
关于文件类型声明的一点提示
如果你希望将页面验证为正确的 XHTML,那么页面中必须含有文件类型声明。
小写的标签和属性名
给所有属性加上引号
空标签:<hr> , <br> 和 <img>
在 XHTML 中是不允许使用空标签(Empty tags)的。<hr> 和 <br> 标签应该被替换为 <hr /> 和 <br />。
这样做又产生了一个新问题,Netscape 会误读 <br/> 标签。我们不清楚原因所在,不过将之改为 <br />后就没有问题了。认识到这一点后,你需要再一次通过搜索和替换功能对标签进行更改。
验证站点
做完所有这一切以后,使用下面的链接根据官方的 W3C DTD 对所有修改过的页面进行验证: XHTML Validator。接下来,可能还会有少数的错误被发现,逐一对这些错误进行(手工地)修正。我们的经验是,最容易犯的错误是在列表中漏掉了 </li> 标签。
我们应该使用转换工具吗(比方说 TIDY)?对,我们本可以使用 TIDY。
Dave Raggett 的 HTML TIDY是用来清理HTML代码的免费工具。在处理那些由专门的 HTML 代码编辑器和转换工具生成的难以阅读的HTML代码方面,TIDY 还是做得很棒的。同时,它可以帮助你发现站点中哪些地方需要投入更多精力,使得对于残疾人士,网页具有更强的易用性。
通过 DTD 验证 XHTML
XHTML 文档是根据文档类型声明(DTD)进行验证的。只有将正确的 DTD 添加到文件的首行,XHTML 文件才会被正确地验证。
"-//W3C//DTD XHTML 1.0 Strict//EN"
"-//W3C//DTD XHTML 1.0 Transitional//EN"
"-//W3C//DTD XHTML 1.0 Frameset//EN"
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>
使用 W3C 验证器来测试你的 XHTML
在下面的文本框中输入你的网址:
XHTML 模块化的原因
XHTML 是简单而庞大的语言。XHTML 包含了网站开发者需要的大多数功能。
对于某些特殊的用途,XHTML 太大且太复杂,而对于其他的用途,它又太简单了。
通过将 XHTML 分为若干模块,W3C 已经创造出数套小巧且定义良好的 XHTML 元素,这些元素既可被独立应用于简易设备,又可以与其他 XML 标准并入大型且更复杂的应用程序。
通过使用模块化的 XHTML,产品和软件设计者可以:
- 选择被某种设备所支持的元素。
- 在不打破 XHTML 标准的情况下,使用 XML 对 XHTML 进行扩展。
- 针对小型设备,对 XHTML 进行简化。
- 通过添加新的 XML 功能(比如 MathML, SVG, 语音和多媒体),针对复杂的应用对 XHTML 进行扩展。
- 定义 XHTML 框架,比如 XHTML BASIC (针对移动设备的 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。 |
核心属性 (Core Attributes)
属性 | 值 | 描述 |
---|---|---|
class | class_rule 或 style_rule | 元素的类(class) |
id | id_name | 元素的某个特定id |
style | 样式定义 | 内联样式定义 |
title | 提示文本 | 显示于提示工具中的文本 |
语言属性 (Language Attributes)
属性 | 值 | 描述 |
---|---|---|
dir | ltr | rtl | 设置文本的方向 |
lang | 语言代码 | 设置语言代码 |
属性 | 值 | 描述 |
---|---|---|
accesskey | 字符 | 设置访问某元素的键盘快捷键 |
tabindex | 数 | 设置某元素的Tab次序 |
窗口事件 (Window Events)
属性 | 值 | 描述 |
---|---|---|
onload | 脚本 | 当文档被载入时执行脚本 |
onunload | 脚本 | 当文档被卸下时执行脚本 |
表单元素事件 (Form Element Events)
属性 | 值 | 描述 |
---|---|---|
onchange | 脚本 | 当元素改变时执行脚本 |
onsubmit | 脚本 | 当表单被提交时执行脚本 |
onreset | 脚本 | 当表单被重置时执行脚本 |
onselect | 脚本 | 当元素被选取时执行脚本 |
onblur | 脚本 | 当元素失去焦点时执行脚本 |
onfocus | 脚本 | 当元素获得焦点时执行脚本 |
键盘事件 (Keyboard Events)
属性 | 值 | 描述 |
---|---|---|
onkeydown | 脚本 | 当键盘被按下时执行脚本 |
onkeypress | 脚本 | 当键盘被按下后又松开时执行脚本 |
onkeyup | 脚本 | 当键盘被松开时执行脚本 |
鼠标事件 (Mouse Events)
属性 | 值 | 描述 |
---|---|---|
onclick | 脚本 | 当鼠标被单击时执行脚本 |
ondblclick | 脚本 | 当鼠标被双击时执行脚本 |
onmousedown | 脚本 | 当鼠标按钮被按下时执行脚本 |
onmousemove | 脚本 | 当鼠标指针移动时执行脚本 |
onmouseout | 脚本 | 当鼠标指针移出某元素时执行脚本 |
onmouseover | 脚本 | 当鼠标指针悬停于某元素之上时执行脚本 |
onmouseup | 脚本 | 当鼠标按钮被松开时执行脚本 |