怎么使用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格式的结构,你需要使用一些网页的开发工具或调试工具。.