如何在 HTML 页面中插入超链接?

htmlweb developmentfront end technology更新于 2025/2/15 2:20:17

要在 HTML 页面中插入超链接,我们必须使用锚标记 <a> 和 </a> 标签,它们用于定义链接。<a> 标签指示超链接的起始位置,而 </a> 标签指示超链接的结束位置。在这些标签内添加的任何文本都将充当超链接。在 <a href = " "> 中添加链接的 URL。

以下是超链接的用法 −

< html>
<head>
   ...
</head>
<body>
   --
   <a href = " url "> text < / a>
</body>
</html>

在 HTML 中,所有链接都被视为超链接。这些超链接允许用户点击并跳转到另一个页面/文档。我们不能将文本作为链接,因为它不允许点击。因此,我们需要在文本上使用超链接。

语法

以下是在 HTML 中插入超文本的语法 −

<a href="url"> 链接文本 </a>

示例

在 HTML 中使用不同的链接 −

<!DOCTYPE html>
<html>
<body>
   <h2>Here is the text Hyperlink</h2>
   <p><a href="https://www.tutorialspoint.com">Text URL</a></p>

   <h2>Here is the Image hyperlink</h2>
   <p><a href="https://www.cainiaomax.com/images/cbse-class-6-maths-notes_icon.svg">Dummy image</a></p>
</body>
</html>

运行上述程序时,我们会看到三个超链接(分别为文本、图片和电子邮件),每个超链接都包含三个标题,每个标题都有一个指定的 URL。

让我们详细讨论如何插入电子邮件链接、图片链接和文本链接。

使用图片作为链接

我们只需将 <img> 标签放在锚标签 <a> 内,即可将图片用作链接。

示例

以下示例展示了如何将图片用作链接 −

<!DOCTYPE html>
<html>
<body>
   <a href="https://www.cainiaomax.com/statistics/index.htm">
      <img src="https://www.cainiaomax.com/images/statistics_icon.svg" alt="HTML tutorial" style="width:300px; height:250px;">
   </a>
</body>
</html>

运行上述程序时,我们会看到一个 png 图像,点击该图像后,您将被重定向到指定的 URL。

使用电子邮件地址作为链接

要链接电子邮件地址,我们需要在 href 属性中使用 mailto: ,这将打开用户电子邮件程序。

示例

为了更好地理解,我们来看一个例子−

<!DOCTYPE html>
<html>
<body>
   <h1> Links to Email Address</h1>
   <p><a href="mailto:abc@example.com">Send Email </a> </p>
</body>
</html>

执行上述程序时,我们会看到一个包含"发送电子邮件"文本的超链接。点击该链接后,系统会将您重定向到指定的默认邮箱地址,以便用户直接从网页发送邮件。

使用按钮作为链接

如果您使用按钮作为链接,请尝试在其中添加一些脚本代码,这有助于我们指定点击按钮后的操作 −

示例

为了更好地理解,我们来看一个例子 −

<!DOCTYPE html>
<html>
<body>
   <h2>Button as a Links</h2>
   <p>Click the button to go to the tutorialsPoint </p>
   <button onclick="document.location='https://www.cainiaomax.com/html/html_text_links.htm'">HTML Tutorial</button>
</body>
</html>

运行上述代码时,我们会看到一个标题为"按钮作为链接"的表单,其中段落元素为"单击按钮转到教程点"。然后,会显示一个标签为"HTML 教程"的按钮,点击该按钮后,会导航至指定的另一个页面。

点击按钮后,会导航至如下所示的 − 页面。

更多与特定 URL 匹配的链接为 − 页面。

  • 链接到当前网页内的特定位置。此语法用于链接到同一页面上的索引。

<a href="#index">
  • 使用绝对路径链接到本地机器上的页面 −

<a href="http://www.welcome.com">

绝对路径始终包含网站域名,例如 http://www.

  • 使用相对路径链接到同一本地机器上的另一个网页 −

<a href="C:/Users/bhanu/Desktop/index.html"> 

相对路径仅指向本地计算机上的文件或文件路径。

  • 链接到另一个网站上的网页

<a href="mypage.html">

此语法用于链接到网页"mypage.html"。


相关文章


有用资源