XML 在浏览器中的显示

本章定位 ：理解浏览器如何直接呈现原始 XML 文档，以及使用 CSS 和 XSLT 两种方式美化 XML 的显示效果，建立"数据与表现分离"的完整认知。

定义与作用

原始 XML 文档被浏览器打开时，浏览器并不知道如何"呈现"这些自定义标签——<to> 是收件人还是目的地？<price> 应该加粗还是标红？

XML 在浏览器中的显示 解决两个核心问题：

默认显示 ：浏览器对 XML 的结构化渲染（折叠/展开、语法高亮）
样式化显示 ：通过 CSS 或 XSLT 为 XML 元素绑定视觉样式，使 XML 数据以人类友好的方式呈现

关键理念：XML 本身 不携带任何显示信息 。这正是"数据与表现分离"的体现。

核心原理：XML → 浏览器显示流程

浏览器收到 XML 后有三条路径：(1) 直接渲染为语法高亮的树形结构；(2) 如果 XML 声明了 CSS 样式表，则按 CSS 规则渲染；(3) 如果声明了 XSLT 样式表，则先执行 XSLT 转换再显示结果 HTML。

语法/结构要点

浏览器默认 XML 显示

特性	说明
颜色编码	标签、属性、值、文本使用不同颜色区分
可展开/折叠	父元素前的 `+`/`-` 图标可展开或折叠子元素
嵌套缩进	自动按层级缩进，结构一目了然
错误提示	格式不正确的 XML 会显示错误信息（而非渲染）
声明显示	XML 声明 `<?xml ...?>` 以特殊格式显示

CSS 样式化 XML

使用 <?xml-stylesheet?> 处理指令关联 CSS：

属性	值	说明
`type`	`"text/css"`	声明样式表类型为 CSS
`href`	相对或绝对路径	指向 CSS 文件

XSLT 转换显示

使用 <?xml-stylesheet?> 处理指令关联 XSLT：

属性	值	说明
`type`	`"text/xsl"`	声明样式表类型为 XSLT
`href`	相对或绝对路径	指向 XSL 文件

处理指令的放置规则

<?xml-stylesheet?> 必须放在 XML 声明之后、根元素之前。

<?xml version="1.0" encoding="UTF-8"?>
<!-- 放这里 — 声明和根元素之间 -->
<?xml-stylesheet type="text/css" href="style.css"?>
<root>
  ...
</root>

完整示例

场景说明

飞翔科技的 UI 设计师黄俪需要向产品经理展示一个"2026年Q2项目清单"。数据用 XML 存储，她需要三种展示方式供产品团队选择。

操作前：原始 XML

projects.xml — 直接用浏览器打开，只能看到默认的树形结构。

<?xml version="1.0" encoding="UTF-8"?>
<projects>
  <project id="P001">
    <name>智能工单系统</name>
    <owner>大翔</owner>
    <deadline>2026-05-15</deadline>
    <status>进行中</status>
    <budget>500000</budget>
  </project>
  <project id="P002">
    <name>客户画像平台</name>
    <owner>白歌</owner>
    <deadline>2026-06-30</deadline>
    <status>规划中</status>
    <budget>800000</budget>
  </project>
  <project id="P003">
    <name>移动端适配</name>
    <owner>小崔</owner>
    <deadline>2026-04-20</deadline>
    <status>已完成</status>
    <budget>300000</budget>
  </project>
</projects>

浏览器默认显示效果：语法高亮的 XML 树，带 +/- 展开按钮，可读性尚可但不适合会议演示。

方式一：CSS 样式化

黄俪创建一个 CSS 文件，赋予每个元素合适的块级和行内布局。

project-style.css ：

projects {
  font-family: "Microsoft YaHei", sans-serif;
  display: block;
  max-width: 800px;
  margin: 20px auto;
  background: #f5f5f5;
  padding: 20px;
}

