华山资源网

将XSLT作为HTML的样式表的使用方法示例
网页制作 2024/11/20 佚名
3 1

 简介　　

当听到样式表这个词时，您可能会想到 CSS 样式表。XSLT 样式表通常用于 XML 转换，比如在 Web 服务之间映射数据。因为 XSLT 非常适合此用途，所以创建了顶层元素 <stylesheet> 的 <xsl:transform> 别名，虽然这很少使用。这种 XSLT 转换的输入结构与输出结构有很大的不同。最重要的是，命名空间的不同。

　　XSLT 样式表的输入结构与输出结构相似，但却更简单些。其中已经扩充了一些标记，但大部分标记只是原样复制到输出。输入和输出的命名空间是相同的 (HTML)。输入文档也可以包含样式表指令（比如创建脚注），这些指令属于另一个命名空间，不会传递到输出中。
常用缩略语

    CSS：级联样式表
    XHTML：可扩展超文本标记语言
    XPath：XML 路径语言
    XSLT：可扩展样式表语言转换

　　在本文中，我们将学习如何使用 XSLT 样式表扩充 XHTML 文档。文中的示例展示了如何使用指令，如何引用其他源文档的部分，以及如何使用链接在主文档中导航。此外，我们还探索了页面的解释和编译之间的区别。
CSS 样式表的局限性

　　XSLT 样式表不会阻止您使用其他技术，比如 JavaScript 或 CSS。CSS 适用于字体、加粗、颜色、间距等。它不适合将来自不同位置的信息组合在一起，比如脚注、模块或生成一个目录。这正是 XSLT 的用武之地，它补充而不是替代了 CSS。
XSLT 用途示例

　　实际上，您可以将 XSLT 代码集中在一个文件中。为了简单起见，本文中的每个示例均位于一个独立的 XSLT 文件中，除了一些必要的代码。清单 1 给出了必需的代码。

　　清单 1. 必需的代码（位于 samples/common.xml 中）

 

XML/HTML Code复制内容到剪贴板
  1. <s:stylesheet  
  2.     <span style="width: auto; height: auto; float: none;" id="24_nwp"><a style="text-decoration: none;" mpid="24" target="_blank" href="http://cpro.baidu.com/cpro/ui/uijs.php?adclass=0&app_id=0&c=news&cf=1001&ch=0&di=128&fv=0&is_app=0&jk=d14555d819ab7000&k=xml&k0=xml&kdi0=0&luki=10&n=10&p=baidu&q=06011078_cpr&rb=0&rs=1&seller_id=1&sid=70ab19d85545d1&ssp2=1&stid=0&t=tpclicked3_hc&tu=u1922429&u=http%3A%2F%2Fwww%2Eadmin10000%2Ecom%2Fdocument%2F1117%2Ehtml&urlid=0" id="24_nwl"><span style="color:#0000ff;font-size:14px;width:auto;height:auto;float:none;">xml</span></a></span>ns="http://www.w3.org/1999/xhtml"  
  3.     xmlns:h="http://www.w3.org/1999/xhtml"  
  4.     xmlns:a="http://sourceforge.net/projects/arbalo/"  
  5.     xmlns:s="http://www.w3.org/1999/XSL/Transform"  
  6.     exclude-result-prefixes="a h"  
  7.     version="1.0"  
  8. >  
  9.     <s:template match="h:<span style="width: auto; height: auto; float: none;" id="25_nwp"><a style="text-decoration: none;" mpid="25" target="_blank" href="http://cpro.baidu.com/cpro/ui/uijs.php?adclass=0&app_id=0&c=news&cf=1001&ch=0&di=128&fv=0&is_app=0&jk=d14555d819ab7000&k=head&k0=head&kdi0=0&luki=9&n=10&p=baidu&q=06011078_cpr&rb=0&rs=1&seller_id=1&sid=70ab19d85545d1&ssp2=1&stid=0&t=tpclicked3_hc&tu=u1922429&u=http%3A%2F%2Fwww%2Eadmin10000%2Ecom%2Fdocument%2F1117%2Ehtml&urlid=0" id="25_nwl"><span style="color:#0000ff;font-size:14px;width:auto;height:auto;float:none;">head</span></a></span>">  
  10.         <s:copy>  
  11.             <s:apply-templates select="@*|node()"/>  
  12.             <meta  
  13.                 http-equiv="content-type"  
  14.                 content="text/html;charset=UTF-8" />  
  15.             <link  
  16.                 href="common.<span style="width: auto; height: auto; float: none;" id="26_nwp"><a style="text-decoration: none;" mpid="26" target="_blank" href="http://cpro.baidu.com/cpro/ui/uijs.php?adclass=0&app_id=0&c=news&cf=1001&ch=0&di=128&fv=0&is_app=0&jk=d14555d819ab7000&k=css&k0=css&kdi0=0&luki=8&n=10&p=baidu&q=06011078_cpr&rb=0&rs=1&seller_id=1&sid=70ab19d85545d1&ssp2=1&stid=0&t=tpclicked3_hc&tu=u1922429&u=http%3A%2F%2Fwww%2Eadmin10000%2Ecom%2Fdocument%2F1117%2Ehtml&urlid=0" id="26_nwl"><span style="color:#0000ff;font-size:14px;width:auto;height:auto;float:none;">css</span></a></span>"   
  17.                 rel="stylesheet"  
  18.                 type="text/css" />  
  19.         </s:copy>  
  20.     </s:template>  
  21.         
  22.     <s:template match="*">  
  23.         <s:copy>  
  24.             <s:copy-of select="@*"/>  
  25.             <s:apply-templates/>  
  26.         </s:copy>  
  27.     </s:template>  
  28. </s:stylesheet>  

