跳转到内容

XML - 数据交换管理/XHTML

来自维基教科书,开放世界中的开放书籍



上一章 下一章
DTD XPath




学习目标

  • 列出 XHTML 和 HTML 之间的区别
  • 创建一个有效的、格式良好的 XHTML 文档
  • 将现有的 HTML 文档转换为 XHTML
  • 决定何时 XHTML 比 HTML 更合适


在前面的章节中,我们学习了如何从 XML 文档和 XSL 样式表生成 HTML 文档。在本节中,我们将学习如何将这些 HTML 文档转换为有效的 XHTML。我们将讨论 XHTML 作为标准演变的原因以及何时应该使用它。

XHTML 的演变

[编辑 | 编辑源代码]

最初,网页是用 HTML 设计的。不幸的是,这种标记语言的大多数实现都允许各种错误和糟糕的格式。主要浏览器被设计为宽容的,大多数情况下,糟糕的代码会显示出很少的问题。这种糟糕的代码通常在浏览器之间不可移植,例如,一个页面可以在 Netscape 中渲染,但不能在 Internet Explorer 中渲染,反之亦然。对人为错误和糟糕格式的处理需要一定量的处理能力,小型手持设备可能没有这种能力。因此,在手持设备上显示数据时,一个微小的错误可能会导致设备崩溃。

XHTML 部分缓解了这些问题。通过要求 XHTML 文档符合 XML 中定义的更严格的规则,减少了处理负担。除了更严格的规则外,HTML 4.01 和 XHTML 1.0 在功能上是等效的。如果文档违反了 XML 的格式良好规则,符合 XHTML 的浏览器不能渲染页面。如果文档格式良好但无效,符合 XHTML 的浏览器可能会渲染页面,因此大量错误仍然可以逃脱。

在本节中,我们将详细检查如何创建 XHTML 文档。

从设计角度来看,HTML 最大的问题是它从未打算成为图形设计语言。HTML 的最初版本旨在结构化人类可读内容(例如,将一段文本标记为段落),而不是格式化它(例如,这段段落应该以 14pt Arial 字体显示)。HTML 已经远远超出了它最初的目的,并且正在被拉伸和操纵以涵盖最初的 HTML 设计人员从未想象过的情况。

建议的解决方案是使用单独的语言来描述一组文档的表示。级联样式表 (CSS) 是一种用于描述表示的语言。从 XHTML 1.1 版本开始,网页必须使用 CSS 或具有等效功能的语言(如 XSLT(XSL 转换))来格式化。在 XHTML 1.0 中,除非使用严格变体,否则使用 CSS 或 XSLT 是可选的。HTML 4.01 支持 CSS,但不支持 XSLT。

什么是 XHTML?

[编辑 | 编辑源代码]

正如你可能猜到的,XHTML 代表可扩展超文本标记语言。它是 HTML 和 XML 之间的交叉。它实现了 HTML 所忽略的两个主要目的

  1. XHTML 比 HTML 更加严格的标准。XHTML 文档必须像普通 XML 一样格式良好。这减少了浏览器之间的差异和不一致性,因为浏览器不需要决定如何显示格式错误的页面。不允许出现格式错误的 XHTML。
    注意 1: 只有当 MIME 类型 设置为 application/xhtml+xml 时,浏览器才会执行格式良好性检查。如果 MIME 类型设置为 text/html,浏览器将允许格式错误的文档。网络上有大量格式错误的“XHTML”文档,因为它们的 MIME 类型是 text/html
    注意 2: 浏览器不需要检查有效性。有关示例,请参见下面的 无效 XHTML
  2. XHTML 允许模块化(m12n)。对于不同的环境,可以定义不同的元素和属性子集。

关于 XHTML 最好的事情是它几乎和 HTML 一样!如果你知道如何编写 HTML 文档,那么创建 XHTML 文档对你来说将会非常简单,不会太麻烦。你必须牢记的最重要的事情是,与 HTML 不同,在 HTML 中,浏览器会忽略简单的错误(例如缺少结束标签),而 XHTML 代码必须根据精确的规范编写。我们将在后面看到,遵守这些严格的规范实际上可以让 XHTML 比 HTML 更灵活。

