怎么使用XSLT将 XML文件转化为HTML5的网页

怎么使用XSLT将 XML文件转化为HTML5的网页

在这篇文章中,我将展示怎么使用XSLT语言将 一个 XML 文件输出成HTML5 格式的网络页面.

让我们先看一下如下一个XML格式的文件 (movies.xml) ,文件包含了一些关于影片的相关信息:

<?xml version="1.0" encoding="UTF-8"?>

<movies> 
  <movie> 
    <title>Aliens</title> 
    <year>1986</year> 
    <rank>8.2</rank> 
  </movie> 
  <movie> 
    <title>Apollo 13</title> 
    <year>1995</year> 
    <rank>7.5</rank> 
  </movie> 
  <movie> 
    <title>Pi</title> 
    <year>1998</year> 
    <rank>7.1</rank> 
  </movie> 
</movies>

下一步就是通过使用XSL转化模板文件(movies.xsl) ,来将原来的XML文件转化为HTML5格式文件 :

<?xml version="1.0" encoding="UTF-8"?>

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

  <xsl:output method="html"
              doctype-system="about:legacy-compat"
              encoding="UTF-8"
              indent="yes" />

  <xsl:template match="/">
    <html>
      <head>
        <title>List of Movies.</title>

        <link rel="stylesheet" href="movies.css" />
      </head>
      <body>
        <table class="movies">
          <thead>
            <tr>
              <th>Title</th>
              <th>Year</th>
              <th>Rank</th>
            </tr>
          </thead>
          <tbody>
            <xsl:for-each select="movies/movie">
            <xsl:sort select="rank"/>
            <tr>
              <td><xsl:value-of select="title"/></td>
              <td><xsl:value-of select="year"/></td>
              <td><xsl:value-of select="rank"/></td>
            </tr>
            </xsl:for-each>
          </tbody>
        </table>
      </body>
    </html>
  </xsl:template>

</xsl:stylesheet>

模板中使用了一个CSS style 文件(movies.css) ,将用在转化的 HTML5 文件中:

table.movies {
  background-color: #CDCDCD;
  font-family: arial;
  margin: 10px 0pt 15px;
  font-size: 8pt;
  width: 100%;
  text-align: left;
}

table.movies thead tr th {
  background-color: #E6EEEE;
  border: 1px solid #FFF;
  font-size: 8pt;
  padding: 10px;
}

table.movies tbody tr td {
  background-color: #FFF;
  color: #3D3D3D;
  vertical-align: top;
  padding: 10px;
}

转化工作的最后一步就是将最初的XML文件和XSLT转化模板建立联系,重点如黑体字符中展示的:

<?xml version="1.0" encoding="UTF-8"?> 

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

<movies> 
  <movie> 
    <title>Aliens</title> 
    <year>1986</year> 
    <rank>8.2</rank> 
  </movie> 
  <movie> 
    <title>Apollo 13</title> 
    <year>1995</year> 
    <rank>7.5</rank> 
  </movie> 
  <movie> 
    <title>Pi</title> 
    <year>1998</year> 
    <rank>7.1</rank> 
  </movie> 
</movies>

现在,我们来看转化的结果。转化之前需要先创建一个目录和相关文件 movies.xml, movies.xsl and movies.css . 直接用浏览器将 movies.xml打开,你将看到 XML to HTML5 的转化结果.,但是如果你想看生成HTML5格式的结构,你需要使用一些网页的开发工具或调试工具。.

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值