HTML如何設(shè)置頁面內(nèi)鏈接的跳轉(zhuǎn)

發(fā)布時間：2020-12-07 11:39:26 來源：億速云閱讀：267 作者：小新欄目：web開發(fā)

小編給大家分享一下HTML如何設(shè)置頁面內(nèi)鏈接的跳轉(zhuǎn)，希望大家閱讀完這篇文章后大所收獲，下面讓我們一起去探討吧！

什么是錨點鏈接？所謂錨點鏈接就是創(chuàng)建一個鏈接，以便在頁面長度較長時跳轉(zhuǎn)到指定位置，簡而言之就是頁面內(nèi)通過鏈接跳轉(zhuǎn)。 HTML如何設(shè)置頁面內(nèi)鏈接的跳轉(zhuǎn)

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

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

鏈接地址

將鏈接名稱的id設(shè)置為跳轉(zhuǎn)位置的元素。

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

創(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">內(nèi)容</div> 
  <a id="section2">區(qū)域2</a> 
  <div style="height:300px">內(nèi)容</div> 
  <a id="section3">區(qū)域3</a> 
  <div style="height:300px">內(nèi)容</div> 
</body>
</html>

說明：

在上面所說的代碼中

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

點擊會鏈接

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

這樣在頁面內(nèi)就會跳轉(zhuǎn)到相應(yīng)的位置。

運行結(jié)果

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

HTML如何設(shè)置頁面內(nèi)鏈接的跳轉(zhuǎn)

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

HTML如何設(shè)置頁面內(nèi)鏈接的跳轉(zhuǎn)

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

注意：

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

<!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">內(nèi)容</div> 
  <div id="section2">區(qū)域2</div> 
  <div style="height:300px">內(nèi)容</div> 
  <div id="section3">區(qū)域3</div> 
  <div style="height:300px">內(nèi)容</div> 
</body>
</html>

看完了這篇文章，相信你對HTML如何設(shè)置頁面內(nèi)鏈接的跳轉(zhuǎn)有了一定的了解，想了解更多相關(guān)知識，歡迎關(guān)注億速云行業(yè)資訊頻道，感謝各位的閱讀！

向AI問一下細節(jié)

HTML如何設(shè)置頁面內(nèi)鏈接的跳轉(zhuǎn)

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標簽