1.2（4）body——超链接锚点

最新推荐文章于 2022-07-29 00:40:58 发布

摆渡人wqh

最新推荐文章于 2022-07-29 00:40:58 发布

阅读量272

点赞数 1

分类专栏：前端文章标签：超链接锚点 html

本文链接：https://blog.csdn.net/wqh101121/article/details/117859765

版权

前端专栏收录该内容

10 篇文章 0 订阅

订阅专栏

超链接锚点

应用场景：当一个页面太长的时候，就需要设置锚点，然后可以在同一个页面的不同位置之间进行跳转。

使用方法：在需要跳转的位置前加一个超链接标签，并定义一个name属性，然后在使用超链接（href=”#name”）跳转到锚点的位置。

既可同一页面使用锚点，也可不同页面使用锚点。

练习

页面——2.3.1锚点.html（同一页面使用锚点）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>超链接锚点</title>
		<!--设置锚点：
			应用场合：当一个页面太长的时候，就需要设置锚点，
			然后可以在同一个页面的不同位置之间进行跳转。
        -->
	</head>
	<body>
		<a name="1F"></a>
		<h1>手机</h1>
		<p>华为p30</p>
		<p>华为p20</p>
		<p>华为p10</p>
		<p>华为mate1</p>
		<p>华为mate2</p>
		<p>华为mate3</p>
		<p>华为mate4</p>
		<p>华为mate5</p>
		<p>华为mate6</p>
		<p>华为mate7</p>
		<p>华为mate8</p>
		<p>华为mate9</p>
		
		<a name="2F"></a>
		<h1>母婴</h1>
		<p>尿不湿</p>
		<p>尿不湿</p>
		<p>尿不湿</p>
		<p>尿不湿</p>
		<p>尿不湿</p>
		<p>尿不湿</p>
		<p>尿不湿</p>
		<p>尿不湿</p>
		<p>尿不湿</p>
		<p>尿不湿</p>
		<p>尿不湿</p>
		
		<a name="3F"></a>
		<h1>服装</h1>
		<p>长裤</p>
		<p>长裤</p>
		<p>长裤</p>
		<p>长裤</p>
		<p>长裤</p>
		<p>长裤</p>
		<p>裙子</p>
		<p>裙子</p>
		<p>裙子</p>
		<p>裙子</p>
		
		<a href="#1F">手机</a>
		<a href="#2F">母婴</a>
		<a href="#3F">服装</a>
	</body>
</html>

页面——2.3.1锚点1.html（不同页面使用锚点）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>异面锚点</title>
	</head>
	<body>
		<!--
       		不同页面利用锚点
        -->
        <a href="2.3.1锚点.html#1F">手机</a>
        <a href="2.3.1锚点.html#2F">母婴</a>
	</body>
</html>

效果图：

摆渡人wqh

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
1.2（4）body——超链接锚点

超链接锚点应用场景：当一个页面太长的时候，就需要设置锚点，然后可以在同一个页面的不同位置之间进行跳转。使用方法：在需要跳转的位置前加一个超链接标签，并定义一个name属性，然后在使用超链接（href=”#name”）跳转到锚点的位置。既可同一页面使用锚点，也可不同页面使用锚点。练习页面——2.3.1锚点.html（同一页面使用锚点）<!DOCTYPE html><html> <head> <...
复制链接

扫一扫