　　XHTML 的命名空间定义了两次：默认定义和 h:。默认命名空间用于编写输出 XHTML 标记，其中应该避免使用命名空间前缀。h: 用在 XPath 表达式中。

　　本文使用 XSLT 1.0 版本。目前，大部分浏览器都无法解释 XSLT 2.0。但是，如果 XSLT 运行在服务器上，那么它可能是一个实用的选择。XSLT 2.0 还提供了：

    XPATH 2.0（if…then…else 和许多内置的函数）
    内置和用户编写的 XPATH 函数
    分组

　　在 清单 1 中：

    s:template match="head" 扩充了源文档的 head 一节，添加了一个 CSS 样式表的链接。即使 UTF-8 是在 XML 中的默认编码，一些浏览器也需要内容类型才能呈现它。
    s:template match="*" 是默认的详细副本。原则上，所有内容都会复制到目标文档中。如果遗漏了此模板，只会将标记的文本内容复制到目标文档。不会复制处理指令节点。

　　本文中的所有其他示例都是导入 common.xsl 的独立文件。
扩充

　　通过扩充，添加了一个未在源文档中显式请求的特性。一个示例是 清单 1 中的 CSS 样式表的链接。尝试另一个示例，向每个内部链接添加一个小箭头 (^ v)，指明目标在它之前还是之后。清单 2 给出了该样式表。

　　清单 2. 样式表（在 samples/linkUpDown.xsl 中）

 

XML/HTML Code复制内容到剪贴板
  1. <s:stylesheet  
  2.     <span style="width: auto; height: auto; float: none;" id="22_nwp"><a style="text-decoration: none;" mpid="22" target="_blank" href="http://cpro.baidu.com/cpro/ui/uijs.php?adclass=0&app_id=0&c=news&cf=1001&ch=0&di=128&fv=0&is_app=0&jk=d14555d819ab7000&k=xml&k0=xml&kdi0=0&luki=10&n=10&p=baidu&q=06011078_cpr&rb=0&rs=1&seller_id=1&sid=70ab19d85545d1&ssp2=1&stid=0&t=tpclicked3_hc&tu=u1922429&u=http%3A%2F%2Fwww%2Eadmin10000%2Ecom%2Fdocument%2F1117%2Ehtml&urlid=0" id="22_nwl"><span style="color:#0000ff;font-size:14px;width:auto;height:auto;float:none;">xml</span></a></span>ns="http://www.w3.org/1999/xhtml"  
  3.     xmlns:h="http://www.w3.org/1999/xhtml"  
  4.     xmlns:s="http://www.w3.org/1999/XSL/Transform"  
  5.     version="1.0"  
  6. >  
  7.     <s:import href="common.xsl"/>  
  8.     <s:template match="h:a[starts-with(@href,'#')]">  
  9.         <s:copy>  
  10.             <s:copy-of select="@*"/>  
  11.             <s:variable name="name" select="substring-after(@href,'#')"/>  
  12.             <s:choose>  
  13.                 <s:when test="preceding::h:a[@name=$name]">  
  14.                     <s:text>^</s:text>  
  15.                 </s:when>  
  16.                 <s:when test="following::h:a[@name=$name]">  
  17.                     <s:text>v</s:text>  
  18.                 </s:when>  
  19.             </s:choose>  
  20.             <s:apply-templates/>  
  21.         </s:copy>  
  22.     </s:template>  
  23. </s:stylesheet>  

