<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>
</div> 会被转义为 <div class=”code” style=”position:relative; padding:0px; margin:0px;”><pre class=”brush:php;toolbar:false;”><</pre>
</div>，<div class=”code” style=”position:relative; padding:0px; margin:0px;”><pre class=”brush:php;toolbar:false;”>></pre>
</div> 会变成 <div class=”code” style=”position:relative; padding:0px; margin:0px;”><pre class=”brush:php;toolbar:false;”>></pre>
</div>，<div class=”code” style=”position:relative; padding:0px; margin:0px;”><pre class=”brush:php;toolbar:false;”>&</pre>
</div> 会变成 <div class=”code” style=”position:relative; padding:0px; margin:0px;”><pre class=”brush:php;toolbar:false;”>&</pre>
</div>。这是为了防止XML数据中的内容被<a style=”color:#f60; text-decoration:underline;” title=”浏览器” href=”https://www.php.cn/zt/16180.html” target=”_blank”>浏览器</a>误解析为HTML标签或实体。</p><p>然而，有时候你可能希望某些内容 <em>不被</em> 转义。最典型的例子就是当XML数据本身就包含了一段HTML片段，你希望这段HTML能直接插入到输出中，而不是被转义。这时，就需要用到 <div class=”code” style=”position:relative; padding:0px; margin:0px;”><pre class=”brush:php;toolbar:false;”>disable-output-escaping=”yes”</pre>
</div> 属性。这个属性可以加在 <div class=”code” style=”position:relative; padding:0px; margin:0px;”><pre class=”brush:php;toolbar:false;”>xsl:value-of</pre>
</div> 或 <div class=”code” style=”position:relative; padding:0px; margin:0px;”><pre class=”brush:php;toolbar:false;”>xsl:text</pre>
</div> 元素上。</p><p>例如：</p><p><strong>XML:</strong></p><div class=”code” style=”position:relative; padding:0px; margin:0px;”><pre class=’brush:xml;toolbar:false;’><content> This is some rich text.</content></pre>
</div><p><strong>XSLT (错误示范，默认转义):</strong></p><div class=”code” style=”position:relative; padding:0px; margin:0px;”><pre class=’brush:xml;toolbar:false;’><p><xsl:value-of select=”content”/></p><!– 输出: <p>This is some rich text.</p> –></pre>
</div><p><strong>XSLT (正确处理，不转义):</strong></p><div class=”code” style=”position:relative; padding:0px; margin:0px;”><pre class=’brush:xml;toolbar:false;’><p><xsl:value-of select=”content” disable-output-escaping=”yes”/></p><!– 输出: <p>This is some <strong>rich</strong> text.</p> –></pre>
</div><p>需要注意的是，<div class=”code” style=”position:relative; padding:0px; margin:0px;”><pre class=”brush:php;toolbar:false;”>disable-output-escaping</pre>
</div> 的使用应该非常谨慎，因为它可能会引入安全漏洞（如XSS攻击），如果XML源数据不可信，不建议随意使用。它本质上是告诉处理器“相信我，这段内容是安全的，直接输出”。</p><p>至于编码问题，<div class=”code” style=”position:relative; padding:0px; margin:0px;”><pre class=”brush:php;toolbar:false;”>xsl:output</pre>
</div> 元素上的 <div class=”code” style=”position:relative; padding:0px; margin:0px;”><pre class=”brush:php;toolbar:false;”>encoding</pre>
</div> 属性可以用来指定输出HTML的字符编码，比如 <div class=”code” style=”position:relative; padding:0px; margin:0px;”><pre class=”brush:php;toolbar:false;”>encoding=”UTF-8″</pre>
</div>。大多数现代Web应用都推荐使用UTF-8。如果XML源文档有声明编码，XSLT处理器通常会尊重它，并在转换过程中保持一致。如果输出HTML没有明确指定编码，浏览器可能会根据HTTP头或HTML的 <div class=”code” style=”position:relative; padding:0px; margin:0px;”><pre class=”brush:php;toolbar:false;”><meta charset=”…”></pre>
</div> 标签来猜测。因此，在HTML的 <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;”><meta charset=”UTF-8″></pre>
</div> 是一个良好的实践，确保浏览器正确解析字符。我个人习惯总是在 <div class=”code” style=”position:relative; padding:0px; margin:0px;”><pre class=”brush:php;toolbar:false;”>xsl:output</pre>
</div> 和 HTML 的 <div class=”code” style=”position:relative; padding:0px; margin:0px;”><pre class=”brush:php;toolbar:false;”>meta</pre>
</div> 标签里都写上 <div class=”code” style=”position:relative; padding:0px; margin:0px;”><pre class=”brush:php;toolbar:false;”>UTF-8</pre>
</div>，这样能最大程度地避免乱码问题。</p><h3>如何在XSLT生成的HTML中引入CSS和JavaScript？</h3><p>在XSLT生成的HTML中引入CSS和JavaScript，其实和在普通HTML文件中引入它们没有本质区别。XSLT的任务只是“组装”出HTML结构，至于这个结构内部包含了什么链接或脚本，它并不会特别对待。</p><p>最常见的方法就是通过在XXSLT模板中直接输出相应的HTML标签：</p><ol><li><p><strong>引入CSS样式表：</strong>你可以在HTML的 <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;”><link></pre>
</div> 标签，指向你的CSS文件。</p><div class=”code” style=”position:relative; padding:0px; margin:0px;”><pre class=’brush:xml;toolbar:false;’><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></pre>
</div></li><li><p><strong>引入JavaScript脚本：</strong>同样，在HTML的 <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;”><script></pre>
</div> 标签。</p><div class=”code” style=”position:relative; padding:0px; margin:0px;”><pre class=’brush:xml;toolbar:false;’><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></pre>
</div><p>如果JavaScript代码需要动态地从XML数据中获取值，你可以在 <div class=”code” style=”position:relative; padding:0px; margin:0px;”><pre class=”brush:php;toolbar:false;”><script></pre>
</div> 标签内部使用 <div class=”code” style=”position:relative; padding:0px; margin:0px;”><pre class=”brush:php;toolbar:false;”>xsl:value-of</pre>
</div> 来插入这些值，或者生成带有 <div class=”code” style=”position:relative; padding:0px; margin:0px;”><pre class=”brush:php;toolbar:false;”>data-</pre>
</div> 属性的HTML元素，然后JavaScript去读取这些属性。</p><div class=”code” style=”position:relative; padding:0px; margin:0px;”><pre class=’brush:xml;toolbar:false;’><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></pre>
</div></li></ol><p>这种方式的优点是直观且符合Web标准。XSLT只负责把 <div class=”code” style=”position:relative; padding:0px; margin:0px;”><pre class=”brush:php;toolbar:false;”><link></pre>
</div> 和 <div class=”code” style=”position:relative; padding:0px; margin:0px;”><pre class=”brush:php;toolbar:false;”><script></pre>
</div> 标签“打印”出来，后续的资源加载和执行完全由浏览器负责。在我看来，XSLT在这里扮演的是一个高效的HTML骨架生成器，而真正的“活”和“美化”还是交给了CSS和JavaScript。这体现了关注点分离的原则，虽然XSLT本身在<a style=”color:#f60; text-decoration:underline;” title=”前端” href=”https://www.php.cn/zt/15813.html” target=”_blank”>前端</a>领域已经不那么主流，但这种思路在现代框架中依然随处可见。</p>
以上就是XSLT如何输出HTML？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1430844.html
微信扫一扫 
支付宝扫一扫 
