XML 显示

显示 XML 文档

原始 XML 文件可以在大多数现代 Web 浏览器中直接打开，但除非你提供了特定指令，否则它们不会像样式化的网页那样显示。

在浏览器中查看原始 XML

当你在 Chrome、Firefox 或 Edge 等浏览器中直接打开一个格式良好的 XML 文件（如下面的 note.xml 示例）时，它通常会将其渲染为交互式、带颜色高亮显示的树状结构：

<?xml version="1.0" encoding="UTF-8"?>
<note importance="high">
  <to>Tove</to>
  <from>Jani</from>
  <heading>Reminder</heading>
  <body>Don't forget me this weekend!</body>
</note>

你通常可以使用标签旁边的 (+) 或 (-) 图标（或类似的指示器）来展开和折叠元素。这种默认视图有助于可视化 XML 的层级结构。

要查看 XML 文件的实际原始文本内容，可以使用浏览器的“查看页面源代码”或等效选项（通常通过右键点击页面找到）。

注意：浏览器行为可能会略有不同。一些老版本浏览器或特定配置可能只会显示文本内容，或者以不同的方式处理 XML。

查看无效的 XML 文件

XML 对格式良好性有严格的规则（例如，所有标签必须闭合、正确嵌套、属性使用引号）。如果你尝试打开一个包含错误的 XML 文件，浏览器通常会显示错误消息而不是树状视图。

错误示例：<message>Hello</em>（标签不匹配）。

错误消息通常会指示找到的第一个错误的位置（行号、位置）和类型。这对于调试很有帮助。

可以考虑使用 XML 验证器（在线工具或集成到代码编辑器中）来检查你的 XML 是否格式良好，并在适用时根据模式（DTD 或 XSD）验证其有效性。

为什么 XML 不像 HTML 那样显示？

XML 的主要设计目的是结构化和承载数据，而不是规定其呈现方式。

与 HTML 不同，HTML 中的标签如 <h1>、<p>、<img> 对浏览器有预定义的含义（如何渲染它们），而 XML 标签是由作者定义的。XML 中的 <table/> 标签本质上并不意味着要显示一个数据表；它可能代表一件家具。

由于浏览器不知道自定义 XML 标签的预期含义或显示样式，它们默认显示原始结构，如果文件格式不良好则显示错误。

样式化和显示 XML 数据的方法

要以用户友好的格式（如网页）显示 XML 数据，你需要提供呈现指令。常用方法包括：

1. 使用 XSLT 将 XML 转换为 HTML： 正如 XSLT 章节所讨论的，你可以编写一个 XSLT 样式表将你的 XML 结构转换为标准 HTML。这种转换可以在服务器端进行，然后再将 HTML 发送给浏览器，或者在客户端（使用 <?xml-stylesheet ...?> 处理指令）在浏览器内部进行。生成的 HTML 可以使用 CSS 进行样式设置。
2. 使用 JavaScript 解析 XML 并渲染 HTML： 使用 JavaScript 获取 XML 数据（使用 fetch API）。将 XML 解析为 DOM 对象（使用 DOMParser）。使用 JavaScript DOM 操作方法根据 XML 数据动态创建 HTML 元素，并将其注入网页。这种方法提供了最大灵活性，在现代 Web 应用程序中很常见（通常使用 JSON 代替 XML 作为数据格式）。
3. 直接使用 CSS 样式化 XML： 你可以使用 <?xml-stylesheet ...?> 处理指令将 CSS 样式表直接链接到 XML 文档。现代浏览器将把 CSS 规则应用于相应的 XML 元素。
4. 服务器端渲染： 服务器端应用程序读取 XML 数据（从文件或数据库），对其进行处理，并生成一个包含该数据的完整 HTML 页面，然后将其发送到浏览器。

示例：使用 CSS 样式化 XML

虽然对于复杂布局来说，CSS 样式化不如 XSLT 或 JavaScript 渲染灵活，但 CSS 可以用于在浏览器中直接对 XML 文档进行基本样式设置。

创建 XML 文件 (cd_catalog.xml)：

<?xml version="1.0" encoding="UTF-8"?>
<!-- Link the CSS file -->
<?xml-stylesheet type="text/css" href="cd_catalog.css"?>
<catalog>
  <cd available="true">
    <title>Empire Burlesque</title>
    <artist>Bob Dylan</artist>
    <country>USA</country>
    <company>Columbia</company>
    <price>10.90</price>
    <year>1985</year>
  </cd>
  <cd available="false">
    <title>Hide your heart</title>
    <artist>Bonnie Tyler</artist>
    <country>UK</country>
    <company>CBS Records</company>
    <price>9.90</price>
    <year>1988</year>
  </cd>
  <!-- ... more cd elements ... -->

创建 CSS 文件 (cd_catalog.css)：

/* Apply styles directly to XML elements */
@charset "UTF-8";

catalog {
  display: block; /* Treat catalog like a block container */
  width: 80%;
  margin: 20px auto;
  font-family: Arial, sans-serif;
}

cd {
  display: block; /* Each CD on a new line */
  margin-bottom: 15px;
  padding: 10px;
  border: 1px solid #ccc;
  background-color: #f9f9f9;
}

/* Style unavailable CDs differently */
cd[available="false"] {
  opacity: 0.6;
  background-color: #eee;
  border-style: dashed;
}

title {
  display: block;
  font-size: 1.2em;
  font-weight: bold;
  color: #333;
  margin-bottom: 5px;
}

artist {
  display: block;
  font-size: 1.1em;
  color: #555;
  margin-bottom: 8px;
}

country, company, price, year {
  display: inline; /* Display these on the same line */
  margin-right: 15px;
  font-size: 0.9em;
  color: #777;
}

/* Add pseudo-elements for labels (optional) */
country::before { content: "Country: "; font-weight: bold; }
company::before { content: "Company: "; font-weight: bold; }
price::before   { content: "Price: $"; font-weight: bold; }
year::before    { content: "Year: "; font-weight: bold; }

当你在现代浏览器中打开 cd_catalog.xml 时，它应该会应用 cd_catalog.css 中定义的样式。选择器作用于 XML 元素名称和属性，就像在 HTML 中一样。

使用 CSS 样式化 XML 的局限性：

不能改变文档结构（添加/移除/重新排序元素）。
不能轻易地仅凭 CSS 生成复杂内容（如从扁平数据生成表格）。
浏览器兼容性现在通常很好，但历史上可能存在怪异行为。

对于显著的结构性变化或复杂呈现逻辑，XSLT 或 JavaScript 渲染是更强大的工具。