如何在 HTML 中新增錨點?


在本文中,我們將學習如何在 HTML 中新增錨點。讓我們深入瞭解 HTML 中的錨點。

錨點元素用於將源錨點連結到目標錨點。目標是源錨點連線到的資源,而源是指向另一個站點的文字、圖片或按鈕。

超連結是使網際網路成為資訊高速公路的關鍵技術之一。

為了更好地理解如何在 HTML 中新增錨點,讓我們來看以下示例

示例 1

在下面的示例中,我們建立了一個**跳轉錨點**連結。

<!DOCTYPE html>
<html>
<head>
   <style>
      .main-content {
         height: 90vh;
         text-align: justify;
      }
   </style>
</head>
<body>
   <h2 id="tutorials">Tutorials Point</h2>
   <p class="main-content">
   Tutorials Point originated from the idea that there exists a class of readers who
   respond better to online content and prefer to learn new skills at their own pace
   from the comforts of their drawing rooms.The journey commenced with a single tutorial
   on HTML in 2006 and elated by the response it generated, we worked our way to adding
   fresh tutorials to our repository which now proudly flaunts a wealth of tutorials and
   allied articles on topics ranging from programming languages to web designing to academics
   and much more.</p>
   <p>Click To
      <a href="#tutorials">Jump</a>.
   </p>
</body>
</html>

執行上述指令碼後,輸出視窗會彈出,顯示上述指令碼中使用的文字以及提到的錨點標籤“**點選跳轉**”,使用者點選該標籤即可跳轉到頁面開頭。

示例 2

考慮以下內容,我們正在建立一個從另一個網頁連結到錨點的示例。

<!DOCTYPE html>
<html>
<body>
   <h2 id="Tutorials">TutorialsPoint</h2>
   <p>Tutorials Point originated from the idea that there exists a class of readers
   who respond better to online content and preferto learn new skills at their own
   place from the comforts of their drawing rooms.</p>
   <p>
      <a href="https://tutorialspoint.tw/market/index.asp">Go To The Course Page.</a>
   </p>
   <p>
      <a href="https://tutorialspoint.tw/latest/ebooks">Search For Ebooks.</a>
   </p>
</body>
</html>

指令碼執行後,將生成一個輸出,顯示上述指令碼中使用的文字以及使用錨點標籤附加到網頁的連結。當用戶點選連結時,它將開啟新頁面。

示例 3:使用 JavaScript

在下面的示例中,我們建立了一個指向 JavaScript 的連結。

<!DOCTYPE html>
<html>
<body>
   <a href="javascript:alert('Welcome To TutorialsPoint!');">Click To Execute</a>
</body>
</html>

執行給定指令碼後,它將提供一個輸出,其中包含使用帶有文字“**點選執行**”的錨點放置在網頁上的連結。

如果使用者點選連結,則指令碼將被觸發並顯示警報“歡迎來到 tutorials point”。

更新於:2022年12月15日

400 次瀏覽

啟動您的職業生涯

完成課程獲得認證

開始學習
廣告
© . All rights reserved.