　　首先，导入清单 2 中的通用样式表。模板与内部链接（以 '#' 开头）相匹配。如果链接指向的锚点位于链接之前，那么使用一个向上箭头扩充该链接（如果情况相反，则使用向下箭头）。

　　s:copy-of 和 s:apply-templates 可确保不会沿途丢下任何内容。

　　清单 3 给出了一个示例文档（其中包含内部链接），它经过了清单 2 中的样式表进行扩充。

　　清单 3. 源文档（在 samples/linkUpDown.xml 中）
 

XML/HTML Code复制内容到剪贴板
  1. <?<span style="width: auto; height: auto; float: none;" id="20_nwp"><a style="text-decoration: none;" mpid="20" target="_blank" href="http://cpro.baidu.com/cpro/ui/uijs.php?adclass=0&app_id=0&c=news&cf=1001&ch=0&di=128&fv=0&is_app=0&jk=d14555d819ab7000&k=xml&k0=xml&kdi0=0&luki=10&n=10&p=baidu&q=06011078_cpr&rb=0&rs=1&seller_id=1&sid=70ab19d85545d1&ssp2=1&stid=0&t=tpclicked3_hc&tu=u1922429&u=http%3A%2F%2Fwww%2Eadmin10000%2Ecom%2Fdocument%2F1117%2Ehtml&urlid=0" id="20_nwl"><span style="color:#0000ff;font-size:14px;width:auto;height:auto;float:none;">xml</span></a></span>-stylesheet href="linkUpDown.xsl" type="text/xsl"?>  
  2.  <html xmlns="http://www.w3.org/1999/xhtml">  
  3.     <<span style="width: auto; height: auto; float: none;" id="21_nwp"><a style="text-decoration: none;" mpid="21" target="_blank" href="http://cpro.baidu.com/cpro/ui/uijs.php?adclass=0&app_id=0&c=news&cf=1001&ch=0&di=128&fv=0&is_app=0&jk=d14555d819ab7000&k=head&k0=head&kdi0=0&luki=9&n=10&p=baidu&q=06011078_cpr&rb=0&rs=1&seller_id=1&sid=70ab19d85545d1&ssp2=1&stid=0&t=tpclicked3_hc&tu=u1922429&u=http%3A%2F%2Fwww%2Eadmin10000%2Ecom%2Fdocument%2F1117%2Ehtml&urlid=0" id="21_nwl"><span style="color:#0000ff;font-size:14px;width:auto;height:auto;float:none;">head</span></a></span>/>  
  4.     <body>  
  5.         <a name="a"/>  
  6.         <p>This link goes <a href="vb">downward.</a></p>  
  7.         <br/>  
  8.         <p>Reduce the size of the window to verify the link really works.</p>  
  9.         <br/>  
  10.         <a name="b"/>  
  11.         <p>This link goes <a href="^a">upward.</a>  
  12.         </p>  
  13.     </body>  
  14. </html>         

　　目标文档看起来相同，除了清单 4 中的条目。
　　清单 4. 目标文档（在 samples/linkUpDown.html 中）

XML/HTML Code复制内容到剪贴板
  1. … <a href="#b">v downwards.</a> …   
  2.    … <a href="#a">^ upwards.</a> …  

指令

　　您可以在源文档中添加一些指令，告诉样式表执行何种操作。它们属于另一个命名空间（在本例中为前缀 a:），不会被复制到目标文档。

　　在清单 5 中，源文档中任何地方的指令标记 a:ref 都会创建一个脚注。

　　清单 5. 样式表（在 samples/footnote.xsl 中）
 