project {
  display: block;
  background: white;
  margin-bottom: 15px;
  padding: 15px;
  border-left: 5px solid #04AA6D;
  border-radius: 4px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

name {
  display: block;
  font-size: 18px;
  font-weight: bold;
  color: #333;
}

name:before {
  content: "项目名称：";
  color: #888;
  font-weight: normal;
}

owner, deadline, status, budget {
  display: inline-block;
  margin-right: 20px;
  font-size: 14px;
  color: #666;
}

owner:before {
  content: "负责人：";
  color: #aaa;
}

deadline:before {
  content: "截止：";
  color: #aaa;
}

status:before {
  content: "状态：";
  color: #aaa;
}

status:contains("已完成") {
  color: #04AA6D;
  font-weight: bold;
}

status:contains("进行中") {
  color: #ff9800;
  font-weight: bold;
}

budget:before {
  content: "预算：¥";
  color: #aaa;
}

projects_css.xml （含样式表引用的版本）：

<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/css" href="project-style.css"?>
<projects>
  <project id="P001">
    <name>智能工单系统</name>
    <owner>大翔</owner>
    <deadline>2026-05-15</deadline>
    <status>进行中</status>
    <budget>500000</budget>
  </project>
  <project id="P002">
    <name>客户画像平台</name>
    <owner>白歌</owner>
    <deadline>2026-06-30</deadline>
    <status>规划中</status>
    <budget>800000</budget>
  </project>
  <project id="P003">
    <name>移动端适配</name>
    <owner>小崔</owner>
    <deadline>2026-04-20</deadline>
    <status>已完成</status>
    <budget>300000</budget>
  </project>
</projects>

方式二：XSLT 转换

黄俪又写了一个 XSLT 样式表，将 XML 转换为更丰富的 HTML 表格。

project-table.xsl ：

<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0"
  xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

  <xsl:output method="html" encoding="UTF-8" indent="yes"/>

  <xsl:template match="/">
    <html>
      <head>
        <title>飞翔科技 - 2026年Q2项目清单</title>
        <style>
          table { border-collapse: collapse; width: 100%; font-family: "Microsoft YaHei"; }
          th, td { border: 1px solid #ddd; padding: 12px; text-align: left; }
          th { background: #04AA6D; color: white; }
          .done { color: #04AA6D; font-weight: bold; }
          .progress { color: #ff9800; font-weight: bold; }
          .plan { color: #2196F3; font-weight: bold; }
        </style>
      </head>
      <body>
        <h2>飞翔科技 - 2026年Q2项目清单</h2>
        <table>
          <tr>
            <th>编号</th><th>项目名称</th><th>负责人</th>
            <th>截止日期</th><th>状态</th><th>预算(元)</th>
          </tr>
          <xsl:for-each select="projects/project">
            <tr>
              <td><xsl:value-of select="@id"/></td>
              <td><xsl:value-of select="name"/></td>
              <td><xsl:value-of select="owner"/></td>
              <td><xsl:value-of select="deadline"/></td>
              <td>
                <xsl:choose>
                  <xsl:when test="status='已完成'">
                    <span class="done"><xsl:value-of select="status"/></span>
                  </xsl:when>
                  <xsl:when test="status='进行中'">
                    <span class="progress"><xsl:value-of select="status"/></span>
                  </xsl:when>
                  <xsl:otherwise>
                    <span class="plan"><xsl:value-of select="status"/></span>
                  </xsl:otherwise>
                </xsl:choose>
              </td>
              <td><xsl:value-of select="budget"/></td>
            </tr>
          </xsl:for-each>
        </table>
      </body>
    </html>
  </xsl:template>
</xsl:stylesheet>

projects_xslt.xml （含 XSLT 引用的版本）：

<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/xsl" href="project-table.xsl"?>
<projects>
  <!-- 同样的数据 -->
</projects>

操作结果

显示方式	效果	适合场景
原始 XML	彩色高亮、可折叠树	开发者调试
CSS 样式化	卡片式布局、带颜色区分	简单场景快速预览
XSLT 转换	完整 HTML 表格、条件样式	正式汇报、支持复杂排版

样式化后，浏览器呈现的是美观的卡片或表格，而非枯燥的 XML 标签。整份"项目清单"可直接用于团队周会投屏。

易错场景

处理指令位置错误

<!-- 错误：处理指令放在根元素之后 -->
<projects>
  <?xml-stylesheet type="text/css" href="style.css"?>
  ...
</projects>

后果：样式表不生效，浏览器按默认方式显示。正确：<?xml-stylesheet?> 必须放在 XML 声明之后、根元素之前。

CSS 中拼错元素名大小写

/* 错误：XML 元素名是大小写敏感的 */
Project { display: block; }  /* 匹配不了 <project> */

XML 严格区分大小写，CSS 选择器必须与 XML 元素名 完全一致 。

用浏览器打开错误 XML 文件

当 XML 文档有语法错误时（如标签未闭合、大小写不一致），浏览器会直接显示错误信息，而不是"尽力渲染"。这与 HTML 形成了鲜明对比。

<?xml version="1.0"?>
<note>
  <to>大翔</To>  <!-- 标签大小写不匹配 -->
</note>

浏览器显示：error on line 3 at column 6: Opening and ending tag mismatch: to line 0 and To

面试考点

考点	参考答案要点
浏览器如何显示原始 XML？	默认渲染为语法高亮的树形结构，支持折叠/展开。浏览器不"理解"自定义标签的含义，只呈现结构
`<?xml-stylesheet?>` 的作用和位置？	将 XML 关联到 CSS 或 XSLT 样式表。必须放在 XML 声明之后、根元素之前
CSS 和 XSLT 方式各有什么优劣？	CSS 简洁但只能做视觉样式；XSLT 可以做结构调整（排序、过滤、条件渲染），功能更强大但复杂
XML 有错误时浏览器如何处理？	显示错误信息并停止处理，不像 HTML 那样"尽力渲染"。这是 W3C 规范的严格要求——XML 解析器必须是"严格"的