XHTML 文档结构

[编辑 | 编辑源代码]

最少,XHTML 文档必须包含 DOCTYPE 声明和四个元素:html、head、title 和 body

<!DOCTYPE ... >
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="...">
   <head>
      <title></title>
   </head>
   <body></body>
</html>

XHTML 文档的开头 html 标签必须包含 XHTML 命名空间的命名空间声明。

DOCTYPE 声明应该出现在 XHTML 文档中的 html 标签之前。它可以遵循三种格式之一。

XHTML 1.0 严格

[编辑 | 编辑源代码]
<!DOCTYPE html
 PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

严格声明是最不宽容的。这是新文档的首选 DOCTYPE。严格的文档往往是简化的和干净的。所有格式都将出现在 级联样式表 中,而不是文档本身。应该包含在级联样式表中而不是文档本身的元素包括但不限于

<body text="blue">, <u>nderline</u>, <b>old</b>, <i>talics</i>, and <font color="#9900FF" face="Arial" size="+2">

还有一些情况,你的代码需要嵌套在块级元素中。

错误示例

<p>I hope that you enjoy</p> your stay.

正确示例

<p>I hope that you enjoy your stay.</p>

XHTML 1.0 过渡

[编辑 | 编辑源代码]
<!DOCTYPE html
 PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

此声明旨在作为将传统 HTML 文档迁移到 XHTML 1.0 严格的过渡阶段。W3C 鼓励作者在新文档中使用严格 DOCTYPE。(XHTML 1.0 过渡 DTD 将读者引导至 HTML4.01 过渡 DTD 中的相关说明。)

此 DOCTYPE 不需要 CSS 进行格式化;但是,建议使用它。它通常容忍在应使用块级元素的地方出现的内联元素。

你可能在新文档中选择此 DOCTYPE 的原因有两个。

  • 您需要与支持 XHTML 格式化元素但不支持 CSS 的浏览器向后兼容。这只是一小部分普通用户(不到 1%)。许多不支持 CSS 的浏览器也不支持 HTML 4.0 或 XHTML。但是,它可能在具有比平时更多非常旧(2000 年以前)浏览器的公司内部网上有用。
  • 您需要链接到框架。使用框架的做法已不再鼓励,因为它们在许多浏览器中效果不佳。

XHTML 1.0 框架集

[edit | edit source]
<!DOCTYPE html
 PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

如果您要创建包含框架的页面,则此声明适用。但是,由于在设计网页时通常不鼓励使用框架,因此此声明应很少使用。

XML 前言

[edit | edit source]

此外,W3C 鼓励 XHTML 作者将以下处理指令作为每个文档的第一行。

<?xml version="1.0" encoding="UTF-8"?>

虽然该处理指令是标准建议的,但它可能会在旧的 Web 浏览器(包括 Internet Explorer 版本 6)中导致错误。是否包含前言由各个作者决定。

语言

[edit | edit source]

最佳做法是在 html 元素上包含可选的 xml:lang 属性 [1],以描述文档的主要语言。为了与 HTML 兼容,lang 属性也应使用相同的值指定。对于英文文档,请使用

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

xml:langlang 属性也可以在其他元素上指定,以指示文档中语言的更改,例如英文文档中的法语引文。

将 HTML 转换为 XHTML

[edit | edit source]

在本节中,我们将了解如何将 HTML 文档转换为 XHTML 文档。我们将检查以下每个规则。

  • 文档必须格式良好
    • 标签必须正确嵌套
    • 元素必须关闭
  • 标签必须为小写
  • 属性名称必须为小写
  • 属性值必须加引号
  • 属性不能最小化
  • name 属性被 id 属性替换(在 XHTML 1.0 中,name 和 id 应使用相同的值来维护向后兼容性)。
  • 不允许使用普通与号
  • 脚本和 CSS 必须转义(将它们包含在 ]]> 标签内)或最好移动到外部文件中。

文档必须格式良好

[edit | edit source]

