锚点的用法
一、锚点的用法
锚点的用法有两种，但性质同样，都是通过链接标签<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
