您好,登錄后才能下訂單哦!
小編給大家分享一下html中如何設置錨點,希望大家閱讀完這篇文章之后都有所收獲,下面讓我們一起去探討吧!
html設置錨點的方法:1、設置一個錨點鏈接“<a href="#miao">...</a>”;2、在頁面中需要的位置設置錨點;3、在href中的路徑后面追加“#+錨點名”即可。
本文操作環境:Windows7系統、HTML5版,DELL G3電腦
html中的錨點
頁面內跳轉的錨點設置
頁面內的跳轉需要兩步:
方法一:
①:設置一個錨點鏈接<a href="#miao">去找喵星人</a>;(注意:href屬性的屬性值最前面要加#)
②:在頁面中需要的位置設置錨點<a name="miao"></a>;(注意:a標簽中要寫一個name屬性,屬性值要與①中的href的屬性值一樣,不加#)標簽中按需填寫必要的文字,一般不寫內容
方法二:
①:同方法一的①
②:設置錨點的位置 <h4 id="miao">喵星人基地</h4>;在要跳轉到的位置的標簽中添加一個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--> <h4 id="miao">喵星人基地</h4><!--設置錨點方法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>
②:要跳轉到的頁面中要設置錨點,方法見一種的步驟②,兩個方法任選其一。
1、簡易性:超級文本標記語言版本升級采用超集方式,從而更加靈活方便,適合初學前端開發者使用。 2、可擴展性:超級文本標記語言的廣泛應用帶來了加強功能,增加標識符等要求,超級文本標記語言采取子類元素的方式,為系統擴展帶來保證。 3、平臺無關性:超級文本標記語言能夠在廣泛的平臺上使用,這也是萬維網盛行的一個原因。 4、通用性:HTML是網絡的通用語言,它允許網頁制作人建立文本與圖片相結合的復雜頁面,這些頁面可以被網上任何其他人瀏覽到,無論使用的是什么類型的電腦或瀏覽器。
看完了這篇文章,相信你對“html中如何設置錨點”有了一定的了解,如果想了解更多相關知識,歡迎關注億速云行業資訊頻道,感謝各位的閱讀!
免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。