XSLT實現XML文件轉換成HTML文件

王勝飛發表於2016-06-20
XMLHTML

 XML文件描述了資料的結構，並且可以用自定義的標記元素描述資料意義，而且實現了記錄資料的功能。如果想要將XML的資料顯示在網頁頁面上，如何做呢？


最簡單的方式就是將XML檔案直接用瀏覽器開啟，在記事本里寫幾句簡單的程式碼,例如:

[html] view plain copy
 print?
  1. <?xml version="1.0" encoding="iso-8859-1"?>  
  2. <myDogs>  
  3.    <dog>  
  4.       <name>Casey</name>  
  5.       <age>2</age>  
  6.       <fullBlood>yes</fullBlood>  
  7.       <color>Yellow</color>  
  8.       </dog>  
  9. </myDogs>  


上面的程式碼儲存了一隻狗的資訊，儲存成xml格式，拖到瀏覽器裡執行就可以了，結果是是這樣


       但這樣的介面不夠友好，如果我想用表格顯示出資訊，如何做到呢？那麼可以將XML文件轉換成HTML文件，以達到更有好的顯示XML資料的目的。

      介紹具體步驟之前介紹下，XSLT（Extensible StyleSheet Language Transmations），是XSL（可擴充套件樣式語言）的一種，是一種基於模版的樣式轉換語言，說的直接一點就是可以把XML文字轉成其他格式的文字，那麼一起來看轉換的程式碼：

[html] view plain copy
 print?
  1. <?xml version="1.0" encoding="iso-8859-1"?>  
  2. <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">  
  3.   
  4. <xsl:template match="/">  
  5. <html>  
  6. <head>  
  7.     <title>Review of My Dogs</title>  
  8. </head>  
  9. <body>  
  10.     <h4>list of My Dogs</h4>  
  11.       
  12.     <table width="100%" border="1">  
  13.         <thead>  
  14.             <tr>  
  15.             <th>Name</th>  
  16.             <th>Breed</th>  
  17.             <th>Age</th>  
  18.             <th>Full Blood</th>  
  19.             <th>Color</th>  
  20.             </tr>  
  21.         </thead>  
  22.         <tbody>  
  23.             <xsl:apply-templates/>  
  24.         </tbody>  
  25.     </table>  
  26. </body>  
  27. </html>  
  28. </xsl:template>  
  29.   
  30. <xsl:template match="dog">  
  31.     <tr>  
  32.         <td>  
  33.             <strong><xsl:value-of select="name" /></strong>  
  34.         </td>  
  35.         <td><xsl:value-of select="@breed" /></td>  
  36.         <td><xsl:apply-templates select="age" /></td>  
  37.         <td><xsl:value-of select="fullBlood" /> </td>  
  38.         <td><xsl:value-of select="color" /></td>  
  39.     </tr>  
  40.   
  41. </xsl:template>  
  42.   
  43. <xsl:template match="age">  
  44.     <xsl:value-of select="years" />years  
  45.     <xsl:value-of select="months" />months  
  46. </xsl:template>  
  47.   
  48. </xsl:stylesheet>  

將上面的程式碼寫在記事本里，儲存成xsl格式，然後再XML文件中引入：
[html] view plain copy
 print?
  1. <?xml version="1.0" encoding="iso-8859-1"?>  
  2. <?xml-stylesheet type="text/xsl" href="mydogs.xsl"?>  
  3.   
  4. <myDogs>  
  5. <dog breed="labrador">  
  6.     <name>morgan</name>  
  7.     <age>  
  8.         <years>1</years>  
  9.         <months>10</months>  
  10.     </age>  
  11.     <fullBlood>yes</fullBlood>  
  12.     <color>Chocolate</color>  
  13. </dog>  
  14. </myDogs>  


執行就可以了，執行結果是這樣：


這樣顯示的介面友好性就提升了。


隨著網際網路的發展，PHP，Android，unity3D等快速發展，用json比較多，不過xml還是應當學習一下的。

相關文章