首頁 >web前端 >html教學 >HTML設定頁面內連結的跳轉—錨點鏈接

HTML設定頁面內連結的跳轉—錨點鏈接

不言原創: 2018-12-04 15:17:2110264瀏覽

什麼是錨點連結？所謂錨點鏈接就是創建一個鏈接，以便在頁面長度較長時跳轉到指定位置，簡而言之就是頁面內通過鏈接跳轉，那麼，接下來的這篇文章就來給大家介紹關於HTML設置頁面內連結的跳轉的方法。

HTML設定頁面內連結的跳轉—錨點鏈接

首先我們來看看HTML中連結的書寫格式

<a href="#">链接名</a>

連結位址

將連結名稱的id設定為跳轉位置的元素。

接下來我們來看具體的範例

建立以下HTML檔案

#程式碼如下

Anchor.HTML設定頁面內連結的跳轉—錨點鏈接

<!DOCTYPE HTML設定頁面內連結的跳轉—錨點鏈接>
<HTML設定頁面內連結的跳轉—錨點鏈接>
<head>
<meta http-equiv="Content-Type" content="text/HTML設定頁面內連結的跳轉—錨點鏈接; charset=utf-8"/>
    <title></title>
</head>
<body>
  <a href="#section1">区域1</a><br />
  <a href="#section2">区域2</a><br />
  <a href="#section3">区域3</a><br />
  <hr />
  <a id="section1">区域1</a>
  <div style="height:300px">内容</div> 
  <a id="section2">区域2</a> 
  <div style="height:300px">内容</div> 
  <a id="section3">区域3</a> 
  <div style="height:300px">内容</div> 
</body>
</HTML設定頁面內連結的跳轉—錨點鏈接>

說明：

在上面所說的程式碼中

<a href="#section1">区域1</a>

點擊會連結

<a id="section1">区域1</a>

這樣在頁面內就會跳到對應的位置。

運行結果

執行上述HTML檔案將顯示如下效果

HTML設定頁面內連結的跳轉—錨點鏈接

#點擊頁面中的區域1鏈接，就會在頁面中進行跳轉，區域1將會顯示在螢幕頂部。

HTML設定頁面內連結的跳轉—錨點鏈接

相同的，如果你點選了區域2和區域3時也會出現相同的效果。

注意：

跳轉的id即使不是a標籤的也可以使用，下面的程式碼展示了將div標記的id指定為跳轉目標時的程式碼。





    


  <a href="#section1">区域1</a>

  区域2

  区域3

  
  区域1
  内容 
  区域2 
  内容 
  区域3 
  内容

這篇文章到這裡就全部結束了，更多有關於HTML的精彩內容大家可以關注php中文網的HTML影片教學專欄！！！

以上是HTML設定頁面內連結的跳轉—錨點鏈接的詳細內容。更多資訊請關注PHP中文網其他相關文章！

php html

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：html字體有哪些下一篇：html字體有哪些

看更多