锚点的用法

一、锚点的用法

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

一种是：页内跳转；

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

下面我们看具体的用法。

1）内跳转的锚点用法：

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

 1 <head>
 2 <title>锚点的使用</title>
 3 <style type="text/css">
 4 body{
 5     font-family:"微软雅黑";
 6     height:2000px;
 7 }
 8 .nav{
 9     margin:50px auto 0;
10     text-align:center;
11     background-color:#cfcfcf;
12     line-height:40px;
13 }
14 .nav a{
15     display:inline-block;
16     padding:5px 10px;
17     font-size:16px;
18     text-decoration:none;
19     color:#fff;
20     text-shadow:1px 1px 5px #04acef;    
21 }
22 .nav a:hover{
23     background:#04acef;
24 }
25 div{
26     height:130px;
27     line-height:130px;
28     box-shadow:1px 1px 10px #ccc;
29     font-size:30px;
30     text-align:center;
31 }
32 </style>
33 </head>
34 <body>
35     <p class="nav">
36         <a href="#1">第一个</a>
37         <a href="#2">第二个</a>
38         <a href="#3">第三个</a>
39         <a href="#4">第四个</a>
40         <a href="#5">第五个</a>
41     </p>
42     <div id="1">1</div>
43     <div id="2">2</div>
44     <div id="3">3</div>
45     <div id="4">4</div>
46     <div id="5">5</div>
47 </body>

运行界面如下：

当按下第一个时，会页面跳转到“1”处。

2）页外跳转的锚点用法：

加入我在一个名为“示例”的文件夹中见了两个HTML文档

第一个名为ancesor.html

第二个名为ancesor1.html

里面的代码都一样，跟我贴出的“锚点的用法”这一步骤中的第二个步骤所贴出的图片一样。

现在我把index.html当中第一个a标签把其中的href="#1"，更改为href=“ancesor1.html#1”并保存之后，我们再在浏览器打开，这时候会发现，页面会跳转到ancesor1.html中的ID=1的div所在的区域。

 1 <head>
 2 <title>锚点的使用</title>
 3 <style type="text/css">
 4 body{
 5     font-family:"微软雅黑";
 6     height:2000px;
 7 }
 8 .nav{
 9     margin:50px auto 0;
10     text-align:center;
11     background-color:#cfcfcf;
12     line-height:40px;
13 }
14 .nav a{
15     display:inline-block;
16     padding:5px 10px;
17     font-size:16px;
18     text-decoration:none;
19     color:#fff;
20     text-shadow:1px 1px 5px #04acef;    
21 }
22 .nav a:hover{
23     background:#04acef;
24 }
25 div{
26     height:130px;
27     line-height:130px;
28     box-shadow:1px 1px 10px #ccc;
29     font-size:30px;
30     text-align:center;
31 }
32 </style>
33 </head>
34 <body>
35     <p class="nav">
36         <a href="ancesor1.html#1">第一个</a>
37         <a href="ancesor1.html#2">第二个</a>
38         <a href="ancesor1.html#3">第三个</a>
39         <a href="ancesor1.html#4">第四个</a>
40         <a href="ancesor1.html#5">第五个</a>
41     </p>
42     <div id="1">1</div>
43     <div id="2">2</div>
44     <div id="3">3</div>
45     <div id="4">4</div>
46     <div id="5">5</div>
47 </body>

没错这就是页外的锚点跳转。

所以当我们需要跳转到其他页面的某个区域时，只要把href的属性值设置“跳转页面的URL+所想跳转到区域的ID（或者说锚点名称）”即可。

这里需要说明，本示例均使用的ID锚点，给div添加ID的时候就为该div设置了锚点。

参考链接https://www.cnblogs.com/supermeimei/p/5756084.html