如何在两种流行的浏览器中显示 XML 文档，这里提供了一种实用的程序渐进的说明。作者演示了 Internet Explorer 5.5 和 Netscape 6.0 浏览器的缺省显示行为，并说明了如何将样式表应用于定制显示。详细介绍了用于创建 XML 文档显示的样本代码。一些使用缺省、 CSS 和 XSL 造型方法的简单示例帮助阐明在使用样式表中的选项。阅读了这篇文章后，您就可以使用缺省和定制显示方法来设置 XML 文档的浏览器显示，避免在过程中出现一般的缺陷。本文改编自 "XML at Work"，由 Intias Corporation 举办的为期两天的课程。
一旦有了带 .xml 扩展名的 XML 文档后，通常希望在浏览器中查看它。人们很自然地有“只使用浏览器指向文档就能产生预料中的可读视图”这种想法。当新使用 XML 的开发者尝试显示他们怀着极大热情创建的 XML 文档时，他们常常会被产生的结果所震惊。我们已经看过在显示的文档与开发者想象将出现在浏览器窗口中的样子完全不一样时出现的怀疑态度。当相同的“标准”XML 内容在不同浏览器显示中不同时，就会产生混淆。
尽管一旦理解它的话，在浏览器中显示 XML 的处理是很简单的，但缺乏经验的人经常在导致产生意外结果的错误假设或忘记一些重要细节的情况下操作。请继续读下去，了解有关那些意外的，但属正常行为的说明，随后还有一些特定的步骤，可以帮助您筹划 XML 文档，使浏览器能产生可预料 -- 并且合理的 - 的图像。
浏览器缺省显示的变化
因为 XML 将内容与表示分离出来，所以 XML 文档本身不包含任何显示信息。您需要通过样式表明确提供显示信息。在缺少样式表的情况下，浏览器尝试使用它们的缺省显示技术来处理 XML 文档，这样的话，浏览器与浏览器之间就会有一点差异。因为 XML 文档中的每个元素都可以由用户定义，所以让 XML 标准系列定义缺省显示不太可行。浏览器制造商可以自由地提供他们自己的缺省显示格式，这就是为什么在没有用户定义的相关样式表时，相同的 XML 文档在不同的浏览器上看上去就不一样。（如果希望控制用户在浏览器中查看文档的方式，提供造型指令越发重要了。）
XML 文件正确的命名和放置
要使 XML 文档能在浏览器窗口中正确显示，至少要有三个合理连接和安排的项：保存内容的 XML 文档、指定显示参数的样式表，以及浏览器。不正确的命名、放置或对那些文件的引用会使缺乏经验的人陷入困境。
要记住在创建和显示 XML 文档时使用正确的文件扩展名：
.xml ，用于 XML 内容文件
.css，用于级联样式表
.xsl，用于 XSL 样式表
确保所有文件的名称都与每个文件内部的其声明和引用一致（请参阅侧栏新手注意事项）。
新手注意事项
尽管可以将 XML 内容文件和它们相关的样式表放在任何地方（如果引用正确），但初学者还是应该将它们全部放在同一个目录中。
显示的步骤
这里是在浏览器中以所需的形式显示 XML 文档的基本步骤。
决定文档的显示机制。有许多选项存在，但它们分为以下三类：
对 .xml 文档使用浏览器的缺省显示机制：Netscape Navigator 6.0+ 显示除去了所有 Tab 和换行标记的文档。缺省情况下，IE 5.5 显示 XML 文档可单击、可扩展的树状结构及其元素数据。
使用 CSS，它同时受 IE 5.5 和 Netscape 6.0 支持。
使用 XSL，在写这篇文章时只受 IE 5.5（以及其它更高级的浏览器）支持。很明显，这意味着如果希望一般用户能根据样式表显示 XML 文档的话，在目标观众的大多数流行浏览器支持 XSL 之前必须使用 CSS。
获得能满足需要的与 XML 兼容的浏览器。如今有一些这样的浏览器存在，但兼容性程度有所区别。也可以在独立于浏览器的查看器（例如，在参考资料中提到的 IBM XML 查看器）中显示 XML 文档。在本文中，我们使用 IE5 和 Netscape 6.0，但您可以尝试任何与 XML 兼容的浏览器。我们将部分介绍 Netscape 6.0 对比以前版本，因为它支持基于 XML 的用户界面语言 (XUL) 并增加了定制能力。
使用浏览器的缺省样式打开 .xml 内容文件。请注意显示的缺省格式的特性以及每个浏览器是如何以自己的方式显示同一个文档的。
创建或提供一个适当的样式表。这意味着确定和指定如何格式化和显示 XML 文档的各个元素。在本文的稍后部分，我们将提供一个样式表示例，并演示该过程。如果需要使用样式表的更详细指令，请尝试 developerWorks 教程之一（请参阅参考资料）。
将样式表与 XML 文档关联起来。
打开已和样式表正确关联的 XML 文档。
将浏览器的显示与基于样式表已期望得到的结果进行比较。按需要调整样式表。
示例与样本：使用缺省、CSS 和 XSL 造型在两种浏览器中显示 XML 文档
仔细查看示例，了解如何确切地应用这些步骤。
准备 XML 文档
从 XML 内容文档开始。示例文档是葡萄酒名单中的一段，有两项，一个是红酒一个是白酒。将清单 1 的内容复制到文本编辑器中，使用扩展名 .xml 保存它，然后就可以执行这些步骤并将结果与我们的进行比较了。
清单 1. 准备显示的简短 XML 葡萄酒名单
<?xml version="1.0" encoding="UTF-8"?>
<wineList>
<wine>
<name> Fife </name>
<year> 1996 </year>
<type> Cabernet Sauvignon </type>
</wine>
<wine>
<name> BV </name>
<year> 1997 </year>
<type> Chardonnay </type>
</wine>
</wineList>
用浏览器缺省外观打开 .xml 文件
启动浏览器。在浏览器中，选择“文件>打开”，然后指定 XML 葡萄酒名单文档。您在浏览器中看到了什么？这就是浏览器的缺省显示。
如果使用的是 Netscape 6.0，看到的结果类似于图 1。如果在 IE5 中打开葡萄酒名单，看到的结果应该类似于图 2。请注意，Navigator 的缺省视图将 XML 内容显示为连续出现的文本，而 IE5 将文档显示为可扩展的元素树状结构。
任何一个缺省显示都不是您希望的最终显示格式。需要进一步通过样式表指定文档的外观。继续阅读下去，了解最小样式表（同时以 CSS 和 XSL 表示）如何影响两种浏览器中产生的显示。
图 1. 无样式表时，清单 1 在 Netscape Navigator 6.0 的缺省外观
图 2. Internet Explorer 5.5 以其缺省外观显示同一文档
为 XML 文档创建样式表
可以使用任何文本编辑器或造型工具来创建样式表（如果希望使用样式表的详细指令，请参阅参考资料）。为简单起见，我们在清单 2 和清单 3 中提供的是迷你 CSS 和 XSL 样式表的样本，可以进一步对它改进或替换。
清单 2. 葡萄酒名单 XML 文档的迷你 CSS 样式表
wine{display:block;color:blue; font-style:italic;padding-bottom:12pt}
清单 3. 葡萄酒名单 XML 文档的迷你 XSL 样式表
<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/TR/WD-xsl">
<xsl:template match="/">
<xsl:apply-templates select="//wineList/wine">
</xsl:template>
<xsl:template match="wine">
<DIV STYLE="color:blue">
<xsl:value-of select="name">
<xsl:value-of select="year">
<xsl:value-of select="type"> <BR></BR>
</DIV>
</xsl:template>
</xsl:stylesheet>
将样式表与 XML 文档相关联
为使样式表能够影响 XML 文档的显示，必须将选定的样式表与基本 XML 文档／内容相关联。在该例中，我们称样式表为 wineList.css 和 wineList.xsl。在 .xml 葡萄酒名单文件样式表 href 语句中输入样式表的名称（从清单 1 中创建的，紧接在 <?xml+ICY-> 头之前，如清单 4 和清单 5 所示，以 burgundy 类型着重显示。）
清单 4. 关联 CSS 头
<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet href="wineList.css" type="text/css"?>
<wineList> +ICY- </wineList>
清单 5. 关联 XSL 头
<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet href="wineList.xsl" type="text/xsl"?>
<wineList> +ICY- </wineList>
重新在浏览器中打开文件，查看添加了样式表的结果
现在重新打开 XML 文件，看看在关联了覆盖浏览器缺省表示和显示的样式表后，浏览器中是什么样子。如果使用的是 Navigator 6，看到的结果和图 3 中上面一行中的一个图像类似（如果使用的样式表和 清单 3 中提供的相似的话。）如果是在 IE5 中打开 XML 文档（现在引用了样式表），结果就和图 3 中下面一行中的一个图像类似。
您可以看到，图 3 中左侧的图像中，两种浏览器都支持 CSS。目前，如您在图 3 中右侧的图像中看到的那样， Internet Explorer 支持 XSL；Netscape 在其缺省视图中显示 XSL 样式的文档，因为 Netscape Navigator 还不能解释 XSL 样式表。
图 3. 两种浏览器使用 CSS 和 XSL 显示的比较
使用 CSS 使用 XSL
Netscape Navigator 6 (CSS)
Netscape Navigator 6 (XSL)
Explorer 5 (CSS)
Explorer 5 (XSL)
结束语
现在您已知道了当前的 Netscape 和 Explorer 浏览器是如何处理 XML 文档的，您所了解的知识可以让您自己在浏览器中显示 XML 文档来进行测试，以及准备 XML 文档使它可以被用户联机查看。
参考资料
了解如何登记参加“XML at work”，一个由 Intias Corporation 举办的为期两天的介绍性课程，由本文作者所设计。
可以在 xmlsoftware.com 上 James Tauber 和 Linda van den Brink 有关许多浏览器和／或与浏览器无关的查看器清单中看到更多的显示选项。
在 dW 教程和其它联机培训所提供的内容中学习如何创建和应用 XSL 样式表。
深入研究 W3C XSL 规范。
查看 W3C CSS 规范的源码。
在 developerWorks XML 教程简介中查明 XML 的基本信息；这个教程需要 45 分钟的时间来完成。
从 alphaWorks 下载 XML 查看器。
下载最新的 Netscape 6 文件。
[返回] 中文XML论坛 - 专业的XML技术讨论区 →
XML.ORG.CN讨论区 - XML技术 → 『 DTD/XML Schema 』 → 从 XML 内容到 HTML 显示
(订阅本版)
2004/11/13 14:59:00
顶端 
从 XML 内容到 HTML 显示(7846字) － anchen0617，2004年11月13日
新浪微博
