2.10 HTML5-百科案例_编程_编程学习-IT料理

案例效果图

IT料理

分析效果图

结构分析

　　案例包含三个页面，首页只有一张图像，点击图像进入到HTML5百科的介绍，点击下一页进入到最后一个页面。

代码

首页代码

<!doctype html>  
<html>  
<head>  
<meta charset="utf-8">  
<title>HTML5百科</title>  
</head>  
<body>  
<p align="center">  
    <a href="page01.html" target="_self">
          <img src="html5.jpg" alt="IT料理"/>
    </a>
</p>  
</body>  
</html>

HTML5百科页面1

<!doctype html>  
<html>  
<head>  
<meta charset="utf-8">  
<title>HTML5百科</title>  
</head>  
<body>  
<h2 align="center">HTML5百科</h2>  
<img src="a.jpg" alt="IT料理" align="left" style="margin: auto 20px auto 30px"/>  
<hr size="3" color="#CCCCCC" >  
<ul>  
<p> &nbsp&nbsp<strong>HTML5</strong>是<strong>HTML</strong>即超文本标记语言或超文本链接标示语言的第五个版本.目前广泛使用的是<strong>HTML4.01</strong>。</p>  
<p>&nbsp&nbsp<strong >HTML5</strong>草案的前身名为<strong>Web Applications 1.0</strong>。</p>  
<p>&nbsp&nbsp<em>2004</em>年被<strong>WHATWG</strong>提出。</p>  
<p>&nbsp&nbsp<em>2007</em>年被<strong>W3C</strong>接纳，并成立了新的<strong>HTML</strong>工作团队。</p>  
<p>&nbsp&nbsp<em>2008年1月22日</em>，第一份正式草案公布。</p>  
</ul>  
<hr size="3" color="#CCCCCC" >  
<a href="page02.html"><img src="down.png" alt="下一页" ></a>  
<a href="example18.html"><img src="return.png" alt="返回"  align="right"></a>  
</body>  
</html>

html5百科页面2

<!doctype html>  
<html>  
<head>  
<meta charset="utf-8">  
<title>HTML5百科</title>  
</head>  
<body>  
<h2 align="center">HTML5百科</h2>  
<img src="b.jpg" alt="IT料理" align="left" style="margin: auto 20px auto 30px "/>  
<hr size="3" color="#CCCCCC" >  
<img src="images/pic01.jpg">

<hr size="3" color="#CCCCCC" >  
<a href="page01.html"><img src="up.png" alt="上一页" ></a>  
<a href="example18.html"><img src="return.png" alt="返回" align="right"></a>  
</body>  
</html>