XSLT实现XML文档转换成HTML文档

  • Post author:
  • Post category:其他



XML文档描述了数据的结构,并且可以用自定义的标记元素描述数据意义,而且实现了记录数据的功能。


如果想要将XML的数据显示在网页页面上,如何做呢?




最简单的方式就是将XML文件直接用浏览器打开,在记事本里写几句简单的代码,例如:



  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文本转成其他格式的文本,


那么一起来看转换的代码:



  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. <


    xsl:template




    match


    =


    “/”


    >





  4. <


    html


    >





  5. <


    head


    >





  6. <


    title


    >


    Review of My Dogs


    </


    title


    >





  7. </


    head


    >





  8. <


    body


    >





  9. <


    h4


    >


    list of My Dogs


    </


    h4


    >






  10. <


    table




    width


    =


    “100%”




    border


    =


    “1”


    >





  11. <


    thead


    >





  12. <


    tr


    >





  13. <


    th


    >


    Name


    </


    th


    >





  14. <


    th


    >


    Breed


    </


    th


    >





  15. <


    th


    >


    Age


    </


    th


    >





  16. <


    th


    >


    Full Blood


    </


    th


    >





  17. <


    th


    >


    Color


    </


    th


    >





  18. </


    tr


    >





  19. </


    thead


    >





  20. <


    tbody


    >





  21. <


    xsl:apply-templates


    />





  22. </


    tbody


    >





  23. </


    table


    >





  24. </


    body


    >





  25. </


    html


    >





  26. </


    xsl:template


    >






  27. <


    xsl:template




    match


    =


    “dog”


    >





  28. <


    tr


    >





  29. <


    td


    >





  30. <


    strong


    >


    <


    xsl:value-of




    select


    =


    “name”




    />


    </


    strong


    >





  31. </


    td


    >





  32. <


    td


    >


    <


    xsl:value-of




    select


    =


    “@breed”




    />


    </


    td


    >





  33. <


    td


    >


    <


    xsl:apply-templates




    select


    =


    “age”




    />


    </


    td


    >





  34. <


    td


    >


    <


    xsl:value-of




    select


    =


    “fullBlood”




    />




    </


    td


    >





  35. <


    td


    >


    <


    xsl:value-of




    select


    =


    “color”




    />


    </


    td


    >





  36. </


    tr


    >






  37. </


    xsl:template


    >






  38. <


    xsl:template




    match


    =


    “age”


    >





  39. <


    xsl:value-of




    select


    =


    “years”




    />


    years



  40. <


    xsl:value-of




    select


    =


    “months”




    />


    months



  41. </


    xsl:template


    >






  42. </


    xsl:stylesheet


    >






将上面的代码写在记事本里,保存成xsl格式,然后再XML文档中引入:



  1. <?


    xml




    version


    =


    “1.0”




    encoding


    =


    “iso-8859-1”


    ?>





  2. <?


    xml-stylesheet




    type


    =


    “text/xsl”




    href


    =


    “mydogs.xsl”


    ?>






  3. <


    myDogs


    >





  4. <


    dog




    breed


    =


    “labrador”


    >





  5. <


    name


    >


    morgan


    </


    name


    >





  6. <


    age


    >





  7. <


    years


    >


    1


    </


    years


    >





  8. <


    months


    >


    10


    </


    months


    >





  9. </


    age


    >





  10. <


    fullBlood


    >


    yes


    </


    fullBlood


    >





  11. <


    color


    >


    Chocolate


    </


    color


    >





  12. </


    dog


    >





  13. </


    myDogs


    >








运行就可以了,运行结果是这样:






这样显示的界面友好性就提升了。




随着互联网的发展,PHP,Android,unity3D等快速发展,用json比较多,不过xml还是应当学习一下的。



版权声明:本文为Esther_Heesch原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。