XML/HTML Code复制内容到剪贴板
  1. <s:stylesheet  
  2.     <span style="width: auto; height: auto; float: none;" id="19_nwp"><a style="text-decoration: none;" mpid="19" target="_blank" href="http://cpro.baidu.com/cpro/ui/uijs.php?adclass=0&app_id=0&c=news&cf=1001&ch=0&di=128&fv=0&is_app=0&jk=d14555d819ab7000&k=xml&k0=xml&kdi0=0&luki=10&n=10&p=baidu&q=06011078_cpr&rb=0&rs=1&seller_id=1&sid=70ab19d85545d1&ssp2=1&stid=0&t=tpclicked3_hc&tu=u1922429&u=http%3A%2F%2Fwww%2Eadmin10000%2Ecom%2Fdocument%2F1117%2Ehtml&urlid=0" id="19_nwl"><span style="color:#0000ff;font-size:14px;width:auto;height:auto;float:none;">xml</span></a></span>ns="http://www.w3.org/1999/xhtml"  
  3.     xmlns:a="http://sourceforge.net/projects/arbalo/"  
  4.     xmlns:h="http://www.w3.org/1999/xhtml"  
  5.     xmlns:s="http://www.w3.org/1999/XSL/Transform"  
  6.     version="1.0"  
  7. >  
  8.     <s:import href="common.xsl"/>  
  9.     <s:template match="h:body">  
  10.         <s:copy>  
  11.             <s:apply-templates select="@*|node()"/   
  12.             <!-- put the footnotes at the end   
  13.                 if there is no a:references directive -->  
  14.             <s:if test="not(descendant::a:references)">  
  15.                 <s:call-template name="references"/>  
  16.             </s:if>  
  17.         </s:copy>  
  18.     </s:template>  
  19.     <!-- Create a footnote -->  
  20.     <s:template match="a:ref">  
  21.         <s:variable  
  22.             name="number"  
  23.             select="count(preceding::a:ref) + 1"/>  
  24.         <a name="ref-{$number}"></a>  
  25.         <a class="footnote" href="#reference-{$number}">  
  26.             <s:value-of select="concat('v ',$number)"/>  
  27.         </a>  
  28.     </s:template>  
  29.     <!-- if a:reference is missing, assume it at the end of the body -->  
  30.     <s:template match="a:references" name="references">  
  31.         <hr/>  
  32.         <s:for-each select="//a:ref">  
  33.             <s:variable name="number" select="count(preceding::a:ref) + 1"/>  
  34.             <p>  
  35.                 <a name="reference-{$number}"></a>  
  36.                 <a class="footnote" href="#ref-{$number}">  
  37.                     <s:value-of select="concat(' ^',$number)"/>  
  38.                 </a>  
  39.                 <s:apply-templates/>  
  40.             </p>  
  41.         </s:for-each>  
  42.     </s:template>  
  43. </s:stylesheet>  

　　使用源文档中的 a:references 指令，名为 references 的模板会在模板与该指令匹配的地方分配脚注。如果缺少这样一个指令，第一个与 body 匹配的模板会在 body 的末尾分配脚注，方法是调用名为 references 的相同模板。在两种情况下，都会列出脚注的内容，并生成一个由向上箭头表示的向上链接。

　　第二个模板（匹配 a:ref）使用向下箭头创建脚注的链接。脚注具有编号。这里忽略了它的内容。

　　class="footnote" 属性在 XSLT 转换之后由一个 CSS 样式表解析，该样式表链接在 XSLT 样式表 common.xsl 中。

　　清单 6 中的源文档使用 a:ref 指令创建脚注。

　　清单 6. 源文档（在 samples/footnote.xml 中）
 

XML/HTML Code复制内容到剪贴板
  1. <?<span style="width: auto; height: auto; float: none;" id="17_nwp"><a style="text-decoration: none;" mpid="17" target="_blank" href="http://cpro.baidu.com/cpro/ui/uijs.php?adclass=0&app_id=0&c=news&cf=1001&ch=0&di=128&fv=0&is_app=0&jk=d14555d819ab7000&k=xml&k0=xml&kdi0=0&luki=10&n=10&p=baidu&q=06011078_cpr&rb=0&rs=1&seller_id=1&sid=70ab19d85545d1&ssp2=1&stid=0&t=tpclicked3_hc&tu=u1922429&u=http%3A%2F%2Fwww%2Eadmin10000%2Ecom%2Fdocument%2F1117%2Ehtml&urlid=0" id="17_nwl"><span style="color:#0000ff;font-size:14px;width:auto;height:auto;float:none;">xml</span></a></span>-stylesheet href="footnote.xsl" type="text/xsl"?>  
  2. <html  
  3.     xmlns="http://www.w3.org/1999/xhtml"  
  4.     xmlns:a="http://sourceforge.net/projects/arbalo/"  
  5. >  
  6.     <<span style="width: auto; height: auto; float: none;" id="18_nwp"><a style="text-decoration: none;" mpid="18" target="_blank" href="http://cpro.baidu.com/cpro/ui/uijs.php?adclass=0&app_id=0&c=news&cf=1001&ch=0&di=128&fv=0&is_app=0&jk=d14555d819ab7000&k=head&k0=head&kdi0=0&luki=9&n=10&p=baidu&q=06011078_cpr&rb=0&rs=1&seller_id=1&sid=70ab19d85545d1&ssp2=1&stid=0&t=tpclicked3_hc&tu=u1922429&u=http%3A%2F%2Fwww%2Eadmin10000%2Ecom%2Fdocument%2F1117%2Ehtml&urlid=0" id="18_nwl"><span style="color:#0000ff;font-size:14px;width:auto;height:auto;float:none;">head</span></a></span>/>  
  7.     <body>  
  8.         <p>  
  9.             This example looks a little scientific   
  10.             <a:ref>  
  11.                 From Latin   
  12.                 <em>scientia</em>  
  13.             </a:ref>  
  14.             and academic   
  15.             <a:ref>From Greek akademia</a:ref>.   
  16.         </p>  
  17.         <p>  
  18.             Do you know why?   
  19.             <a:ref>  
  20.                 It uses   
  21.                 <em>footnotes</em>.   
  22.             </a:ref>  
  23.         </p>  
  24.         <p>Reduce size of window to verify links are generated.</p>  
  25.             
  26.         
  27.     </body>  
  28. </html>  

