一、錨點的用法
錨點的用法有兩種，但性質同樣，都是通過鏈接標簽<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