HTML中的锚点的使用详解

原创

西夏王城 2014-10-12 17:23:33 博主文章分类：js ©著作权

©著作权归作者所有：来自51CTO博客作者西夏王城的原创作品，请联系作者获取转载授权，否则将追究法律责任

网页中的锚点对初学网页设计的人感觉很模糊，但是他的使用确实我们在日常中经常见到的，下面就给大家说一说锚点的使用。

在W3C标准字“Anchor”一词即为锚点，其解释为：资源中的某个区域可以是零个、一个或多个链接的目标或源。锚点可以引用整个资源，或者的特定部分，或者资源的特定表现形式。

通俗的理解：锚点就是用于超链接的一种标记，用来指定这个连接在页面内跳转的那一部分，哪一区域等。比如我们有一个网页很长很长，而且里面的内容，可以分为N个部分。这样的话，我们就可以在网页的顶部设置一些锚点，这样便可以方便浏览者点击相应的锚点，到达本页内相应的位置，而不必在一个很长的网页里自行寻找。

其中锚点的用法有两种，但性质同样，都是通过链接标签<a></a>以及其href属性实现的：

一种是：页内跳转；

一种是：跳到其他页面的某个区域。

下面来讲解几个例子

首先来看页内跳转的锚点用法：

我给每个div添加了ID号，然后将每个链接标签的href属性分别按顺序与每个div的ID相对应。【注意：href属性后的ID号必须有“#”，否则无效。】

代码如下：

<html>
   <head>
      <title>锚点的使用讲解</title>
	  <style>
		  body{font-family:"微软雅黑";height:2000px;}
		  .nav{margin:50px auto 0; text-align:center;background-color:#cfcfcf;line-height:40px;}
		  .nav a{display:inline-block;padding:5px 10px; font-size:16px;color:#fff;}
		  .nav a:hover{background:#04fdc4}
		  div{height:130px; line-height:130px;font-size:30px;text-align:center}
	  </style>
   </head>
   <body>
      <p class="nav">
	     <a href="#1">第一个</a>
		 <a href="#2">第二个</a>
		 <a href="#3">第三个</a>
		 <a href="#4">第四个</a>
		 <a href="#5">第五个</a>
	  </p>

	  <div id="1">1</div>
	  <div id="2">2</div>
	  <div id="3">3</div>
      <div id="4">4</div>
	  <div id="5">5</div>
   </body>
</html>

在浏览器预览下，点击第四个，就跳到下面的第四个div了。

接下来是页外跳转的锚点用法：

假如我在一个名为“示例”的文件夹中新建两个HTML文档第一个名为index.html第二个名为 test.html,两个html文件里面的代码都一样，跟我贴出的页内跳转的锚点用法的代码一样【就是前面贴出来的】。现在我把index.html当中第一个a 标签把其中的href="#3"，更改为href=“test.html/#3”并保存之后，我们再在浏览器打开，这时候会发现，页面会跳转到 test.html中的ID=3的div所在的区域。没错这就是页外的锚点跳转。所以当我们需要跳转到其他页面的某个区域时，只要把href的属性值设置“跳转页面的URL+所想跳转到区域的ID（或者说锚点名称）”即可。

index.html的代码如下：

<html>

<head>

<title>锚点的使用讲解</title>

<style>

body{font-family:"微软雅黑";height:2000px;}

.nav{margin:50px auto 0; text-align:center;background-color:#cfcfcf;line-height:40px;}

.nav a{display:inline-block;padding:5px 10px; font-size:16px;color:#fff;}

.nav a:hover{background:#04fdc4}

div{height:130px; line-height:130px;font-size:30px;text-align:center}

</style>

</head>

<body>

</p>

</body>

</html>

test.html的代码如下：

<html>

<head>

<title>锚点的使用讲解</title>

<style>

body{font-family:"微软雅黑";height:2000px;}

.nav{margin:50px auto 0; text-align:center;background-color:#cfcfcf;line-height:40px;}

.nav a{display:inline-block;padding:5px 10px; font-size:16px;color:#fff;}

.nav a:hover{background:#04fdc4}

div{height:130px; line-height:130px;font-size:30px;text-align:center}

</style>

</head>

<body>

</p>

</body>

</html>

在浏览器中你会看到上述效果。。。。

这里我需要说明，我的示例均使用的ID锚点，给div添加ID的时候就为该div设置了锚点。早前的html版本规范是支持name属性的，即个元素添加 name属性，比如name="anchor1"，然后通过a标签来实现锚点跳转。这种方法我不建议使用。因为在最新版本的规范中或者说是严格的版本中通过name属性来实现锚点的跳转这种方式已经不被支持了。所以推荐使用ID属性。

下面来看一个我们经常遇到的情况哈哈，浏览网页时返回顶部

首先是用name来设置锚点：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

</head>

<body>

<a href="#A1">网页第一部分</a>

<a href="#A2">网页第二部分</a>

</body>

</html>

接下来是用id来设置锚点：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">