网页制作html完整代码3个页面（使用HTML制作网页，要求3个网页互通，每个网页有图有文字有超链接！）

：暂无数据 2026-10-06 15:00:01 ：0

各位老铁们好，相信很多人对网页制作html完整代码3个页面都不是特别的了解，因此呢，今天就来为大家分享下关于网页制作html完整代码3个页面以及使用HTML制作网页，要求3个网页互通，每个网页有图有文字有超链接！的问题知识，还望可以帮助大家，解决大家的一些困惑，下面一起来看看吧！

本文目录

使用HTML制作网页，要求3个网页互通，每个网页有图有文字有超链接！
制作三个页面，要求页面中有文字、图片，并实现三个页面的相互链接具体页面内容可自由设计

使用HTML制作网页，要求3个网页互通，每个网页有图有文字有超链接！

说先，做一个普通的网页，并且在网页中插入一张图片。
代码入下:
《!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
***隐藏网址***
***隐藏网址***
《head》
***隐藏网址***
《title》无标题文档《/title》
《/head》
《body》
《img src="./test.jpg"》
《/body》
《/html》
2
那么，如何添加超链接呢？这就要用到《a》标签来完成。
那么，如何给图片添加超链接呢？只要把《img》标签放在《a》和《/a》之间就可以了。
而a标签又有一个参数：href.该参数用来指定链接的地址，假设我们要链接到百度。那么更改代码如下：
《!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
***隐藏网址***
***隐藏网址***
《head》
***隐藏网址***
《title》无标题文档《/title》
《/head》
《body》
***隐藏网址***
《/body》
《/html》
3
保存后点击该网页。之后，点击网页上图片。看，成功连接到了百度。
4
上诉步骤，有一个要点！
***隐藏网址***
END
二.热区链接
上诉时最普通的链接方式，其实要有一种更高级的连接方法。
在HTML中，可以把图片划分为多个热点区域，然后让每一个热点区域分别链接到不同的地方！
厉害吧！
首先看代码：
《!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
***隐藏网址***
***隐藏网址***
《head》
***隐藏网址***
《title》无标题文档《/title》
《/head》
《body》
《img src="./test.jpg" usemap="#mymap"》
《map name="mymap"》
***隐藏网址***
***隐藏网址***
《/map》
《/body》
《/html》
下面来分析代码：
1）《img src="./test.jpg" usemap="#mymap"》
意思是，在该图片中，使用名为mymap的映射图像名称。
2）《map name="mymap"》
意思是，定义热区图像，名称为mymap
***隐藏网址***
意思是，对map的一个热区点进行定义。rect代表矩形，coords代表热区图标，href为需要连接的地址。
OK，剩下的语法都没什么好说的了。
接着，打开网页，可以发现，当把鼠标放在左上角的时候，鼠标会变成“手”的形状。点击，变会进入相应的链接。
当然，下图标的并不太准确，但大概是这么个位置，供参考。
5
这里再补充一点：
shape的取值可以有多个：
1）rect：刚用了，代表矩形，他后面的坐标为4个，前两个为坐上坐标（x，y），后两个为右下坐标
2）circle：圆形的坐标。后面的坐标为3个。前两个为圆形的坐标，最后一个为半径。
当然，还有许多其他的，就不列举了，所谓边越多，则坐标越多，不难理解吧。

制作三个页面，要求页面中有文字、图片，并实现三个页面的相互链接具体页面内容可自由设计

第一个页面：
《html》
《head》
《script type="text/javascript"》
function go(num){
if(num==1){
location.href="1.html";
}else if(num==2){
location.href="2.html";
}else{
location.href="3.html";
}
}
《/script》
《/head》
《body》
《input type="button" value="跳转页面1" onclick="go(1)" /》
《input type="button" value="跳转页面2" onclick="go(2)" /》
《input type="button" value="跳转页面3" onclick="go(3)" /》
当前是页面1的内容：
《img src = "1.jpg"》
《/body》
《/html》
第二个：
《html》
《head》
《script type="text/javascript"》
function go(num){
if(num==1){
location.href="1.html";
}else if(num==2){
location.href="2.html";
}else{
location.href="3.html";
}
}
《/script》
《/head》
《body》
《input type="button" value="跳转页面1" onclick="go(1)" /》
《input type="button" value="跳转页面2" onclick="go(2)" /》
《input type="button" value="跳转页面3" onclick="go(3)" /》
当前是页面2的内容：
《img src = "1.jpg"》
《/body》
《/html》
第三个：
《html》
《head》
《script type="text/javascript"》
function go(num){
if(num==1){
location.href="1.html";
}else if(num==2){
location.href="2.html";
}else{
location.href="3.html";
}
}
《/script》
《/head》
《body》
《input type="button" value="跳转页面1" onclick="go(1)" /》
《input type="button" value="跳转页面2" onclick="go(2)" /》
《input type="button" value="跳转页面3" onclick="go(3)" /》
当前是页面1的内容：
《img src = "3.jpg"》
《/body》
《/html》