由于 XHTML 符合所有 XML 标准,因此 XHTML 文档必须根据 W3C 对 XML 文档的建议格式良好。这里的一些规则再次强调了这一点。我们将考虑不正确和正确的示例。

标签必须正确嵌套

[edit | edit source]

浏览器广泛地容忍 HTML 文档中的错误嵌套标签。

<b><u>
This text is probably bold and underlined, but inside incorrectly nested tags.
</b></u>

上面的文本将显示为粗体和下划线,即使结束标签没有按正确顺序排列。如果标签嵌套不当,XHTML 页面将不会显示,因为它将不被视为有效的 XML 文档。这个问题很容易解决。

<b><u>
This text is bold and underlined and inside properly nested tags.
</u></b>

元素必须关闭

[edit | edit source]

同样,XHTML 文档必须被视为有效的 XML 文档。因此,所有标签必须关闭。HTML 规范将一些标签列为具有“可选”结束标签,例如<p><li>标签。

<p>Here is a list:
<ul>
   <li>Item 1
   <li>Item 2
   <li>Item 3
</ul>

在 XHTML 中,必须包含结束标签。

<p>Here is a list: </p>
<ul>
   <li>Item 1</li>
   <li>Item 2</li>
   <li>Item 3</li>
</ul>

对于没有关闭标签的 HTML 标签,我们该怎么办?一些特殊标签不需要也不暗示关闭标签。

<img src="titlebar.gif" alt="Title">
<hr>
<br>
<p>Welcome to my web page!</p>

在 XHTML 中,必须遵循在标签中包含关闭斜杠的 XML 规则。

<img src="titlebar.gif" alt="title" />
<hr />
<br />
<p>Welcome to my Web page!</p>

请注意,如果关闭斜杠前面没有空格(<br/>),则当今的一些浏览器将错误地呈现页面。虽然这不是官方建议的一部分,但为了兼容性,您应该始终包含空格(<br />)。

以下是 HTML 中常见的空标签。

  • area
  • base
  • basefont
  • br
  • hr
  • img
  • input
  • link
  • meta
  • param

标签必须为小写

[edit | edit source]

在 HTML 中,标签可以写成小写或大写。事实上,一些 Web 作者更喜欢将标签写成大写,以使它们更容易阅读。XHTML 要求所有标签都为小写。

<H1>This is an example of bad case.</h1>

这种差异是必要的,因为 XML 区分大小写。XML 会将<H1><h1>视为不同的标签,在上面的示例中会导致问题。

<h1>This is an example of good case.</h1>

问题可以通过将所有标签更改为小写来轻松解决。

属性名称必须为小写

[edit | edit source]

遵循将所有标签写成小写的模式,所有属性名称也必须为小写。

<p CLASS="specialText">Important Notice</p>

正确的标签很容易创建。

<p class="specialText">Important Notice</p>

属性值必须加引号

[edit | edit source]

一些 HTML 值不需要在它们周围加引号。它们会被浏览器理解。

<table border=1 width=100%>
</table>

XHTML 要求所有属性都加引号。即使数字、百分比和十六进制值也必须出现在引号中,才能被视为正确的 XHTML 文档的一部分。

<table border="1"  width="100%">
</table>

属性不能最小化

[edit | edit source]

HTML 允许某些属性以简写形式编写,例如 selected 或 noresize。

<form>
   <input checked ... />
   <input disabled ... />
</form>

使用 XHTML 时,属性最小化是被禁止的。相反,请使用语法x="x",其中 x 是以前被最小化的属性。

<form>
   <input checked="checked"  .../>
   <input disabled="disabled"  .../>
</form>

以下是最小化属性的完整列表。

  • checked
  • compact
  • declare
  • defer
  • disabled
  • ismap
  • nohref
  • noresize
  • noshade
  • nowrap
  • readonly
  • selected
  • multiple

name 属性被 id 属性替换

[edit | edit source]

HTML 4.01 标准为以下标签定义了 name 属性。a, applet, frame, iframe, img,map.

<a name="anchor">
<img src="banner.gif" name="mybanner" />
</a>

