超链接的应用——锚链接

最新推荐文章于 2022-07-17 01:24:31 发布

YuJar

最新推荐文章于 2022-07-17 01:24:31 发布

阅读量2.1k

点赞数 1

分类专栏： HTML

本文链接：https://blog.csdn.net/yujar/article/details/23664723

版权

HTML 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

锚链接常用于目标页内容很多，需定位到目标页内容中的某个具体位置时。例如网上常见的某个学习教程，当单击教程的章节目录时，将跳到应对章节的内容介绍处。

实现从A页面的甲位置中转到本页中的乙位置，步骤如下：

1. 在页面的乙位置设置标记：<a name="marker"> 目标位置乙</a>，“name”为<a>标签的属性，“marker”为标记名，其功能类似于古代固定船的锚（或钩），所以也称为锚名。

2. 在甲位置设置href属于值为“#标记名”，语法：<a href="#marker"> 当前位置甲</a>

实现不同页面间的锚链接：即从A页甲位置跳转到B页的乙位置。如单击“谷歌搜索”会跳转到另一个面对的对应内容处。如下示例：

具体步骤：

1. 在B页乙位置锚标记的语法：<a name="google" href="http:\\www.google.com.hk" target="-blank">Google搜索</a>

2. 在A页甲位置设置链接的语法： <a href="website.html #google ">谷歌搜索</a>

<html>
	<head>
		<meta http-equiv="Content-Type" content=text/html; charset=gb2312" />
		<title>图文混编测试</title>
	</head>
	<body>	
		<a href="#jia">当前位置甲</a>
		<a name="top" href="#buy">购物专区</a>
		<a href="#scape">风景欣赏</a>
		<a href="website.html#google">谷歌搜索</a>
		<dl>
			<dt><img src="bear.jpg" alt="Winnie" title="小熊维尼"/></dt>
			<hr/>
				<dd>维尼是一只小熊的名字，小熊的名字做维尼！</dd>	
				<dd>诞生于<span style="color:red;font-size:28"><b>1925年12月24日</b></span>，是一只由A.A.米尔恩为了他的儿子所创造出来的漫画熊。</dd>	
		</dl>
		<a name="jia"><h4>春暖花开（目标位置乙）</h4></a>
		<img name="scape" src="http://img04.taobaocdn.com/imgextra/i4/575463420/T2ReNLXeVeXXXXXXXX_!!575463420.jpg"></img>
		<hr>
		<br>	
		<a name="buy" href="http://tmbo.taobao.com" target="_blank">贵美网上商城></a>
		<hr>
		<a href="#top"><img src="http://img04.taobaocdnas.com/imgex4/575463420/T2uWLTXg4aXXXXXXXX_!!575463420.jpg" alt="图片" title="Picture"></img></a>
		</body>
</html>