首頁 > web前端 > html教學 > 錨點連結怎麼做

錨點連結怎麼做

不言
發布: 2018-12-27 13:49:45
原創
37203 人瀏覽過

網頁內容過多時我們可以使用錨點連結來進行位置的跳轉,透過錨點連結我們不但可以指向文檔,還能指向頁面裡的特定段落,這樣就會便於我們來瀏覽網頁中的內容,那麼,錨點連結怎麼實現呢?本篇文章就來跟大家介紹錨點連結的實作方法。

錨點連結怎麼做

方法一:使用id來進行錨點定位

我們來看具體的範例

#程式碼如下

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
</head>
<body>
<a href="#string">跳转</a>
<hr/>
<br><br><br><br><br>
<br><br><br><br><
<br><br><br>
<br><br>
<br><br>
<br><br>
<br>
<br>
<br>
<a id="string">hello,I&#39;m here!</a>
</body>
</html>
登入後複製

運行效果如下

錨點連結怎麼做

#點擊「跳轉」時會跳到「hello,I'm here !”,效果如下

錨點連結怎麼做

會跳到目前頁面的“hello,I'm here!”。

方法二:使用name屬性來實作錨點連結

#來看具體的範例

程式碼如下

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
</head>
<body>
<a href="#string">跳转</a>
<hr/>
<br><br><br><br><br>
<br><br><br><br><
<br><br><br>
<br><br>
<br><br>
<br><br>
<br>
<br>
<br>
<a name="string">hello,I&#39;m here!</a>
</body>
</html>
登入後複製

也是當滑鼠點擊「跳轉」時,會跳到目前頁面的「hello,I'm here!」。

以上是錨點連結怎麼做的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板