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

被开发耽误的大厨

已于 2022-06-12 22:39:08 修改

阅读量3.5k

点赞数 4

分类专栏： web前端（H5）文章标签： html 前端 xhtml

于 2020-01-16 11:03:17 首次发布

本文为博主原创文章，不得随意转载，转载请注明出处！！！

本文链接：https://blog.youkuaiyun.com/YuDBL/article/details/104000775

版权

web前端（H5）专栏收录该内容

83 篇文章

订阅专栏

本文详细介绍HTML页面内的跳转方法，包括回到页面顶端及自定义位置跳转。通过实例代码展示如何使用锚点实现同一页面不同位置间的快速导航。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、前言

上一篇文章我整理以前的笔记是：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>