利用name或id屬性設置頁面跳轉的錨點

理論准備

        網頁中的鏈接按照鏈接路徑的不同，可以分為3種類型，分別是內部類型、錨點鏈接和外部鏈接；

        按照使用對象的不同，網頁中的鏈接又分為文本超鏈接，圖像超鏈接，E-mail鏈接，錨點鏈接，多媒體文件鏈接，空鏈接等。

---

 

★  利用name或id實現網頁跳轉錨點的設置 （Anchor））

代碼

1. <style>
2. body {
3. text-align: center;
4. }
6. a:nth-child(odd){
7. /*選取索引序號為基數的<a>標簽*/
8. position: absolute;
9. top:2000px;
10. border:1px solid;
11. }
12. </style>
14. <h2>利用name或id實現網頁跳轉錨點的設置（Anchor）</h2>
15. <hr/>
16. <!--利用name屬性-->
17. <!--<a href="#footer" name="top">Go footer</a>
18. <a href="#top" name="footer">Go top</a>-->
20. <!--利用id屬性-->
21. <!--<a href="#footer" id="top">Go footer</a>
22. <a href="#top" id="footer">Go top</a>-->

總結：

       同一個網頁內部不同位置的錨點實現，無論是使用name屬性，還是id屬性在鏈接href中都必須加上#；

       不同網頁間跳轉到的指定位置，利用id屬性能夠實現，而name屬性是不能的。如下代碼，

1. <!--原網頁中的超鏈接-->
2. <a href="ClosureDemo.html#out">跳到另外一個文檔name或id為out的位置</a>
4. <!--目標網頁中的input設置-->
5. <input type="text" id="out">

 

★  利用<a>標簽實現郵件發送

1. <mark>郵件鏈接</mark>
2. <a href="mailto:[e-mail]">使用OutLook或Foxmail等，發送郵件給[e-mail]</a>

     

 

---

 

注意點

    1.當鏈接對象為網站，則href屬性值中的    “http://”     不可省略，否則鏈接會出現錯誤提示；

1. <!--正確的寫法-->
2. <a href="http://www.baidu.com">百度</a>
3. <!--錯誤的寫法-->
4. <a href="www.baidu.com">百度</a>

   2.當href不包含 “http://”  時，默認為當前頁面所在的位置，即鏈接的對象與當前網頁文件在同一文件夾的同一子菜單中；