　　目标文档将脚注列表包含在底部，如清单 7 所示。

　　清单 7. 目标文档（在 samples/footnote.html 中）

 

XML/HTML Code复制内容到剪贴板
  1. <html  
  2.     <span style="width: auto; height: auto; float: none;" id="14_nwp"><a style="text-decoration: none;" mpid="14" target="_blank" href="http://cpro.baidu.com/cpro/ui/uijs.php?adclass=0&app_id=0&c=news&cf=1001&ch=0&di=128&fv=0&is_app=0&jk=d14555d819ab7000&k=xml&k0=xml&kdi0=0&luki=10&n=10&p=baidu&q=06011078_cpr&rb=0&rs=1&seller_id=1&sid=70ab19d85545d1&ssp2=1&stid=0&t=tpclicked3_hc&tu=u1922429&u=http%3A%2F%2Fwww%2Eadmin10000%2Ecom%2Fdocument%2F1117%2Ehtml&urlid=0" id="14_nwl"><span style="color:#0000ff;font-size:14px;width:auto;height:auto;float:none;">xml</span></a></span>ns="http://www.w3.org/1999/xhtml"  
  3.    xmlns:h="http://www.w3.org/1999/xhtml"  
  4.    xmlns:a="http://sourceforge.net/projects/arbalo/">  
  5.    <<span style="width: auto; height: auto; float: none;" id="15_nwp"><a style="text-decoration: none;" mpid="15" target="_blank" href="http://cpro.baidu.com/cpro/ui/uijs.php?adclass=0&app_id=0&c=news&cf=1001&ch=0&di=128&fv=0&is_app=0&jk=d14555d819ab7000&k=head&k0=head&kdi0=0&luki=9&n=10&p=baidu&q=06011078_cpr&rb=0&rs=1&seller_id=1&sid=70ab19d85545d1&ssp2=1&stid=0&t=tpclicked3_hc&tu=u1922429&u=http%3A%2F%2Fwww%2Eadmin10000%2Ecom%2Fdocument%2F1117%2Ehtml&urlid=0" id="15_nwl"><span style="color:#0000ff;font-size:14px;width:auto;height:auto;float:none;">head</span></a></span<link type="text/<span style="width: auto; height: auto; float: none;" id="16_nwp"><a style="text-decoration: none;" mpid="16" target="_blank" href="http://cpro.baidu.com/cpro/ui/uijs.php?adclass=0&app_id=0&c=news&cf=1001&ch=0&di=128&fv=0&is_app=0&jk=d14555d819ab7000&k=css&k0=css&kdi0=0&luki=8&n=10&p=baidu&q=06011078_cpr&rb=0&rs=1&seller_id=1&sid=70ab19d85545d1&ssp2=1&stid=0&t=tpclicked3_hc&tu=u1922429&u=http%3A%2F%2Fwww%2Eadmin10000%2Ecom%2Fdocument%2F1117%2Ehtml&urlid=0" id="16_nwl"><span style="color:#0000ff;font-size:14px;width:auto;height:auto;float:none;">css</span></a></span>" rel="stylesheet" href="common.css"/></head>  
  6.    <body>  
  7.       <p>This example looks a little scientific   
  8.          <a name="ref-1"/><a href="#reference-1" class="footnote">v 1</a>  
  9.          and academic.   
  10.          <a name="ref-2"/><a href="#reference-2" class="footnote">v 2lt;/a>  
  11.       </p>  
  12.       <p>Do you know why?   
  13.          <a name="ref-3"/><a href="#reference-3" class="footnote">v 3</a>  
  14.       </p>  
  15.       <p>Reduce size of window to verify links are generated.</p>  
  16.       br/><br/>  
  17.    <hr/>  
  18.    <p><a name="reference-1"/><a href="#ref-1" class="footnote"> ^1</a>  
  19.       From Latin   
  20.       <em>scientia</em>  
  21.    </p>  
  22.    <p><a name="reference-2"/>  
  23.       <a href="#ref-2" class="footnote"> ^2</a>From Greek akademia</p>  
  24.    <p><a name="reference-3"/><a href="#ref-3" class="footnote"> ^3</a>  
  25.       It uses   
  26.       <em>footnotes</em>.   
  27.    </p>  
  28.    </body>  
  29. </html>  