XHTML 已弃用 name 属性。改为使用 id 属性。但是,为了确保与当今浏览器的向后兼容性,最好同时使用 name 和 id 属性。

<a name="anchor" id="anchor" >
<img src="banner.gif" name="mybanner" id="mybanner"  />
</a>

随着技术的进步,最终将不再需要同时使用这两个属性,XHTML 1.1 彻底删除了 name 属性。

不支持与号

[edit | edit source]

与号在 XHTML 中是非法的。

<a href="home.aspx?status=done&amp;itWorked=false">Home &amp; Garden</a>

它们必须替换为等效的字符代码 &amp;

<a href="home.aspx?status=done&amp;amp;itWorked=false">Home &amp;amp; Garden</a>

图像 alt 属性是必需的

[edit | edit source]

由于 XHTML 旨在在不同类型的设备上查看,其中一些设备不支持图像,因此必须为所有图像包含 alt 属性。

<img src="titlebar.gif">

请记住,在 XHTML 中,img 标签必须包含一个关闭斜杠!

<img src="titlebar.gif" alt="title"  />

脚本和 CSS 必须转义

[编辑 | 编辑源代码]

内部脚本和 CSS 通常包含诸如&号和小于号之类的字符。

<script language="JavaScript">
   <!--
      document.write('Hello World!'); 
   //-->
</script>

如果使用内部脚本或 CSS,请将它们包含在标签内<![CDATA[]]>。这将标记它们为字符数据,不应该被解析。如果不使用这些标签,诸如 & 和 < 之类的字符将分别被视为字符实体的开始(如 &nbsp;)和标签(如 <b>)。这将导致页面行为不可预测,并且可能使代码无效。

此外,type 属性对于脚本是必需的。注释标签<!---->传统上用于隐藏与非兼容浏览器不兼容的 JavaScript 的标签不应该被包含在内。XML 标准规定,包含在注释标签中的文本可以完全从渲染的文档中排除,这将丢失所有包含在标签中的脚本。

<script type="text/javascript" language="javascript">
/*<![CDATA[*/
   document.write('Hello World!');
/*]]>*/
</script>

此外,document.write(); 在 XHTML 文档中不允许使用。必须使用节点创建方法,例如 document.createElementNS();。令人困惑的是,如果文档错误地以 text/html(HTML 文档的类型)而不是 application/xhtml+xml(XHTML 文档的类型)的 MIME 类型提供服务,document.write(); 似乎按预期工作。如果 MIME 类型是 text/html,则文档将被解析为 HTML,这允许使用 document.write();。将文档解析为 HTML 背离了将其写入 XHTML 的目的。

内部样式表必须进行类似的更改。

<style>
<!--
   .SpecialClass {
      color: #000000;
   }
-->
</style>

必须包含 type 属性,并且应使用 CDATA 标签。

<style type="text/css">
/*<![CDATA[*/
   .SpecialClass {
      color: #000000;
   }
/*]]>*/
</style>

由于脚本和 CSS 可能使 XHTML 文档变得复杂,因此强烈建议将它们分别放置在外部 .js 和 .css 文件中。然后可以从 XHTML 文档中链接到它们。

<script src="myscript.js" type="text/javascript" />

<link href="styles.css" type="text/css" rel="stylesheet" />

某些元素可能无法嵌套

[编辑 | 编辑源代码]

W3C 建议指出,某些元素可能不能包含在 XHTML 文档中的其他元素中,即使包含它们不会违反任何 XML 规则。受影响的元素列在下面。

元素 不能包含 ...
a a
pre big, img, object, small, sub, sup
button button, fieldset, form, iframe, input, isindex, label, select, textarea
label label
form form

何时转换

[编辑 | 编辑源代码]

