html錨鏈接


錨點(anchor):其實就是超鏈接的一種,一種特殊的超鏈接

     普通的超鏈接,<a href="路徑"></a> 是跳轉到不同的頁面

     而錨點,<a href="路徑"></a> 可以在同一個頁面中不同的位置間跳轉

     可以看到,跳轉到錨點的超鏈接跟普通的超鏈接格式是一樣的,

1.使用錨點的步驟:

   1.1.先建立錨點目標,

        如上所述,錨點可以在同一頁面的不同位置間跳轉,其實就是在元素間跳轉,

        常用的場景就是,頁面很長,讓用戶方便在頁面不同部分間跳轉

        建立錨點目標,只需要給目標元素增加id或者name即可,推薦id:

        <div id="test" name="test"></div>

   1.2.要創建跳轉到id="test"的div的錨點,

           <a href="#test"></a>

   注意:1.錨點的超鏈接路徑一定包含"#",而后面緊跟元素的id或者name

              (所以id和name必須一樣,其實我試了有時name是不生效的)

2.錨點使用總結:

  2.1. 建立錨點的元素必須要有id或name屬性,最好兩個都有

  2.2. 錨點超鏈接一定包含井號"#",錨點超鏈接都在鏈接的最末端,具體看后面例子

  2.3. 同一個頁面不同部分的跳轉,錨點的寫法

            目標元素:<p id="test"></p>     錨點超鏈接:<a href="#test"></a>

  2.4. 不同頁面跳轉,同時存在錨點

           目標元素:a.html頁面的<div id="test"/>   錨點超鏈接:<a href="a.html#test"></a>

           (先跳到a.html頁面,然后再尋找id=test的元素)

  2.5. 不同頁面帶參數跳轉,同時存在錨點

           目標元素:a.php?p=abc頁面的<div id="test"/>   錨點超鏈接:<a href="a.php?p=abc#test"></a>


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM