您的位置：首页 > Web前端 > HTML

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

2016-06-20 14:54 405 查看
 XML文档描述了数据的结构，并且可以用自定义的标记元素描述数据意义，而且实现了记录数据的功能。如果想要将XML的数据显示在网页页面上，如何做呢？

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

[html] view
plain copy

 print?

<?xml version="1.0" encoding="iso-8859-1"?>  

<myDogs>  

   <dog>  

      <name>Casey</name>  

      <age>2</age>  

      <fullBlood>yes</fullBlood>  

      <color>Yellow</color>  

      </dog>  

</myDogs>  

上面的代码保存了一只狗的信息，保存成xml格式，拖到浏览器里运行就可以了，结果是是这样



       但这样的界面不够友好，如果我想用表格显示出信息，如何做到呢？那么可以将XML文档转换成HTML文档，以达到更有好的显示XML数据的目的。

      介绍具体步骤之前介绍下，XSLT（Extensible StyleSheet Language Transmations），是XSL（可扩展样式语言）的一种，是一种基于模版的样式转换语言，说的直接一点就是可以把XML文本转成其他格式的文本，那么一起来看转换的代码：

[html] view
plain copy

 print?

<?xml version="1.0" encoding="iso-8859-1"?>  

<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">  

  

<xsl:template match="/">  

<html>  

<head>  

    <title>Review of My Dogs</title>  

</head>  

<body>  

    <h4>list of My Dogs</h4>  

      

    <table width="100%" border="1">  

        <thead>  

            <tr>  

            <th>Name</th>  

            <th>Breed</th>  

            <th>Age</th>  

            <th>Full Blood</th>  

            <th>Color</th>  

            </tr>  

        </thead>  

        <tbody>  

            <xsl:apply-templates/>  

        </tbody>  

    </table>  

</body>  

</html>  

</xsl:template>  

  

<xsl:template match="dog">  

    <tr>  

        <td>  

            <strong><xsl:value-of select="name" /></strong>  

        </td>  

        <td><xsl:value-of select="@breed" /></td>  

        <td><xsl:apply-templates select="age" /></td>  

        <td><xsl:value-of select="fullBlood" /> </td>  

        <td><xsl:value-of select="color" /></td>  

    </tr>  

  

</xsl:template>  

  

<xsl:template match="age">  

    <xsl:value-of select="years" />years  

    <xsl:value-of select="months" />months  

</xsl:template>  

  

</xsl:stylesheet>  

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

[html] view
plain copy

 print?

<?xml version="1.0" encoding="iso-8859-1"?>  

<?xml-stylesheet type="text/xsl" href="mydogs.xsl"?>  

  

<myDogs>  

<dog breed="labrador">  

    <name>morgan</name>  

    <age>  

        <years>1</years>  

        <months>10</months>  

    </age>  

    <fullBlood>yes</fullBlood>  

    <color>Chocolate</color>  

</dog>  

</myDogs>  

运行就可以了，运行结果是这样：



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

随着互联网的发展，PHP，Android，unity3D等快速发展，用json比较多，不过xml还是应当学习一下的。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航