HTML CSS JAVASCRIPT JQUERY AI PHP SQL EXCEL LINUX C# C++ C PYTHON JAVA 教程库 参考手册 技术文章 测验 练习 HOWTO FAQ

如何在 HTML 中添加锚点?

htmlfront end technologyweb development更新于 2024/8/10 7:08:17

本文将讲解如何在 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://www.cainiaomax.com/market/index.asp">Go To The Course Page.</a>
   </p>
   <p>
      <a href="https://www.cainiaomax.com/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>

当执行给定脚本时，它将提供一个输出，其中包含一个放置在网页上的链接，该链接使用带有文本"单击以执行"的锚点。

如果用户点击该链接，脚本将被触发并显示"欢迎来到教程点"的警告。

相关文章

有用资源

打印 下一节:如何在 HTML 中添加首字母缩略词? ❯❮ 上一节:如何在 HTML 中创建表页脚?