到目前为止,将 HTML 文档转换为 XHTML 可能听起来很容易,但很乏味。您什么时候想将现有页面转换为 XHTML?在决定更改整个网站之前,请考虑以下问题。

  • 您是否希望您的页面能够轻松地在非传统支持互联网的设备上查看,例如 PDA 或支持 Web 的电话?这将是您网站未来目标吗? XHTML 是支持 Web 的便携式设备的首选语言。现在可能是您承诺创建一个全 XHTML 网站的好时机。
  • 您是否计划将来使用 XML? 如果是这样,XHTML 可能是开始的合乎逻辑的地方。如果您领导着一个习惯使用 HTML 的设计师团队,那么 XHTML 只需要一小步。对于初学者来说,学习 XHTML 可能比从头开始教他们所有关于 XML 的知识更容易。
  • 您的网站是否必须符合最新的 W3C 标准? 紧跟当前标准将使您的网站更加稳定,并帮助您在将来保持更新,因为您只需要对您的网站进行一些小的更改以升级到 XHTML 的最新版本,因为它们已获得 W3C 的批准。
  • 您是否需要将您的文档转换为其他格式? 作为有效的 XML 文档,XHTML 可以利用 XSL 转换为文本、普通 HTML、另一个 XHTML 文档或另一个 XML 文档。HTML 不能用于此目的。

如果您对上述任何问题的回答是肯定的,那么您可能应该将您的网站转换为 XHTML。

MIME 类型

[编辑 | 编辑源代码]

XHTML 1.0 文档应使用 MIME 类型 application/xhtml+xml 提供给可以接受这种类型的 Web 浏览器。XHTML 1.0 可以使用 MIME 类型 text/html 提供给不能接受 application/xhtml+xml 的客户端,前提是 XHTML 符合 [附录 C] 中的附加约束XHTML 1.0 规范。如果您无法将 Web 服务器配置为以不同的 MIME 类型提供文档服务,那么您可能不应该将网站转换为 XHTML。

您应该检查 XHTML 文档是否正确提供给支持 application/xhtml+xml 的浏览器,例如 Mozilla Firefox。使用“页面信息”验证类型是否正确。

XHTML 1.1 文档通常不向后兼容 HTML,不应使用 text/html 的 MIME 类型提供服务。[2]

转换帮助

[编辑 | 编辑源代码]

HTML Tidy

[编辑 | 编辑源代码]

在创建 HTML 时,很容易犯错误,例如遗漏结束标签或不正确嵌套标签。HTML Tidy 是一款很棒的应用程序,可用于纠正格式不良的 HTML 文档中的许多错误并将其转换为 XHTML。Tidy 还可以将丑陋的代码格式化为更易读的代码,包括 WYSIWYG 编辑器生成的代码。HTML Tidy 在遇到不确定如何修复的问题时无法生成干净的代码。在这种情况下,它将生成错误以告知您错误位于文档中的哪个位置。

HTML Tidy 可以解决的一些问题的示例

  • 缺少或不匹配的结束标签。
  • 不正确嵌套的元素。
  • 混合的标签。
  • 在标签的结尾添加缺少的“/”。
  • 在列表中插入缺少的标签。
  • 在属性值周围添加缺少的引号。
  • 能够根据代码插入正确的 DOCTYPE 值(也可以识别和报告专有元素)。

HTML Tidy 也可以使用各种命令行参数在运行时进行自定义。它能够缩进代码以使其更易读,以及使用 CSS 将 FONT、NOBR 和 CENTER 标签替换为样式标签和规则。Tidy 也可以通过在配置文件中声明新标签来学习新标签。

您可以在 W3C 的 HTML Tidy 网站上阅读有关 HTML Tidy 的更多信息,以及下载应用程序作为二进制文件或获取源代码。有几个网站提供 HTML Tidy 作为在线服务,包括 W3CSite Valet.

您也可以使用 http://validator.w3.org/ 上提供的验证器来验证您的页面。

何时不转换

[编辑 | 编辑源代码]

如果您的网页始终以 text/html 的 MIME 类型提供服务,则不应该转换您的网页。确保您知道如何配置服务器或服务器端脚本以执行 HTTP 内容协商,以便支持 XHTML 的浏览器接收标记为 application/xhtml+xml 的 XHTML。如果您无法设置内容协商,请坚持使用 HTML 4.01。使用主流浏览器查看网页的人将无法区分有效的 HTML 4.01 网页和有效的 XHTML 1.0 网页。

