制作HTML5百科页⾯
先建⼀个index.html(⾸页)，代码如下：
html制作一个网页<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML5 百科</title>
</head>
<body>
<p align="center">
<a href="page01.html" target="_self"><img src="images/index.jpg" alt="传智播客设计学院UI设计师"></a>
</p>
</body>
</html>
⾸页的效果图（其实也就是⼀张图⽚）：
当点击⾸页图⽚，使它跳转到另⼀个页⾯。所以再建⼀个page01.html（页⾯⼀），代码如下：
<title>HTML5 百科</title>
</head>
<body>
<h2 align="center">HTML5 百科</h2>
<img src="images/a.jpg" alt="传智播客设计学院UI设计师" align="left" hspace="60" height="510px"/>
<hr size="3" color="#CCCCCC"/>
<p>●    <strong>HTML5</strong>是<strong>HTML</strong>即超⽂本标记语⾔或超⽂本链接标⽰语⾔的第五个版本.⽬前⼴泛使⽤的是<strong>HTML4.01</strong></p>
<p>●    <strong>HTML5</strong>草案的前⾝名为<strong>Web Applications 1.0</strong>。</p>
<p>●    <em>2004</em>年被<strong>WHATWG</strong>提出。</p>
<p>●    <em>2007</em>年被<strong>W3C</strong>接纳，并成⽴了新的<strong>HTML</strong>⼯作团队。</p>
<p>●    <em>2008年1⽉22⽇</em>，第⼀份正式草案公布。</p>
<hr size="3" color="#CCCCCC"><br/>
<a href="page02.html"><img src="images/down.png" alt="下⼀页" vspase="20"></a>
<a href="index.html"><img src="images/return.png" alt="返回" vspase="20" align="right"></a>
</div>
</body>
</html>
页⾯⼀的效果图，如下：
当点击页⾯⼀中的返回时，跳转到⾸页；
当点击页⾯⼀中的下⼀页时，跳转到page02.html（页⾯⼆）。
最后再建个page02.html(页⾯⼆)，代码如下：
<title>HTML5 百科</title>
</head>
<body>
<h2 align="center">HTML5 百科</h2>
<img src="images/b.jpg" alt="传智播客设计学院UI设计师" align="left" hspace="40"/>
<hr size="3" color="#CCCCCC">
<img src="images/b1.jpg">
<img src="images/b2.jpg">
<hr size="3" color="#CCCCCC">
<br/>
<a href="page01.html"><img src="images/up.png" alt="上⼀页" hspase="20"></a>
<a href="index.html"><img src="images/return.png" alt="返回" vspase="20" align="right"></a>
</body>
</html>
page02.html(页⾯⼆)的效果图，如下：
当点击页⾯⼆中的返回时，跳转到⾸页；
当点击页⾯⼆中的上⼀页时，跳转到page01.html（页⾯⼀）。
重点：
1.绝对路径
绝对路径是指⽂件在硬盘上真正存在的路径。
如果要使⽤绝对路径指定⽹页的图⽚，应该使⽤以下语句：
<b ody backround=“E:\book\⽹页布局\代码\第2章\bg.jpg” >
2.相对路径
所谓相对路径，就是相对于⾃⼰的⽬标⽂件位置。
在同⼀个⽬录: <body background=“bg.jpg”>
在其所在⽬录的“img”⼦⽬录⾥:<body background=“img/bg.jpg”> (由于“img”⽬录是“第2章”⽬录下的⼦⽬录，因此
在“img”前不⽤再加上“/”字符。)
在其所在⽬录的上级⽬录⾥:<body background="…/bg.jpg"> (在相对路径⾥常使⽤“…/”来表⽰上⼀级⽬录。如果有多个上⼀级⽬录，可以使⽤多个“…/”.)
在其所在⽬录的上级⽬录⾥的“img”⼦⽬录⾥:<body background="…/img/bg.jpg">
声明：“来⾃于⽹络，如果侵犯著作权，请联系删除”

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。