在html页面中显示来自xml文档的信息

时间:2011-01-13 18:06:40

标签: html xml

我要做的是从html文档中读取此xml文档并在网页上显示内容。如何将xml文档中的信息导入到html文档中。

<?xml version="1.0"?>
<Family>
<Mom>Alison</Mom>
<age>44</age>
<son>Ian</son>
<age>8</age>
<son>Seth</son>
<age>4</age>
</Family>

=============================================== =================================== 这是我的HTML代码

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
        "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<title>Randy's second html web page !</title>
<style type="text/css">
body {background-image:url('Koala.gif');} 
h1
{
text-align:center;
font-size:600%;
}
h2
{
text-align:center;
font-size:300%;
color:maroon
}
p
{
text-align:center;
font-size:250%;
color:#00ff00;
}
div
{
background-color:#efffff;
}
a
{
text-align:center;
}
th
{
background-color:green;
}
tr
{
background-color:green;
}
table 
{
width: 200px; 
margin-left: auto; 
margin-right: auto; 
}
#google-link 
{ 
margin: 0 right; 
display: block;
font-size:250%;
color:#00ff00;
} 
#Mail-link
{
margin: 0 auto; 
display: block;
font-size:250%;
color:#00ff00;
text-decoration:underline;
position:fixed;
top:30px;
right:5px;
}
</style>
</head>
<body>
<h1> Family</h1>
<h2> By: Randy White</h2>
<P> Things are great here are the names of my family</P> 
<P><img src="Hydrangeas.jpg" width="150" height="100" alt="Hydrangeas.jpg"></P> 
<table border="1">
<tr>
<th>Month</th>
<th>Day</th>
<th>Year</th>
</tr>
<tr>
<td>December</td>
<td>13</td>
<td>2010</td>
</tr>
</table>
<a id="google-link" href="http://www.google.com">Visit Google!</a>
<a id="Mail-link" href="mailto:randywhite30@neb.rr.com">Contact Me!</a>
</body>
</html>

1 个答案:

答案 0 :(得分:0)

有几种方法可以做到这一点:

  1. 使用XSL将xml文档转换为另一种文档类型(HTML)。请参阅w3schools.com:http://w3schools.com/xsl/default.asp
  2. 使用javascript将xml值加载到网页的各个部分(jQuery使这非常简单)。请参阅http://www.switchonthecode.com/tutorials/xml-parsing-with-jquery或http://api.jquery.com/jQuery.ajax/