确保您对网站运行的自动化测试模拟来自支持 XHTML 的浏览器(例如 Mozilla Firefox)和不支持 XHTML 的浏览器(例如 Internet Explorer 6.0)的连接。如果您在网站上使用 Javascript,这一点尤其重要。如果维护两个测试套件太耗时,请不要转换。

请记住,有效的 HTML 4.01 Strict 文档通常比有效的 XHTML 1.0 Transitional 文档更容易转换为 XHTML 1.1。有效的 HTML 4.01 Strict 文档只能包含 XHTML 1.1 中有效的元素,尽管可能需要更改一些属性。另一方面,有效的 XHTML 1.0 Transitional 文档可能包含十种元素类型和十几个在 XHTML 1.1 中无效的属性。仅 XHTML 1.0 Transitional 的 body 元素就有六个在 XHTML 1.1 中不支持的属性。

不要因为有人含糊其辞地说 不良实践 而被迫使用 XHTML。要求他们具体说明 不良实践 的含义。如果他们开始谈论内容和表现的分离,他们混淆了 HTML 和 XHTML 之间的区别以及 Transitional 和 Strict 文档类型之间的区别。XHTML 1.0 Transitional 和 HTML 4.01 Transitional 都允许您在同一个文档中混合表现和内容,即它们允许这种不良实践。HTML 4.01 Strict 和 XHTML 1.0 Strict 强制您将大部分表现(但不是全部)移到 CSS 或等效语言中。所有四种文档类型都允许您使用内嵌样式表,而真正的分离要求将所有 CSS 和 Javascript 移到外部文件中。

XHTML 1.1

[编辑 | 编辑源代码]

XHTML 1.0 适用于大多数目的。它提供了分离内容和表现的选项,这满足了大多数网页作者的需求。XHTML 1.1 强制执行内容和表现的分离。所有已弃用的元素和属性都已删除。它还删除了两个在 XHTML 1.0 中保留的属性,仅为了向后兼容。lang 属性被 xml:lang 替换,nameid 替换。最后,它添加了对东亚文档中出现的 ruby 文本的支持。

XHTML 1.1 的 DOCTYPE 是

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

模块化

[编辑 | 编辑源代码]

XHTML 的模块化,或 XHTML m12n,提供了关于自定义 XHTML 的建议,无论是将 XHTML 子集集成到其他 XML 应用程序中,还是扩展 XHTML 元素集。该框架定义了两个过程

  • 如何将元素和属性分组到“模块”中
  • 如何组合模块以创建新的标记语言

由此产生的语言,W3C 称之为“XHTML 宿主语言”,基于熟悉的 XHTML 结构,但针对特定目的进行了专门化。XHTML 1.1 是宿主语言的一个例子。它是通过将 XHTML 可用的不同元素分组来创建的。

XHTML 变体虽然在理论上是可能的,但并没有得到广泛采用。开发宿主语言的工作仍在继续,但它们的细节超出了本文的讨论范围。

无效的 XHTML

[编辑 | 编辑源代码]

只要文档格式正确,支持 XHTML 的浏览器就可以渲染无效的 XHTML 文档。下面给出了一个简单的示例

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>Invalid XHTML</title>
  </head> 
  <body>
     <p>This sentence contains a <p>nested paragraph.</p></p>
  </body>
</html>

将示例保存为 invalid.xhtml(.xhtml 扩展名很重要)并使用 Mozilla Firefox 打开页面。尽管该页面无效,但它仍然可以渲染。


XHTML 代表可扩展超文本标记语言。XHTML 与 HTML 非常相似,但更严格且更容易解析。XHTML 文档必须像普通 XML 一样格式正确。XHTML 允许模块化。XHTML 代码必须根据精确的规范编写,这与 HTML 不同,在 HTML 中,浏览器会忽略诸如缺少结束标记之类的简单错误。遵守这些严格的规范实际上使 XHTML 比 HTML 更灵活。只有在文档的 MIME 类型为 application/xhtml+xml 时,才能获得本总结中描述的好处。XHTML 文档可以进行验证,但大多数浏览器选择不进行验证。

华夏公益教科书