明輝手游網中心：是一個免費提供流行視頻軟件教程、在線學習分享的學習平臺！

HTML設置頁面內鏈接的跳轉—錨點鏈接

發(fā)表時間：2023-08-28 來源：明輝站整理相關軟件相關文章人氣：

[摘要]什么是錨點鏈接？所謂錨點鏈接就是創(chuàng)建一個鏈接，以便在頁面長度較長時跳轉到指定位置，簡而言之就是頁面內通過鏈接跳轉，那么，接下來的這篇文章就來給大家介紹關于HTML設置頁面內鏈接的跳轉的方法。首先我們來看一下HTML中鏈接的書寫格式<a href="#">鏈接名<...
什么是錨點鏈接？所謂錨點鏈接就是創(chuàng)建一個鏈接，以便在頁面長度較長時跳轉到指定位置，簡而言之就是頁面內通過鏈接跳轉，那么，接下來的這篇文章就來給大家介紹關于HTML設置頁面內鏈接的跳轉的方法。

html

首先我們來看一下HTML中鏈接的書寫格式

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

鏈接地址

將鏈接名稱的id設置為跳轉位置的元素。

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

創(chuàng)建以下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">區(qū)域1</a><br />
  <a href="#section2">區(qū)域2</a><br />
  <a href="#section3">區(qū)域3</a><br />
  <hr />
  <a id="section1">區(qū)域1</a>
  <div style="height:300px">內容</div> 
  <a id="section2">區(qū)域2</a> 
  <div style="height:300px">內容</div> 
  <a id="section3">區(qū)域3</a> 
  <div style="height:300px">內容</div> 
</body>
</html>

說明：

在上面所說的代碼中

<a href="#section1">區(qū)域1</a>

點擊會鏈接

<a id="section1">區(qū)域1</a>

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

運行結果

執(zhí)行上述HTML文件將顯示如下效果

html

單擊頁面中的區(qū)域1鏈接，就會在頁面中進行跳轉，區(qū)域1將會顯示在屏幕頂部。

html

同樣的，如果你點擊了區(qū)域2和區(qū)域3時也會出現相同的效果。

注意：

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

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
</head>
<body>
  <a href="#section1">區(qū)域1</a><br />
  <a href="#section2">區(qū)域2</a><br />
  <a href="#section3">區(qū)域3</a><br />
  <hr />
  <div id="section1">區(qū)域1</div>
  <div style="height:300px">內容</div> 
  <div id="section2">區(qū)域2</div> 
  <div style="height:300px">內容</div> 
  <div id="section3">區(qū)域3</div> 
  <div style="height:300px">內容</div> 
</body>
</html>

本篇文章到這里就全部結束了，更多有關于HTML的精彩內容大家可以關注php中文網的HTML視頻教程欄目�。。�

以上就是HTML設置頁面內鏈接的跳轉—錨點鏈接的詳細內容，更多請關注php中文網其它相關文章！


網站建設是一個廣義的術語，涵蓋了許多不同的技能和學科中所使用的生產和維護的網站。