突破源文档的边界

　　也可引用其他源文档的其中一些部分。a:include 指令包含一个可能属于另一个源文档的元素并转换它，如清单 8 所示。

　　清单 8. 样式表（在 samples/include.xsl 中）

 

XML/HTML Code复制内容到剪贴板
  1. <s:stylesheet  
  2.     <span style="width: auto; height: auto; float: none;" id="12_nwp"><a style="text-decoration: none;" mpid="12" target="_blank" href="http://cpro.baidu.com/cpro/ui/uijs.php?adclass=0&app_id=0&c=news&cf=1001&ch=0&di=128&fv=0&is_app=0&jk=d14555d819ab7000&k=xml&k0=xml&kdi0=0&luki=10&n=10&p=baidu&q=06011078_cpr&rb=0&rs=1&seller_id=1&sid=70ab19d85545d1&ssp2=1&stid=0&t=tpclicked3_hc&tu=u1922429&u=http%3A%2F%2Fwww%2Eadmin10000%2Ecom%2Fdocument%2F1117%2Ehtml&urlid=0" id="12_nwl"><span style="color:#0000ff;font-size:14px;width:auto;height:auto;float:none;">xml</span></a></span>ns="http://www.w3.org/1999/xhtml"  
  3.     xmlns:a="http://sourceforge.net/projects/arbalo/"  
  4.     xmlns:s="http://www.w3.org/1999/XSL/Transform"  
  5.     version="1.0"  
  6. >  
  7.     <s:import href="common.xsl"/>  
  8.     <s:template  match="a:include">  
  9.         <s:choose>  
  10.             <s:when test="0!=string-length(@src)">  
  11.                 <s:apply-templates  
  12.                     select="document(@src)//*[@id=current()/@refid]"/>  
  13.             </s:when>  
  14.             <s:when test="not(@<span style="width: auto; height: auto; float: none;" id="13_nwp"><a style="text-decoration: none;" mpid="13" target="_blank" href="http://cpro.baidu.com/cpro/ui/uijs.php?adclass=0&app_id=0&c=news&cf=1001&ch=0&di=128&fv=0&is_app=0&jk=d14555d819ab7000&k=src&k0=src&kdi0=0&luki=7&n=10&p=baidu&q=06011078_cpr&rb=0&rs=1&seller_id=1&sid=70ab19d85545d1&ssp2=1&stid=0&t=tpclicked3_hc&tu=u1922429&u=http%3A%2F%2Fwww%2Eadmin10000%2Ecom%2Fdocument%2F1117%2Ehtml&urlid=0" id="13_nwl"><span style="color:#0000ff;font-size:14px;width:auto;height:auto;float:none;">src</span></a></span>) and //a:default[1]/@src">  
  15.                 <s:apply-templates  
  16. select="document(//a:default[1]/@src)//*[@id=current()/@refid]"/>  
  17.             </s:when>  
  18.             <s:when test="0=string-length(@src) or not(//a:default[1]/@src)">  
  19.                 <s:apply-templates  
  20.                     select="//*[@id=current()/@refid]"/>  
  21.             </s:when>  
  22.         </s:choose>  
  23.     </s:template>  
  24. </s:stylesheet>  

　　源文档中的一个 a:include 指令引用源元素的 id。包含该元素的文档可在一个 src 属性中命名。如果缺少该属性，将使用 a:default 指令的 src 属性。如果在任何地方都没有 src 属性，则使用同一个源文档。因此，refid 会引用 id 来避免无限的递归。

　　导入的元素可能具有一种复杂的类型，并在包含 (apply-templates)之后进行转换。清单 9、清单 10 和清单 11 给出了示例。

　　清单 9. 源文档（在 samples/include.xml 中）

 

