將XSLT作為HTML的樣式表的使用方法示例

 簡介　　

當聽到樣式表這個詞時，您可能會想到 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=
3. xml&kdi0=0&luki=10&n=10&p=baidu&q=06011078_cpr&rb=0&rs=1&seller_id=1&sid=70ab19d85545d1&ssp2=
4. 1&stid=0&t=tpclicked3_hc&tu=u1922429&u=http%3A%2F%2Fwww%2Eadmin10000%2Ecom%2Fdocument%2
5. F1117%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"
6. xmlns:h="http://www.w3.org/1999/xhtml"
7. xmlns:a="http://sourceforge.net/projects/arbalo/"
8. xmlns:s="http://www.w3.org/1999/XSL/Transform"
9. exclude-result-prefixes="a h"
10. version="1.0"
11. >
12. <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=
13. head&kdi0=0&luki=9&n=10&p=baidu&q=06011078_cpr&rb=0&rs=1&seller_id=1&sid=70ab19d85545d1&ssp2
14. =1&stid=0&t=tpclicked3_hc&tu=u1922429&u=http%3A%2F%2Fwww%2Eadmin10000%2Ecom%2Fdocument%
15. 2F1117%2Ehtml&urlid=0" id="25_nwl"><span style="color:#0000ff;font-size:14px;width:auto;height:auto;float:none;">head</span></a></span>">
16. <s:copy>
17. <s:apply-templates select="@*|node()"/>
18. <meta
19. http-equiv="content-type"
20. content="text/html;charset=UTF-8" />
21. <link
22. 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&k
23. 0=css&kdi0=0&luki=8&n=10&p=baidu&q=06011078_cpr&rb=0&rs=1&seller_id=1&sid=70ab19d85545d1&ss
24. p2=1&stid=0&t=tpclicked3_hc&tu=u1922429&u=http%3A%2F%2Fwww%2Eadmin10000%2Ecom%2Fdocument%
25. 2F1117%2Ehtml&urlid=0" id="26_nwl"><span style="color:#0000ff;font-size:14px;width:auto;height:auto;float:none;">css</span></a></span>"
26. rel="stylesheet"
27. type="text/css" />
28. </s:copy>
29. </s:template>
30.  
31. <s:template match="*">
32. <s:copy>
33. <s:copy-of select="@*"/>
34. <s:apply-templates/>
35. </s:copy>
36. </s:template>
37. </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
3. =xml&kdi0=0&luki=10&n=10&p=baidu&q=06011078_cpr&rb=0&rs=1&seller_id=1&sid=70ab19d85545d1&ss
4. p2=1&stid=0&t=tpclicked3_hc&tu=u1922429&u=http%3A%2F%2Fwww%2Eadmin10000%2Ecom%2Fdocum
5. ent%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"
6. xmlns:h="http://www.w3.org/1999/xhtml"
7. xmlns:s="http://www.w3.org/1999/XSL/Transform"
8. version="1.0"
9. >
10. <s:import href="common.xsl"/>
11. <s:template match="h:a[starts-with(@href,'#')]">
12. <s:copy>
13. <s:copy-of select="@*"/>
14. <s:variable name="name" select="substring-after(@href,'#')"/>
15. <s:choose>
16. <s:when test="preceding::h:a[@name=$name]">
17. <s:text>^</s:text>
18. </s:when>