<blockquote>XSLT输出HTML需定义xsl:output method="html"，通过模板匹配XML节点生成HTML结构，利用xsl:value-of提取数据，xsl:attribute设置动态属性，并可嵌入link和script标签引入CSS与JavaScript，实现完整网页生成。</blockquote>
<p><img src="https://img.php.cn/upload/article/001/221/864/175704006473330.jpg" alt="xslt如何输出html？"></p>
<p>XSLT要输出HTML，其核心在于将XML数据结构通过定义好的转换规则，映射并生成符合HTML语法的标记语言。简单来说，它就像一个模板引擎，你告诉它看到什么样的XML数据就生成什么样的HTML结构。</p>
<h3>解决方案</h3>
<p>要让XSLT输出HTML，你需要三样东西：一份XML源文档、一份XSLT样式表、以及一个XSLT<a style="color:#f60; text-decoration:underline;" title="处理器" href="https://www.php.cn/zt/16030.html" target="_blank">处理器</a>。</p>
<p>首先，在XSLT样式表的根元素 <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;">xsl:stylesheet</pre>
登录后复制
</div> 或 <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;">xsl:transform</pre>
登录后复制
</div> 中，必须明确指定输出方法为HTML。这通过 <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;">xsl:output</pre>
登录后复制
</div> 元素来完成：</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:xml;toolbar:false;'><xsl:output method="html" indent="yes"/></pre>
登录后复制
</div><p>这里的 <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;">method="html"</pre>
登录后复制
</div> 是关键，它告诉处理器按照HTML的规则来序列化输出，比如空元素（如 <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;"><br></pre>
登录后复制
</div>）会输出为 <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;"><br></pre>
登录后复制
</div> 而不是 <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;"><br/></pre>
登录后复制
</div>，并且会处理HTML实体。<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;">indent="yes"</pre>
登录后复制
</div> 则让输出的HTML更易读。</p>
<p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p>
<p>接着，你需要在XSLT样式表中编写模板（<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;">xsl:template</pre>
登录后复制
</div>）。这些模板会根据XPath表达式匹配XML文档中的节点，然后生成相应的HTML结构。</p>
<p>例如，一个最基本的转换可能长这样：</p>
<p><strong>XML源文档 (data.xml):</strong></p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:xml;toolbar:false;'><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></pre>
登录后复制
</div><p><strong>XSLT样式表 (transform.xslt):</strong></p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:xml;toolbar:false;'><?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></pre>
登录后复制
</div><p><strong>处理结果 (HTML输出):</strong></p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:html;toolbar:false;'><!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></pre>
登录后复制
</div><p>在这个例子中，<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;">xsl:template match="/"</pre>
登录后复制
</div> 匹配整个XML文档的根节点，然后生成HTML的 <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;"><html></pre>
登录后复制
</div>, <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;"><head></pre>
登录后复制
</div>, <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;"><body></pre>
登录后复制
</div> 结构。<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;">xsl:apply-templates select="bookstore/book"</pre>
登录后复制
</div> 则会找到所有 <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;"><book></pre>
登录后复制
</div> 节点，并为每个节点应用一个匹配的模板。第二个 <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;">xsl:template match="book"</pre>
登录后复制
</div> 就是为每个 <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;"><book></pre>
登录后复制
</div> 节点生成一个 <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;"><li></pre>
登录后复制
</div> 列表项，并提取其中的 <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;">title</pre>
登录后复制
</div>, <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;">author</pre>
登录后复制
</div>, <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;">year</pre>
登录后复制
</div>, <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;">price</pre>
登录后复制
</div> 内容。</p>
<p>这套机制让我觉得XSLT有点像“声明式编程”的早期尝试，你不是告诉<a style="color:#f60; text-decoration:underline;" title="计算机" href="https://www.php.cn/zt/16013.html" target="_blank">计算机</a>“一步步怎么做”，而是告诉它“当看到这个结构时，应该变成那个结构”。</p>
<h3>XSLT在生成HTML时如何处理各种元素和属性？</h3>
<p>XSLT在生成HTML时，处理元素和属性的方式相当直接，但也需要一些技巧。基本上，任何不在XSLT命名空间（<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;">xmlns:xsl="http://www.w3.org/1999/XSL/Transform"</pre>
登录后复制
</div>）内的元素，都会被原样输出到结果文档中。这就是为什么我们可以在 <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;">xsl:template</pre>
登录后复制
</div> 内部直接写 <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;"><html></pre>
登录后复制
</div>, <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;"><head></pre>
登录后复制
</div>, <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;"><body></pre>
登录后复制
</div>, <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;"><h1></pre>
登录后复制
</div>, <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;"><ul></pre>
登录后复制
</div>, <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;"><li></pre>
登录后复制
</div> 等HTML标签。</p>
<p>对于属性，你可以直接在输出的HTML元素上写死属性，比如 <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;"><a href="index.html"></pre>
登录后复制
</div>。但更多时候，属性值是动态的，需要从XML源数据中提取。这时，我们使用 <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;">xsl:attribute</pre>
登录后复制
</div> 元素。</p>
<p>例如，如果你想根据XML中的一个属性来设置HTML元素的属性：</p>
<p><strong>XML:</strong></p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:xml;toolbar:false;'><product id="p101" status="new">
<name>Awesome Gadget</name>
</product></pre>
登录后复制
</div><p><strong>XSLT:</strong></p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:xml;toolbar:false;'><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></pre>
登录后复制
</div><p>这里，我们通过 <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;">xsl:attribute name="data-id"</pre>
登录后复制
</div> 来创建一个 <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;">data-id</pre>
登录后复制
</div> 属性，其值来自XML的 <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;">@id</pre>
登录后复制
</div> 属性。注意，<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;">class</pre>
登录后复制
</div> 属性演示了如何拼接静态文本和动态值。</p>
<div class="aritcle_card">
<a class="aritcle_card_img" href="/xiazai/code/10454">
<img src="https://img.php.cn/upload/webcode/000/000/020/176216580836240.jpg" alt="通吃客零食网整站 for Shopex">
</a>
<div class="aritcle_card_info">
<a href="/xiazai/code/10454">通吃客零食网整站 for Shopex</a>
<p>第一步】：将安装包中所有的文件夹和文件用ftp工具以二进制方式上传至服务器空间;(如果您不知如何设置ftp工具的二进制方式，可以查看：(http://www.shopex.cn/support/qa/setup.help.717.html)【第二步】：在浏览器中输入 http://您的商店域名/install 进行安装界面进行安装即可。【第二步】：登录后台，工具箱里恢复数据管理后台是url/sho</p>
<div class="">
<img src="/static/images/card_xiazai.png" alt="通吃客零食网整站 for Shopex">
<span>0</span>
</div>
</div>
<a href="/xiazai/code/10454" class="aritcle_card_btn">
<span>查看详情</span>
<img src="/static/images/cardxiayige-3.png" alt="通吃客零食网整站 for Shopex">
</a>
</div>
<p>此外，还有 <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;">xsl:element</pre>
登录后复制
</div> 可以动态生成元素名称，虽然在生成固定HTML结构时不如直接写HTML标签常用，但在某些需要根据XML数据决定输出哪个HTML标签的场景下，它就很有用了。比如，如果XML里有个 <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;"><level></pre>
登录后复制
</div> 节点决定输出 <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;"><h1></pre>
登录后复制
</div> 还是 <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;"><h2></pre>
登录后复制
</div>，<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;">xsl:element</pre>
登录后复制
</div> 就能派上用场。但话说回来，对于日常的HTML输出，直接嵌入HTML标签通常更直观、更易读。</p>
<h3>XSLT转换HTML时如何处理特殊字符和编码问题？</h3>
<p>处理特殊字符和编码是任何文本处理任务中都绕不开的话题，XSLT也不例外。当XSLT将XML数据转换为HTML时，它会默认对一些HTML的特殊字符进行转义，以确保输出的HTML是格式良好且安全的。例如，<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;"><</pre>
登录后复制
&lt;/div&gt; 会被转义为 &lt;div class="code" style="position:relative; padding:0px; margin:0px;"&gt;&lt;pre class="brush:php;toolbar:false;"&gt;<&lt;/pre&gt;
登录后复制
&lt;/div&gt;，&lt;div class="code" style="position:relative; padding:0px; margin:0px;"&gt;&lt;pre class="brush:php;toolbar:false;"&gt;&gt;&lt;/pre&gt;
登录后复制
&lt;/div&gt; 会变成 &lt;div class="code" style="position:relative; padding:0px; margin:0px;"&gt;&lt;pre class="brush:php;toolbar:false;"&gt;>&lt;/pre&gt;
登录后复制
&lt;/div&gt;，&lt;div class="code" style="position:relative; padding:0px; margin:0px;"&gt;&lt;pre class="brush:php;toolbar:false;"&gt;&&lt;/pre&gt;
登录后复制
&lt;/div&gt; 会变成 &lt;div class="code" style="position:relative; padding:0px; margin:0px;"&gt;&lt;pre class="brush:php;toolbar:false;"&gt;&&lt;/pre&gt;
登录后复制
&lt;/div&gt;。这是为了防止XML数据中的内容被&lt;a style="color:#f60; text-decoration:underline;" title="浏览器" href="https://www.php.cn/zt/16180.html" target="_blank"&gt;浏览器&lt;/a&gt;误解析为HTML标签或实体。&lt;/p&gt;
&lt;p&gt;然而，有时候你可能希望某些内容 &lt;em&gt;不被&lt;/em&gt; 转义。最典型的例子就是当XML数据本身就包含了一段HTML片段，你希望这段HTML能直接插入到输出中，而不是被转义。这时，就需要用到 &lt;div class="code" style="position:relative; padding:0px; margin:0px;"&gt;&lt;pre class="brush:php;toolbar:false;"&gt;disable-output-escaping="yes"&lt;/pre&gt;
登录后复制
&lt;/div&gt; 属性。这个属性可以加在 &lt;div class="code" style="position:relative; padding:0px; margin:0px;"&gt;&lt;pre class="brush:php;toolbar:false;"&gt;xsl:value-of&lt;/pre&gt;
登录后复制
&lt;/div&gt; 或 &lt;div class="code" style="position:relative; padding:0px; margin:0px;"&gt;&lt;pre class="brush:php;toolbar:false;"&gt;xsl:text&lt;/pre&gt;
登录后复制
&lt;/div&gt; 元素上。&lt;/p&gt;
&lt;p&gt;例如：&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;XML:&lt;/strong&gt;&lt;/p&gt;&lt;div class="code" style="position:relative; padding:0px; margin:0px;"&gt;&lt;pre class='brush:xml;toolbar:false;'&gt;&lt;content&gt;
This is some <strong>rich</strong> text.
&lt;/content&gt;&lt;/pre&gt;
登录后复制
&lt;/div&gt;&lt;p&gt;&lt;strong&gt;XSLT (错误示范，默认转义):&lt;/strong&gt;&lt;/p&gt;&lt;div class="code" style="position:relative; padding:0px; margin:0px;"&gt;&lt;pre class='brush:xml;toolbar:false;'&gt;&lt;p&gt;&lt;xsl:value-of select="content"/&gt;&lt;/p&gt;
&lt;!-- 输出: &lt;p&gt;This is some <strong>rich</strong> text.&lt;/p&gt; --&gt;&lt;/pre&gt;
登录后复制
&lt;/div&gt;&lt;p&gt;&lt;strong&gt;XSLT (正确处理，不转义):&lt;/strong&gt;&lt;/p&gt;&lt;div class="code" style="position:relative; padding:0px; margin:0px;"&gt;&lt;pre class='brush:xml;toolbar:false;'&gt;&lt;p&gt;&lt;xsl:value-of select="content" disable-output-escaping="yes"/&gt;&lt;/p&gt;
&lt;!-- 输出: &lt;p&gt;This is some &lt;strong&gt;rich&lt;/strong&gt; text.&lt;/p&gt; --&gt;&lt;/pre&gt;
登录后复制
&lt;/div&gt;&lt;p&gt;需要注意的是，&lt;div class="code" style="position:relative; padding:0px; margin:0px;"&gt;&lt;pre class="brush:php;toolbar:false;"&gt;disable-output-escaping&lt;/pre&gt;
登录后复制
&lt;/div&gt; 的使用应该非常谨慎，因为它可能会引入安全漏洞（如XSS攻击），如果XML源数据不可信，不建议随意使用。它本质上是告诉处理器“相信我，这段内容是安全的，直接输出”。&lt;/p&gt;
&lt;p&gt;至于编码问题，&lt;div class="code" style="position:relative; padding:0px; margin:0px;"&gt;&lt;pre class="brush:php;toolbar:false;"&gt;xsl:output&lt;/pre&gt;
登录后复制
&lt;/div&gt; 元素上的 &lt;div class="code" style="position:relative; padding:0px; margin:0px;"&gt;&lt;pre class="brush:php;toolbar:false;"&gt;encoding&lt;/pre&gt;
登录后复制
&lt;/div&gt; 属性可以用来指定输出HTML的字符编码，比如 &lt;div class="code" style="position:relative; padding:0px; margin:0px;"&gt;&lt;pre class="brush:php;toolbar:false;"&gt;encoding="UTF-8"&lt;/pre&gt;
登录后复制
&lt;/div&gt;。大多数现代Web应用都推荐使用UTF-8。如果XML源文档有声明编码，XSLT处理器通常会尊重它，并在转换过程中保持一致。如果输出HTML没有明确指定编码，浏览器可能会根据HTTP头或HTML的 &lt;div class="code" style="position:relative; padding:0px; margin:0px;"&gt;&lt;pre class="brush:php;toolbar:false;"&gt;&lt;meta charset="..."&gt;&lt;/pre&gt;
登录后复制
&lt;/div&gt; 标签来猜测。因此，在HTML的 &lt;div class="code" style="position:relative; padding:0px; margin:0px;"&gt;&lt;pre class="brush:php;toolbar:false;"&gt;&lt;head&gt;&lt;/pre&gt;
登录后复制
&lt;/div&gt; 部分加入 &lt;div class="code" style="position:relative; padding:0px; margin:0px;"&gt;&lt;pre class="brush:php;toolbar:false;"&gt;&lt;meta charset="UTF-8"&gt;&lt;/pre&gt;
登录后复制
&lt;/div&gt; 是一个良好的实践，确保浏览器正确解析字符。我个人习惯总是在 &lt;div class="code" style="position:relative; padding:0px; margin:0px;"&gt;&lt;pre class="brush:php;toolbar:false;"&gt;xsl:output&lt;/pre&gt;
登录后复制
&lt;/div&gt; 和 HTML 的 &lt;div class="code" style="position:relative; padding:0px; margin:0px;"&gt;&lt;pre class="brush:php;toolbar:false;"&gt;meta&lt;/pre&gt;
登录后复制
&lt;/div&gt; 标签里都写上 &lt;div class="code" style="position:relative; padding:0px; margin:0px;"&gt;&lt;pre class="brush:php;toolbar:false;"&gt;UTF-8&lt;/pre&gt;
登录后复制
&lt;/div&gt;，这样能最大程度地避免乱码问题。&lt;/p&gt;
&lt;h3&gt;如何在XSLT生成的HTML中引入CSS和JavaScript？&lt;/h3&gt;
&lt;p&gt;在XSLT生成的HTML中引入CSS和JavaScript，其实和在普通HTML文件中引入它们没有本质区别。XSLT的任务只是“组装”出HTML结构，至于这个结构内部包含了什么链接或脚本，它并不会特别对待。&lt;/p&gt;
&lt;p&gt;最常见的方法就是通过在XXSLT模板中直接输出相应的HTML标签：&lt;/p&gt;
&lt;ol&gt;
&lt;li&gt;
&lt;p&gt;&lt;strong&gt;引入CSS样式表：&lt;/strong&gt;
你可以在HTML的 &lt;div class="code" style="position:relative; padding:0px; margin:0px;"&gt;&lt;pre class="brush:php;toolbar:false;"&gt;&lt;head&gt;&lt;/pre&gt;
登录后复制
&lt;/div&gt; 部分输出 &lt;div class="code" style="position:relative; padding:0px; margin:0px;"&gt;&lt;pre class="brush:php;toolbar:false;"&gt;&lt;link&gt;&lt;/pre&gt;
登录后复制
&lt;/div&gt; 标签，指向你的CSS文件。&lt;/p&gt;&lt;div class="code" style="position:relative; padding:0px; margin:0px;"&gt;&lt;pre class='brush:xml;toolbar:false;'&gt;&lt;xsl:template match=&quot;/&quot;&gt;
&lt;html&gt;
&lt;head&gt;
&lt;title&gt;我的页面&lt;/title&gt;
&lt;link rel="stylesheet" type="text/css" href="/static/css/styles.css"/&gt;
&lt;!-- 也可以引入外部CDN的CSS --&gt;
&lt;link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css"/&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;!-- ... content ... --&gt;
&lt;/body&gt;
&lt;/html&gt;
&lt;/xsl:template&gt;&lt;/pre&gt;
登录后复制
&lt;/div&gt;&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;&lt;strong&gt;引入JavaScript脚本：&lt;/strong&gt;
同样，在HTML的 &lt;div class="code" style="position:relative; padding:0px; margin:0px;"&gt;&lt;pre class="brush:php;toolbar:false;"&gt;&lt;head&gt;&lt;/pre&gt;
登录后复制
&lt;/div&gt; 或 &lt;div class="code" style="position:relative; padding:0px; margin:0px;"&gt;&lt;pre class="brush:php;toolbar:false;"&gt;&lt;body&gt;&lt;/pre&gt;
登录后复制
&lt;/div&gt; 结束标签之前，输出 &lt;div class="code" style="position:relative; padding:0px; margin:0px;"&gt;&lt;pre class="brush:php;toolbar:false;"&gt;&lt;script&gt;&lt;/pre&gt;
登录后复制
&lt;/div&gt; 标签。&lt;/p&gt;&lt;div class="code" style="position:relative; padding:0px; margin:0px;"&gt;&lt;pre class='brush:xml;toolbar:false;'&gt;&lt;xsl:template match=&quot;/&quot;&gt;
&lt;html&gt;
&lt;head&gt;
&lt;!-- ... CSS ... --&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;!-- ... content ... --&gt;
&lt;script src="/static/js/main.js"&gt;&lt;/script&gt;
&lt;!-- 也可以引入外部CDN的JS --&gt;
&lt;script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"&gt;&lt;/script&gt;
&lt;!-- 内联脚本 --&gt;
&lt;script&gt;
// 你的JavaScript代码
document.addEventListener('DOMContentLoaded', function() {
console.log('页面已加载完毕！');
});
&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;
&lt;/xsl:template&gt;&lt;/pre&gt;
登录后复制
&lt;/div&gt;&lt;p&gt;如果JavaScript代码需要动态地从XML数据中获取值，你可以在 &lt;div class="code" style="position:relative; padding:0px; margin:0px;"&gt;&lt;pre class="brush:php;toolbar:false;"&gt;&lt;script&gt;&lt;/pre&gt;
登录后复制
&lt;/div&gt; 标签内部使用 &lt;div class="code" style="position:relative; padding:0px; margin:0px;"&gt;&lt;pre class="brush:php;toolbar:false;"&gt;xsl:value-of&lt;/pre&gt;
登录后复制
&lt;/div&gt; 来插入这些值，或者生成带有 &lt;div class="code" style="position:relative; padding:0px; margin:0px;"&gt;&lt;pre class="brush:php;toolbar:false;"&gt;data-&lt;/pre&gt;
登录后复制
&lt;/div&gt; 属性的HTML元素，然后JavaScript去读取这些属性。&lt;/p&gt;&lt;div class="code" style="position:relative; padding:0px; margin:0px;"&gt;&lt;pre class='brush:xml;toolbar:false;'&gt;&lt;xsl:template match="product"&gt;
&lt;div class="product-card" data-product-id="{@id}" data-price="{@price}"&gt;
&lt;h2&gt;&lt;xsl:value-of select="name"/&gt;&lt;/h2&gt;
&lt;button onclick="addToCart(this)"&gt;添加到购物车&lt;/button&gt;
&lt;/div&gt;
&lt;/xsl:template&gt;
&lt;!-- 在HTML的某个地方，比如body底部 --&gt;
&lt;script&gt;
function addToCart(button) {
const productId = button.closest('.product-card').dataset.productId;
const price = button.closest('.product-card').dataset.price;
console.log(`添加产品ID: ${productId}, 价格: ${price} 到购物车`);
// 实际的购物车逻辑
}
&lt;/script&gt;&lt;/pre&gt;
登录后复制
&lt;/div&gt;&lt;/li&gt;
&lt;/ol&gt;
&lt;p&gt;这种方式的优点是直观且符合Web标准。XSLT只负责把 &lt;div class="code" style="position:relative; padding:0px; margin:0px;"&gt;&lt;pre class="brush:php;toolbar:false;"&gt;&lt;link&gt;&lt;/pre&gt;
登录后复制
&lt;/div&gt; 和 &lt;div class="code" style="position:relative; padding:0px; margin:0px;"&gt;&lt;pre class="brush:php;toolbar:false;"&gt;&lt;script&gt;&lt;/pre&gt;
登录后复制
&lt;/div&gt; 标签“打印”出来，后续的资源加载和执行完全由浏览器负责。在我看来，XSLT在这里扮演的是一个高效的HTML骨架生成器，而真正的“活”和“美化”还是交给了CSS和JavaScript。这体现了关注点分离的原则，虽然XSLT本身在&lt;a style="color:#f60; text-decoration:underline;" title="前端" href="https://www.php.cn/zt/15813.html" target="_blank"&gt;前端&lt;/a&gt;领域已经不那么主流，但这种思路在现代框架中依然随处可见。&lt;/p&gt;
以上就是XSLT如何输出HTML？的详细内容，更多请关注php中文网其它相关文章！
829
收藏
