我们如何在HTML中包含一个锚点？

百变鹏仔 3个月前 (09-22) #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://www.tutorialspoint.com/market/index.asp">Go To The Course Page.</a>   </p>   <p>      <a href="https://www.tutorialspoint.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中包含一个锚点？

示例 1

示例 2

示例 3：使用 JavaScript

html代码是什么

值得一学的6个前端HTML+CSS特效

html怎么设置字体

怎么隐藏html标签

html怎么设置编码utf8