XSLT输出HTML需定义xsl:output method="html"，通过模板匹配XML节点生成HTML结构，利用xsl:value-of提取数据，xsl:attribute设置动态属性，并可嵌入link和script标签引入CSS与JavaScript，实现完整网页生成。
XSLT要输出HTML，其核心在于将XML数据结构通过定义好的转换规则，映射并生成符合HTML语法的标记语言。简单来说，它就像一个模板引擎，你告诉它看到什么样的XML数据就生成什么样的HTML结构。
解决方案
要让XSLT输出HTML，你需要三样东西：一份XML源文档、一份XSLT样式表、以及一个XSLT处理器。
首先，在XSLT样式表的根元素
xsl:stylesheet或
xsl:transform中，必须明确指定输出方法为HTML。这通过
xsl:output元素来完成：
<xsl:output method="html" indent="yes"/>
这里的
method="html"是关键，它告诉处理器按照HTML的规则来序列化输出，比如空元素（如
<br>）会输出为
<br>而不是
<br/>，并且会处理HTML实体。
indent="yes"则让输出的HTML更易读。
立即学习“前端免费学习笔记（深入）”；
接着，你需要在XSLT样式表中编写模板（
xsl:template）。这些模板会根据XPath表达式匹配XML文档中的节点，然后生成相应的HTML结构。
例如，一个最基本的转换可能长这样：
XML源文档 (data.xml):
<bookstore>
<book category="cooking">
<title lang="en">Everyday Italian</title>
<author>Giada De Laurentiis</author>
<year>2005</year>
<price>30.00</price>
</book>
<book category="web">
<title lang="en">Learning XML</title>
<author>Erik T. Ray</author>
<year>2003</year>
<price>39.95</price>
</book>
</bookstore>XSLT样式表 (transform.xslt):
<?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" indent="yes"/>
<xsl:template match="/">
<html>
<head>
<title>我的书店</title>
</head>
<body>
<h1>书店列表</h1>
<ul>
<xsl:apply-templates select="bookstore/book"/>
</ul>
</body>
</html>
</xsl:template>
<xsl:template match="book">
<li>
<strong><xsl:value-of select="title"/></strong> by
<xsl:value-of select="author"/> (<xsl:value-of select="year"/>) -
$<xsl:value-of select="price"/>
</li>
</xsl:template>
</xsl:stylesheet>处理结果 (HTML输出):
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>我的书店</title>
</head>
<body>
<h1>书店列表</h1>
<ul>
<li>
<strong>Everyday Italian</strong> by
Giada De Laurentiis (2005) -
$30.00
</li>
<li>
<strong>Learning XML</strong> by
Erik T. Ray (2003) -
$39.95
</li>
</ul>
</body>
</html>在这个例子中，
xsl:template match="/"匹配整个XML文档的根节点，然后生成HTML的
<html>,
<head>,
<body>结构。
xsl:apply-templates select="bookstore/book"则会找到所有
<book>节点，并为每个节点应用一个匹配的模板。第二个
xsl:template match="book"就是为每个
<book>节点生成一个
<li>列表项，并提取其中的
title,
author,
year,
price内容。
这套机制让我觉得XSLT有点像“声明式编程”的早期尝试，你不是告诉计算机“一步步怎么做”，而是告诉它“当看到这个结构时，应该变成那个结构”。
XSLT在生成HTML时如何处理各种元素和属性？
XSLT在生成HTML时，处理元素和属性的方式相当直接，但也需要一些技巧。基本上，任何不在XSLT命名空间（
xmlns:xsl="http://www.w3.org/1999/XSL/Transform"）内的元素，都会被原样输出到结果文档中。这就是为什么我们可以在
xsl:template内部直接写
<html>,
<head>,
<body>,
<h1>,
<ul>,
<li>等HTML标签。
对于属性，你可以直接在输出的HTML元素上写死属性，比如
<a href="index.html">。但更多时候，属性值是动态的，需要从XML源数据中提取。这时，我们使用
xsl:attribute元素。
例如，如果你想根据XML中的一个属性来设置HTML元素的属性：
XML:
<product id="p101" status="new"> <name>Awesome Gadget</name> </product>
XSLT:
<xsl:template match="product">
<div class="product-item">
<xsl:attribute name="data-id">
<xsl:value-of select="@id"/>
</xsl:attribute>
<xsl:attribute name="class">
product-item <xsl:value-of select="@status"/>
</xsl:attribute>
<h2><xsl:value-of select="name"/></h2>
</div>
</xsl:template>这里，我们通过
xsl:attribute name="data-id"来创建一个
data-id属性，其值来自XML的
@id属性。注意，
class属性演示了如何拼接静态文本和动态值。
此外，还有
xsl:element可以动态生成元素名称，虽然在生成固定HTML结构时不如直接写HTML标签常用，但在某些需要根据XML数据决定输出哪个HTML标签的场景下，它就很有用了。比如，如果XML里有个
<level>节点决定输出
<h1>还是
<h2>，
xsl:element就能派上用场。但话说回来，对于日常的HTML输出，直接嵌入HTML标签通常更直观、更易读。
XSLT转换HTML时如何处理特殊字符和编码问题？
处理特殊字符和编码是任何文本处理任务中都绕不开的话题，XSLT也不例外。当XSLT将XML数据转换为HTML时，它会默认对一些HTML的特殊字符进行转义，以确保输出的HTML是格式良好且安全的。例如，
<会被转义为
<，
>会变成
>，
&会变成
&。这是为了防止XML数据中的内容被浏览器误解析为HTML标签或实体。
然而，有时候你可能希望某些内容 不被 转义。最典型的例子就是当XML数据本身就包含了一段HTML片段，你希望这段HTML能直接插入到输出中，而不是被转义。这时，就需要用到
disable-output-escaping="yes"属性。这个属性可以加在
xsl:value-of或
xsl:text元素上。
例如：
XML:
<content> This is some <strong>rich</strong> text. </content>
XSLT (错误示范，默认转义):
<p><xsl:value-of select="content"/></p> <!-- 输出: <p>This is some <strong>rich</strong> text.</p> -->
XSLT (正确处理，不转义):
<p><xsl:value-of select="content" disable-output-escaping="yes"/></p> <!-- 输出: <p>This is some <strong>rich</strong> text.</p> -->
需要注意的是，
disable-output-escaping的使用应该非常谨慎，因为它可能会引入安全漏洞（如XSS攻击），如果XML源数据不可信，不建议随意使用。它本质上是告诉处理器“相信我，这段内容是安全的，直接输出”。
至于编码问题，
xsl:output元素上的
encoding属性可以用来指定输出HTML的字符编码，比如
encoding="UTF-8"。大多数现代Web应用都推荐使用UTF-8。如果XML源文档有声明编码，XSLT处理器通常会尊重它，并在转换过程中保持一致。如果输出HTML没有明确指定编码，浏览器可能会根据HTTP头或HTML的
<meta charset="...">标签来猜测。因此，在HTML的
<head>部分加入
<meta charset="UTF-8">是一个良好的实践，确保浏览器正确解析字符。我个人习惯总是在
xsl:output和 HTML 的
meta标签里都写上
UTF-8，这样能最大程度地避免乱码问题。
如何在XSLT生成的HTML中引入CSS和JavaScript？
在XSLT生成的HTML中引入CSS和JavaScript，其实和在普通HTML文件中引入它们没有本质区别。XSLT的任务只是“组装”出HTML结构，至于这个结构内部包含了什么链接或脚本，它并不会特别对待。
最常见的方法就是通过在XXSLT模板中直接输出相应的HTML标签：
-
引入CSS样式表： 你可以在HTML的
<head>
部分输出<link>
标签，指向你的CSS文件。<xsl:template match="/"> <html> <head> <title>我的页面</title> <link rel="stylesheet" type="text/css" href="/static/css/styles.css"/> <!-- 也可以引入外部CDN的CSS --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css"/> </head> <body> <!-- ... content ... --> </body> </html> </xsl:template> -
引入JavaScript脚本： 同样，在HTML的
<head>
或<body>
结束标签之前，输出<script>
标签。<xsl:template match="/"> <html> <head> <!-- ... CSS ... --> </head> <body> <!-- ... content ... --> <script src="/static/js/main.js"></script> <!-- 也可以引入外部CDN的JS --> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script> <!-- 内联脚本 --> <script> // 你的JavaScript代码 document.addEventListener('DOMContentLoaded', function() { console.log('页面已加载完毕！'); }); </script> </body> </html> </xsl:template>如果JavaScript代码需要动态地从XML数据中获取值，你可以在
<script>
标签内部使用xsl:value-of
来插入这些值，或者生成带有data-
属性的HTML元素，然后JavaScript去读取这些属性。<xsl:template match="product"> <div class="product-card" data-product-id="{@id}" data-price="{@price}"> <h2><xsl:value-of select="name"/></h2> <button onclick="addToCart(this)">添加到购物车</button> </div> </xsl:template> <!-- 在HTML的某个地方，比如body底部 --> <script> function addToCart(button) { const productId = button.closest('.product-card').dataset.productId; const price = button.closest('.product-card').dataset.price; console.log(`添加产品ID: ${productId}, 价格: ${price} 到购物车`); // 实际的购物车逻辑 } </script>
这种方式的优点是直观且符合Web标准。XSLT只负责把
<link>和
<script>标签“打印”出来，后续的资源加载和执行完全由浏览器负责。在我看来，XSLT在这里扮演的是一个高效的HTML骨架生成器，而真正的“活”和“美化”还是交给了CSS和JavaScript。这体现了关注点分离的原则，虽然XSLT本身在前端领域已经不那么主流，但这种思路在现代框架中依然随处可见。
