制作HTML5百科页面

先建一个index.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="data:images/index.jpg" alt="传智播客设计学院UI设计师"></a></p>
</body>
</html>

首页的效果图（其实也就是一张图片）：

当点击首页图片，使它跳转到另一个页面。所以再建一个page01.html（页面一），代码如下：

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>HTML5 百科</title>
</head>
<body><h2 align="center">HTML5 百科</h2><img src="data:images/a.jpg" alt="传智播客设计学院UI设计师" align="left" hspace="60" height="510px" /><hr size="3" color="#CCCCCC" /><p>●&nbsp;&nbsp;&nbsp;&nbsp;<strong>HTML5</strong>是<strong>HTML</strong> 即超文本标记语言或超文本链接标示语言的第五个版本.目前广泛使用的是<strong>HTML4.01</strong></p><p>●&nbsp;&nbsp;&nbsp;&nbsp;<strong>HTML5</strong>草案的前身名为<strong>Web Applications 1.0</strong>。</p><p>●&nbsp;&nbsp;&nbsp;&nbsp;<em>2004</em>年被<strong>WHATWG</strong>提出。</p><p>●&nbsp;&nbsp;&nbsp;&nbsp;<em>2007</em>年被<strong>W3C</strong>接纳，并成立了新的<strong>HTML</strong>工作团队。</p><p>●&nbsp;&nbsp;&nbsp;&nbsp;<em>2008年1月22日</em>，第一份正式草案公布。</p>   <hr size="3" color="#CCCCCC" ><br/><a href="page02.html"><img src="data:images/down.png" alt="下一页" vspase="20"></a><a href="index.html"><img src="data:images/return.png" alt="返回" vspase="20" align="right"></a>
</div>
</body>
</html>

页面一的效果图，如下：

当点击页面一中的返回时，跳转到首页；

当点击页面一中的下一页时，跳转到page02.html（页面二）。

最后再建个page02.html(页面二)，代码如下：

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>HTML5 百科</title>
</head>
<body><h2 align="center">HTML5 百科</h2><img src="data:images/b.jpg" alt="传智播客设计学院UI设计师" align="left" hspace="40" /><hr size="3" color="#CCCCCC" ><img src="data:images/b1.jpg"><img src="data:images/b2.jpg"><hr size="3" color="#CCCCCC" ><br/><a href="page01.html"><img src="data:images/up.png" alt="上一页" hspase="20"></a><a href="index.html"><img src="data:images/return.png" alt="返回" vspase="20" align="right"></a>
</body>
</html>

page02.html(页面二)的效果图，如下：

当点击页面二中的返回时，跳转到首页；

当点击页面二中的上一页时，跳转到page01.html（页面一）。

重点：

1.绝对路径

绝对路径是指文件在硬盘上真正存在的路径。
如果要使用绝对路径指定网页的图片,应该使用以下语句：
<body backround=“E:\book\网页布局\代码\第2章\bg.jpg” >

2.相对路径

所谓相对路径，就是相对于自己的目标文件位置。
在同一个目录: <bodybackground=“bg.jpg”>
在其所在目录的“img”子目录里:<bodybackground=“img/bg.jpg”> (由于“img”目录是“第2章”目录下的子目录，因此在“img”前不用再加上“/”字符。)
在其所在目录的上级目录里:<bodybackground="…/bg.jpg"> (在相对路径里常使用“…/”来表示上一级目录。如果有多个上一级目录，可以使用多个“…/”.)
在其所在目录的上级目录里的“img”子目录里:<bodybackground="…/img/bg.jpg">

声明：“来自于网络，如果侵犯著作权，请联系删除”

制作HTML5百科页面相关推荐

手机制作html蓝底白字,怎么制作html5手机页面？
匿名用户 1级 2014-10-08 回答随着CSS3的兴起,有一种叫rem的单位渐渐的出现在我们的视野中.它是一个相对单位,能实现响应式的那种.它是相对于html根元素来设置当前文字大小,或者宽高 ...
html的详情页面设计,HTML5+CSS3网页设计与制作实用教程单元7 网页特效与制作商品详情页面（105页）-原创力文档...
单元7网页特效与制作商品详情页面HTML5+CSS3网页设计与制作实用教程本章导读The chapter's introduction 将JavaScript 程序嵌入HTML 代码中,对网页元素进行 ...
玩转HTML5移动页面（转自http://tqtan.com/）
标题起得有点大(๑´ㅂ`๑),今天来谈谈H5移动页面的开发心得(技巧). 一般情况下,拿到设计稿你有两种选择: //条件表达式产物＝设计稿处理?静态输出:让页面动起来: 作为一个有志向的前端,当然不 ...
如何制作HTML5 SVG描边文字
在很多时候,SVG是最容易在网页上做出文字特效的方法.现在SVG已经被所有的现代浏览器支持,包括IE9.要在页面上制作SVG文字,可以直接将SVG代码插入带页面中,SVG文字代码十分简单易懂.如下是一 ...
不懂技术，如何轻松制作微信H5页面？
H5这个由HTML5简化而来的词汇,正通过微信广泛传播.H5是集文字.图片.音乐.视频.链接等多种形式的展示页面,丰富的控件.灵活的动画特效.强大的交互.实现信息传播,非常适合通过手机的展示.分享.也 ...
h5在线制作html5,在线制作HTML5多媒体作品的技巧
HTML5多媒体作品以其对各种平台的兼容而见长,目前已获得了广泛的应用.如果我们需要制作自己的HTML5多媒体作品,一个方便之选就是利用现成的在线制作工具"百度H5". 首先访问& ...
php在线对弈,【图片】手把手开始制作HTML5在线五子棋对弈游戏【编程吧】_百度贴吧...
该楼层疑似违规已被系统折叠隐藏此楼查看此楼本次课题:制作HTML5在线五子棋对弈游戏. 预计开发周期:还没想好看心情,先预计7天完成. 备注:最近做学校课题有关数据挖掘的,有时候搞得没得头绪,做个 ...
怎么制作百度百科简介，创建自己的百度百科怎么弄
很多人想要为自己创建一个百度百科词条但是却不知道怎么弄,下面洛希爱做百科网为大家介绍怎么制作百度百科简介. 创建百科的流程和规定: 首先是注册百度百科账号仅有申请注册了百度帐号,才可以在百科里边开展 ...
html网页特效微课,网页设计与制作(HTML5+CSS3+JavaScript)（第4版）（微课版）
网页设计与制作(HTML5+CSS3+JavaScript)(第4版)(微课版) 编辑锁定讨论上传视频 <网页设计与制作(HTML5+CSS3+JavaScript)(第4版)(微课版)& ...