html中的錨點


一、頁面內跳轉的錨點設置

        頁面內的跳轉需要兩步:

        方法一:

        ①:設置一個錨點鏈接<a href="#miao">去找喵星人</a>;(注意:href屬性的屬性值最前面要加#)

        ②:在頁面中需要的位置設置錨點<a name="miao"></a>;(注意:a標簽中要寫一個name屬性,屬性值要與①中的href的屬性值一樣,不加#)標簽中按需填寫必要的文字,一般不寫內容

        方法二:

        ①:同方法一的①

        ②:設置錨點的位置  <h3 id="miao">喵星人基地</h3>;在要跳轉到的位置的標簽中添加一個id屬性,屬性值與①中href的屬性值一樣,不加#

        方法二不用單獨添加一個a標簽來專門設置錨點 ,只在需要的位置的標簽中添加一個id即可。

小案例:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>萌寵集結號</title>
</head>
<body>
    <ul>
        <li><a href="#miao">去找喵星人</a></li>
        <li><a href="#wang">去找汪星人</a></li>
        <li><a href="#meng">其他萌物</a></li>
    </ul>

    <a name="miao"></a><!--設置錨點方法1-->
    <h3 id="miao">喵星人基地</h3><!--設置錨點方法2-->
    <p>喵喵喵~</p>
    <p>喵喵喵~</p>
    <p>喵喵喵~</p>
    <p>喵喵喵~</p>
    <p>喵喵喵~</p>
    <p>喵喵喵~</p>
    
    <a name="wang"></a>
    <p>汪汪汪~</p>
    <p>汪汪汪~</p>
    <p>汪汪汪~</p>
    <p>汪汪汪~</p>
    <p>汪汪汪~</p>
    <p>汪汪汪~</p>

    <a name="meng"></a>
    <p>萌萌萌~</p>
    <p>萌萌萌~</p>
    <p>萌萌萌~</p>
    <p>萌萌萌~</p>
    <p>萌萌萌~</p>
    <p>萌萌萌~</p>
</body>
</html>

 

二、跨頁面跳轉

①:設置錨點鏈接,在href中的路徑后面追加:#+錨點名,即可

       如:<a href="萌寵集結號.html#miao">跳轉到萌寵集結號頁面</a>

②:要跳轉到的頁面中要設置錨點,方法見一種的步驟②,兩個方法任選其一。

 


免責聲明!

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



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