一、前言

上一篇文章我整理以前的笔记是：1、如何为页面添加图像 2、如何为页面添加超级链接 3、以及图片宽高设置的注意点，详细可参考博文 [web快速入门之基础篇-html：4、基本标签之图像、地址链接] 这篇文章我将整理笔记：同一页面上的跳转（锚点等知识点）

二、实例演示

实例代码

我们先来看看一个例子，如下代码：04_同一页面上的跳转.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"   http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
	<head>
		<title>这是title标题</title>
		<meta http-equiv="content-type" content="text/html;charset=utf-8" />
	</head>
	<body>


	跳转1-起始点：<a href="#a1">跳转到目录1</a><br/>
	<img src="if.jpg" width="300"/><br/>
	<img src="if.jpg" width="300"/><br/>
	<img src="if.jpg" width="300"/><br/>

	跳转2-目的地：<a name="a1">目录1</a><br/>
	<img src="if.jpg" width="300"/><br />

	<a href="#">回到顶部</a>

	</body>
</html>

运行效果

用谷歌浏览器打开运行，这里就没有截图了，效果是：

1、当点击 “跳转到目录1”，它就会跳转到“目录1” 的位置

2、当点击“回到顶部”，它就会跳转到网页开始的位置

三、要点说明

同一页面上的不同位置之间的跳转

情况一:回到页面的顶端

<a href="#">回到顶部</a>

情况二:自定义位置

定义目标位置(锚点):

<a name="a1"></a>

定义一个链接:

<a href="#a1">to a1</a>

---加＃, 防止被认为 a1为没写完的url地址

web快速入门之基础篇-html：5、同一页面上的跳转（锚点等知识点）