<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>
登录后复制
&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;<xsl:output method=&quot;html&quot; indent=&quot;yes&quot;/>&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;method=&quot;html&quot;&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;<br>&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;<br>&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;<br/>&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;indent=&quot;yes&quot;&lt;/pre&gt;
登录后复制
&lt;/div&gt; 则让输出的HTML更易读。&lt;/p&gt;
&lt;p&gt;&lt;span&gt;立即学习&lt;/span&gt;“&lt;a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank"&gt;前端免费学习笔记（深入）&lt;/a&gt;”；&lt;/p&gt;
&lt;p&gt;接着，你需要在XSLT样式表中编写模板（&lt;div class="code" style="position:relative; padding:0px; margin:0px;"&gt;&lt;pre class="brush:php;toolbar:false;"&gt;xsl:template&lt;/pre&gt;
登录后复制
&lt;/div&gt;）。这些模板会根据XPath表达式匹配XML文档中的节点，然后生成相应的HTML结构。&lt;/p&gt;
&lt;p&gt;例如，一个最基本的转换可能长这样：&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;XML源文档 (data.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;<bookstore>
<book category=&quot;cooking&quot;>
<title lang=&quot;en&quot;>Everyday Italian</title>
<author>Giada De Laurentiis</author>
<year>2005</year>
<price>30.00</price>
</book>
<book category=&quot;web&quot;>
<title lang=&quot;en&quot;>Learning XML</title>
<author>Erik T. Ray</author>
<year>2003</year>
<price>39.95</price>
</book>
</bookstore>&lt;/pre&gt;
登录后复制
&lt;/div&gt;&lt;p&gt;&lt;strong&gt;XSLT样式表 (transform.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;<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0"
xmlns:xsl=&quot;http://www.w3.org/1999/XSL/Transform&quot;>
<xsl:output method=&quot;html&quot; indent=&quot;yes&quot;/>
<xsl:template match=&quot;/&quot;>
<html>
<head>
<title>我的书店</title>
</head>
<body>
<h1>书店列表</h1>
<ul>
<xsl:apply-templates select=&quot;bookstore/book&quot;/>
</ul>
</body>
</html>
</xsl:template>
<xsl:template match=&quot;book&quot;>
<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>&lt;/pre&gt;
登录后复制
&lt;/div&gt;&lt;p&gt;&lt;strong&gt;处理结果 (HTML输出):&lt;/strong&gt;&lt;/p&gt;&lt;div class="code" style="position:relative; padding:0px; margin:0px;"&gt;&lt;pre class='brush:html;toolbar:false;'&gt;<!DOCTYPE html>
<html>
<head>
<meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=UTF-8&quot;>
<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>&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;xsl:template match=&quot;/&quot;&lt;/pre&gt;
登录后复制
&lt;/div&gt; 匹配整个XML文档的根节点，然后生成HTML的 &lt;div class="code" style="position:relative; padding:0px; margin:0px;"&gt;&lt;pre class="brush:php;toolbar:false;"&gt;<html>&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;<head>&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;<body>&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:apply-templates select=&quot;bookstore/book&quot;&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;<book>&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:template match=&quot;book&quot;&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;<book>&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;<li>&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;title&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;author&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;year&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;price&lt;/pre&gt;
登录后复制
&lt;/div&gt; 内容。&lt;/p&gt;
&lt;p&gt;这套机制让我觉得XSLT有点像“声明式编程”的早期尝试，你不是告诉&lt;a style="color:#f60; text-decoration:underline;" title="计算机" href="https://www.php.cn/zt/16013.html" target="_blank"&gt;计算机&lt;/a&gt;“一步步怎么做”，而是告诉它“当看到这个结构时，应该变成那个结构”。&lt;/p&gt;
&lt;h3&gt;XSLT在生成HTML时如何处理各种元素和属性？&lt;/h3&gt;
&lt;p&gt;XSLT在生成HTML时，处理元素和属性的方式相当直接，但也需要一些技巧。基本上，任何不在XSLT命名空间（&lt;div class="code" style="position:relative; padding:0px; margin:0px;"&gt;&lt;pre class="brush:php;toolbar:false;"&gt;xmlns:xsl=&quot;http://www.w3.org/1999/XSL/Transform&quot;&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:template&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;<html>&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;<head>&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;<body>&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;<h1>&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;<ul>&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;<li>&lt;/pre&gt;
登录后复制
&lt;/div&gt; 等HTML标签。&lt;/p&gt;
&lt;p&gt;对于属性，你可以直接在输出的HTML元素上写死属性，比如 &lt;div class="code" style="position:relative; padding:0px; margin:0px;"&gt;&lt;pre class="brush:php;toolbar:false;"&gt;<a href=&quot;index.html&quot;>&lt;/pre&gt;
登录后复制
&lt;/div&gt;。但更多时候，属性值是动态的，需要从XML源数据中提取。这时，我们使用 &lt;div class="code" style="position:relative; padding:0px; margin:0px;"&gt;&lt;pre class="brush:php;toolbar:false;"&gt;xsl:attribute&lt;/pre&gt;
登录后复制
&lt;/div&gt; 元素。&lt;/p&gt;
&lt;p&gt;例如，如果你想根据XML中的一个属性来设置HTML元素的属性：&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;<product id=&quot;p101&quot; status=&quot;new&quot;>
<name>Awesome Gadget</name>
</product>&lt;/pre&gt;
登录后复制
&lt;/div&gt;&lt;p&gt;&lt;strong&gt;XSLT:&lt;/strong&gt;&lt;/p&gt;
&lt;div class="aritcle_card"&gt;
&lt;a class="aritcle_card_img" href="/ai/%E5%A6%82%E7%9F%A5ai%E7%AC%94%E8%AE%B0"&gt;
&lt;img src="https://img.php.cn/upload/ai_manual/000/000/000/175679994166405.png" alt="如知AI笔记"&gt;&lt;/a&gt;
&lt;div class="aritcle_card_info"&gt;
&lt;a href="/ai/%E5%A6%82%E7%9F%A5ai%E7%AC%94%E8%AE%B0"&gt;如知AI笔记&lt;/a&gt;
&lt;p&gt;如知笔记——支持markdown的在线笔记，支持ai智能写作、AI搜索，支持DeepseekR1满血大模型&lt;/p&gt;
&lt;div class=""&gt;
&lt;img src="/static/images/card_xiazai.png" alt="如知AI笔记"&gt;&lt;span&gt;27&lt;/span&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;a href="/ai/%E5%A6%82%E7%9F%A5ai%E7%AC%94%E8%AE%B0" class="aritcle_card_btn"&gt;
&lt;span&gt;查看详情&lt;/span&gt;
&lt;img src="/static/images/cardxiayige-3.png" alt="如知AI笔记"&gt;&lt;/a&gt;
&lt;/div&gt;
&lt;div class="code" style="position:relative; padding:0px; margin:0px;"&gt;&lt;pre class='brush:xml;toolbar:false;'&gt;<xsl:template match=&quot;product&quot;>
<div class=&quot;product-item&quot;>
<xsl:attribute name=&quot;data-id&quot;>
<xsl:value-of select=&quot;@id&quot;/>
</xsl:attribute>
<xsl:attribute name=&quot;class&quot;>
product-item <xsl:value-of select=&quot;@status&quot;/>
</xsl:attribute>
<h2><xsl:value-of select=&quot;name&quot;/></h2>
</div>
</xsl:template>&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;xsl:attribute name=&quot;data-id&quot;&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-id&lt;/pre&gt;
登录后复制
&lt;/div&gt; 属性，其值来自XML的 &lt;div class="code" style="position:relative; padding:0px; margin:0px;"&gt;&lt;pre class="brush:php;toolbar:false;"&gt;@id&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;class&lt;/pre&gt;
登录后复制
&lt;/div&gt; 属性演示了如何拼接静态文本和动态值。&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:element&lt;/pre&gt;
登录后复制
&lt;/div&gt; 可以动态生成元素名称，虽然在生成固定HTML结构时不如直接写HTML标签常用，但在某些需要根据XML数据决定输出哪个HTML标签的场景下，它就很有用了。比如，如果XML里有个 &lt;div class="code" style="position:relative; padding:0px; margin:0px;"&gt;&lt;pre class="brush:php;toolbar:false;"&gt;<level>&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;<h1>&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;<h2>&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:element&lt;/pre&gt;
登录后复制
&lt;/div&gt; 就能派上用场。但话说回来，对于日常的HTML输出，直接嵌入HTML标签通常更直观、更易读。&lt;/p&gt;
&lt;h3&gt;XSLT转换HTML时如何处理特殊字符和编码问题？&lt;/h3&gt;
&lt;p&gt;处理特殊字符和编码是任何文本处理任务中都绕不开的话题，XSLT也不例外。当XSLT将XML数据转换为HTML时，它会默认对一些HTML的特殊字符进行转义，以确保输出的HTML是格式良好且安全的。例如，&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;&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;&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;<content>
This is some &lt;strong&gt;rich&lt;/strong&gt; text.
</content>&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;<p><xsl:value-of select="content"/></p>
<!-- 输出: <p>This is some &lt;strong&gt;rich&lt;/strong&gt; text.</p> -->&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;<p><xsl:value-of select="content" disable-output-escaping="yes"/></p>
<!-- 输出: <p>This is some <strong>rich</strong> text.</p> -->&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;<meta charset="...">&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;<head>&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;<meta charset="UTF-8">&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;<head>&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;<link>&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;<xsl:template match=&quot;/&quot;>
<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>&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;<head>&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;<body>&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;<script>&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;<xsl:template match=&quot;/&quot;>
<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>&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;<script>&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;<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>&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;<link>&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;<script>&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中文网其它相关文章！
广告
958
收藏