XML/HTML Code复制内容到剪贴板
  1. <?<span style="width: auto; height: auto; float: none;" id="7_nwp"><a style="text-decoration: none;" mpid="7" target="_blank" href="http://cpro.baidu.com/cpro/ui/uijs.php?adclass=0&app_id=0&c=news&cf=1001&ch=0&di=128&fv=0&is_app=0&jk=d14555d819ab7000&k=xml&k0=xml&kdi0=0&luki=10&n=10&p=baidu&q=06011078_cpr&rb=0&rs=1&seller_id=1&sid=70ab19d85545d1&ssp2=1&stid=0&t=tpclicked3_hc&tu=u1922429&u=http%3A%2F%2Fwww%2Eadmin10000%2Ecom%2Fdocument%2F1117%2Ehtml&urlid=0" id="7_nwl"><span style="color:#0000ff;font-size:14px;width:auto;height:auto;float:none;">xml</span></a></span>-stylesheet href="include.xsl" type="text/xsl"?>  
  2. <html  
  3.     xmlns="http://www.w3.org/1999/xhtml"  
  4.     xmlns:a="http://sourceforge.net/projects/arbalo/">  
  5.     <<span style="width: auto; height: auto; float: none;" id="8_nwp"><a style="text-decoration: none;" mpid="8" target="_blank" href="http://cpro.baidu.com/cpro/ui/uijs.php?adclass=0&app_id=0&c=news&cf=1001&ch=0&di=128&fv=0&is_app=0&jk=d14555d819ab7000&k=head&k0=head&kdi0=0&luki=9&n=10&p=baidu&q=06011078_cpr&rb=0&rs=1&seller_id=1&sid=70ab19d85545d1&ssp2=1&stid=0&t=tpclicked3_hc&tu=u1922429&u=http%3A%2F%2Fwww%2Eadmin10000%2Ecom%2Fdocument%2F1117%2Ehtml&urlid=0" id="8_nwl"><span style="color:#0000ff;font-size:14px;width:auto;height:auto;float:none;">head</span></a></span  
  6.         <a:default <span style="width: auto; height: auto; float: none;" id="9_nwp"><a style="text-decoration: none;" mpid="9" target="_blank" href="http://cpro.baidu.com/cpro/ui/uijs.php?adclass=0&app_id=0&c=news&cf=1001&ch=0&di=128&fv=0&is_app=0&jk=d14555d819ab7000&k=src&k0=src&kdi0=0&luki=7&n=10&p=baidu&q=06011078_cpr&rb=0&rs=1&seller_id=1&sid=70ab19d85545d1&ssp2=1&stid=0&t=tpclicked3_hc&tu=u1922429&u=http%3A%2F%2Fwww%2Eadmin10000%2Ecom%2Fdocument%2F1117%2Ehtml&urlid=0" id="9_nwl"><span style="color:#0000ff;font-size:14px;width:auto;height:auto;float:none;">src</span></a></span>="includedY.xml"/>  
  7.     </head>  
  8.     <body>  
  9.         <p>The following text is included:</p>  
  10.         <a:include refid="x" src="includedX.xml"/>  
  11.         <a:include refid="y1"/>  
  12.         <p id="i"><span style="width: auto; height: auto; float: none;" id="10_nwp"><a style="text-decoration: none;" mpid="10" target="_blank" href="http://cpro.baidu.com/cpro/ui/uijs.php?adclass=0&app_id=0&c=news&cf=1001&ch=0&di=128&fv=0&is_app=0&jk=d14555d819ab7000&k=double&k0=double&kdi0=0&luki=6&n=10&p=baidu&q=06011078_cpr&rb=0&rs=1&seller_id=1&sid=70ab19d85545d1&ssp2=1&stid=0&t=tpclicked3_hc&tu=u1922429&u=http%3A%2F%2Fwww%2Eadmin10000%2Ecom%2Fdocument%2F1117%2Ehtml&urlid=0" id="10_nwl"><span style="color:#0000ff;font-size:14px;width:auto;height:auto;float:none;">double</span></a></span></p>  
  13.         <a:include refid="y2"/>  
  14.         <a:include refid="i" src=""/>  
  15.     </body>  
  16. </html>  

　　清单 10. 源文档的部分（在 samples/includeY.xml 中）

XML/HTML Code复制内容到剪贴板
  1. <h2 id="y2">I'm the <em>included</em> h2</h2>  
  2. <h1 id="y1">I'm the <em>included</em> h1</h1>  

　　清单 11. 目标文档（在 samples/include.html 中）
 

