html5中文学习网

您的位置: 首页 > 网页制作 > xml教程 » 正文

学习XML关于图像超链接的制作_XML/XSLT_网页制作

[ ] 已经帮助:人解决问题
点评:这是我今天学习的时候遇到的另一个问题,做图像超链接要把链接地址放到<a>的href属性中去,可是这就是在标签中套标签,是不可以的,查了《Web编程实做教程》,才知道正确的解决方案,现在与大家分享。 此段代码运行需要两张图片:a.gif和b.gif。my.xml以下内
X5rHTML5中文学习网 - HTML5先行者学习网
这是我今天学习的时候遇到的另一个问题,做图像超链接要把链接地址放到<a>的href属性中去,可是这就是在标签中套标签,是不可以的,查了《Web编程实做教程》,才知道正确的解决方案,现在与大家分享。 X5rHTML5中文学习网 - HTML5先行者学习网
此段代码运行需要两张图片:a.gif和b.gif。X5rHTML5中文学习网 - HTML5先行者学习网
my.xmlX5rHTML5中文学习网 - HTML5先行者学习网
以下内容为程序代码:X5rHTML5中文学习网 - HTML5先行者学习网
<?xml version="1.0" encoding="GB2312"?>X5rHTML5中文学习网 - HTML5先行者学习网
<?xml-stylesheet type="text/xsl" href="mystyle.xsl"?>X5rHTML5中文学习网 - HTML5先行者学习网
<Books>X5rHTML5中文学习网 - HTML5先行者学习网
<Book ID="a001">X5rHTML5中文学习网 - HTML5先行者学习网
<Name>网络指南</Name>X5rHTML5中文学习网 - HTML5先行者学习网
<Photo>a.gif</Photo>X5rHTML5中文学习网 - HTML5先行者学习网
<Homepage>http://www.a.com</Homepage>X5rHTML5中文学习网 - HTML5先行者学习网
</Book>X5rHTML5中文学习网 - HTML5先行者学习网
<Book ID="a002">X5rHTML5中文学习网 - HTML5先行者学习网
<Name>局域网技术</Name>X5rHTML5中文学习网 - HTML5先行者学习网
<Photo>b.gif</Photo>X5rHTML5中文学习网 - HTML5先行者学习网
<Homepage>http://www.b.com</Homepage>X5rHTML5中文学习网 - HTML5先行者学习网
</Book>X5rHTML5中文学习网 - HTML5先行者学习网
</Books>X5rHTML5中文学习网 - HTML5先行者学习网
X5rHTML5中文学习网 - HTML5先行者学习网
mystyle.xslX5rHTML5中文学习网 - HTML5先行者学习网
以下内容为程序代码:X5rHTML5中文学习网 - HTML5先行者学习网
<?xml version="1.0" encoding="GB2312"?>X5rHTML5中文学习网 - HTML5先行者学习网
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">X5rHTML5中文学习网 - HTML5先行者学习网
<xsl:template match="Books/Book">X5rHTML5中文学习网 - HTML5先行者学习网
<xsl:element name="a">X5rHTML5中文学习网 - HTML5先行者学习网
<xsl:attribute name="href">X5rHTML5中文学习网 - HTML5先行者学习网
<xsl:value-of select="./Homepage"/>X5rHTML5中文学习网 - HTML5先行者学习网
</xsl:attribute>X5rHTML5中文学习网 - HTML5先行者学习网
<xsl:element name="img">X5rHTML5中文学习网 - HTML5先行者学习网
<xsl:attribute name="src">X5rHTML5中文学习网 - HTML5先行者学习网
<xsl:value-of select="./Photo"/>X5rHTML5中文学习网 - HTML5先行者学习网
</xsl:attribute>X5rHTML5中文学习网 - HTML5先行者学习网
</xsl:element>X5rHTML5中文学习网 - HTML5先行者学习网
</xsl:element>X5rHTML5中文学习网 - HTML5先行者学习网
<br/>X5rHTML5中文学习网 - HTML5先行者学习网
</xsl:template>X5rHTML5中文学习网 - HTML5先行者学习网
</xsl:stylesheet>X5rHTML5中文学习网 - HTML5先行者学习网
X5rHTML5中文学习网 - HTML5先行者学习网
在浏览器上的显示结果:X5rHTML5中文学习网 - HTML5先行者学习网
竖向平列显示两个图片。X5rHTML5中文学习网 - HTML5先行者学习网
说明:X5rHTML5中文学习网 - HTML5先行者学习网
使用超链接,需要借助<xsl:element>和<xsl:attribute>两个标签,基本使用方法就可以参照上边的例子,在深奥一点的,如果你想出来了,记得要和大家分享哟。X5rHTML5中文学习网 - HTML5先行者学习网
长见识,嘿嘿,这个可是真是第一次看见。X5rHTML5中文学习网 - HTML5先行者学习网
{Homepage}X5rHTML5中文学习网 - HTML5先行者学习网
<xsl:value-of select="Homepage"/>X5rHTML5中文学习网 - HTML5先行者学习网
两个在任何时候都是等价的吧? X5rHTML5中文学习网 - HTML5先行者学习网
你上边的代码和我原来的效果有点小差别,我帮你完善一下:X5rHTML5中文学习网 - HTML5先行者学习网
mystyle.xslX5rHTML5中文学习网 - HTML5先行者学习网
<?xml version="1.0" encoding="GB2312"?>X5rHTML5中文学习网 - HTML5先行者学习网
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">X5rHTML5中文学习网 - HTML5先行者学习网
<xsl:template match="Books/Book">X5rHTML5中文学习网 - HTML5先行者学习网
<a href="{Homepage}">X5rHTML5中文学习网 - HTML5先行者学习网
<img src="{Photo}"/>X5rHTML5中文学习网 - HTML5先行者学习网
</a>X5rHTML5中文学习网 - HTML5先行者学习网
</xsl:template>X5rHTML5中文学习网 - HTML5先行者学习网
</xsl:stylesheet>
(责任编辑:)
推荐书籍
推荐资讯
关于HTML5先行者 - 联系我们 - 广告服务 - 友情链接 - 网站地图 - 版权声明 - 人才招聘 - 帮助