XML/HTML Code复制内容到剪贴板
  1. <body>  
  2.         <p>The following text is included:</p>  
  3.         <p id="x">I'm the <em>included</em> paragraph.</p>  
  4.         <h1 id="y1">I'm the <em>included</em> h1</h1>  
  5.         <p id="i"><span style="width: auto; height: auto; float: none;" id="6_nwp"><a style="text-decoration: none;" mpid="6" target="_blank" href="http://cpro.baidu.com/cpro/ui/uijs.php?adclass=0&app_id=0&c=news&cf=1001&ch=0&di=128&fv=0&is_app=0&jk=d14555d819ab7000&k=double&k0=double&kdi0=0&luki=6&n=10&p=baidu&q=06011078_cpr&rb=0&rs=1&seller_id=1&sid=70ab19d85545d1&ssp2=1&stid=0&t=tpclicked3_hc&tu=u1922429&u=http%3A%2F%2Fwww%2Eadmin10000%2Ecom%2Fdocument%2F1117%2Ehtml&urlid=0" id="6_nwl"><span style="color:#0000ff;font-size:14px;width:auto;height:auto;float:none;">double</span></a></span></p>  
  6.         <h2 id="y2">I'm the <em>included</em> h2</h2>  
  7.         <p id="i">double</p>  
  8.     </body>  
  9. </html>  

主文档和导航

　　如果您有一个包含多个页面的演示，有一个主文档包含页面标题及其链接。您可以生成完整的导航，从每个页面到任何其他页面，以及到前一个和后一个页面。这些细节不属于本文的介绍范围，但 参考资料 中提供了使用主文档的 HTML 演示的链接。可将 .xml 替换为 .html 来获得编译后的版本。让浏览器向您显示 .xml 的整洁源代码。您会对它生成的源代码量感到惊奇。
解释与编译的对比

　　解释意味着页面为 XML 格式（其文件扩展名为 .xml，其内容类型为文本/xml 或应用程序/xml），并且处理指令所引用的 XSLT 样式表可在浏览器中执行。

　　编译意味着浏览器看到的是 HTML（其文件扩展名为 .html，内容类型为文本/html），它是在请求页面之前从您的开发环境中或服务器上的 XML 转换而来的。Xalan 和 Saxon 都是著名的 XSLT 处理器。

　　解释是未来的发展方向。所有现代浏览器都支持 XSLT，并且它具有一些优点：

    当测试时，您会立即获得结果。只需在您测试的每个浏览器中按下 F5，即可反映源页面、CSS 和 XSLT 样式表的更改。
    要传递给客户端的信息量减少了。
    客户端看到的是一个干净、整洁的网页，因为还未生成扩充内容。

　　但也要注意一些缺点：

    有一些旧浏览器可能不支持 XSLT。如果向一个受控的环境（内部网）发布页面，就不会出现问题。
    一些现代浏览器禁止 XSLT 样式表引用另一个目录中的另一个样式表。
    将 XSLT 域其他功能相结合（比如 SVG 或 iframe）可能在一些浏览器中导致问题。
    因为大部分浏览器都不支持 XSLT 2.0 或即将推出的 3.0，所以您无法使用新功能。没有 XPath 2.0 if () then … else，也没有用户编写的 XPath 功能。

　　无论进行编译还是解释，页面的其他转换 (CSS、JavaScript) 都会在 XSLT 转换之后执行。
结束语

　　在本文中，您学习了如何使用 XSLT 样式表来扩充 XHTML 文档。您可以使用本文中的示例作为起点，构建您自己的 XSLT 样式表。

文章和XML示例

华山资源网 Design By www.eoogi.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
华山资源网 Design By www.eoogi.com
www.eoogi.com 华山资源网
120,135影音资源
344,641技术资源
22,817软件资源
435,032站长资源

更新日志

友情链接

杰晶网络 DDR爱好者之家 桃源资源网 杰网资源 富贵资源网 南强小屋 铁雪资源网 幽灵资源网 万梅资源网 狼山资源网 白云岛资源网 昆仑资源网 相思资源网 明霞山资源网 内蒙古资源网 黑松山资源网 茶园资源网 饿虎岗资源网 大旗谷资源网 常春岛资源网 岱庙资源网 兴国资源网 快活林资源网 蝙蝠岛资源网 帝王谷资源网 白云城资源网 伏龙阁资源网 清风细雨楼 天枫庄资源网 圆月山庄资源网 无争山庄资源网 神水资源网 移花宫资源网 神剑山庄资源网 无为清净楼资源网 金钱帮资源网 丐帮资源网 华山资源网 极乐门资源网 小李飞刀资源网 凤求凰客栈 风云阁资源网 金狮镖局 鸳鸯亭资源网 千金楼资源网 更多链接
华山资源网 Design By www.eoogi.com