HTML中链接图片、网站和电子邮件地址的区别

在本文中，我们将讨论在HTML中链接图片、网站和电子邮件地址的区别。

  • 要在网站中链接或嵌入图片，可以使用<img>标签。

  • 要链接网站，我们使用<a>锚点标签以及href（超文本引用）属性。

  • 要链接电子邮件地址，我们在<a>锚点标签的href属性中使用mailto。

链接图片

在HTML中，我们使用<img>标签将图片嵌入或链接到网站。此标签需要“src”属性来指定要链接的图片路径，以及“alt”属性来指定图片的文本描述。“alt”文本将在图片由于某种原因无法加载时显示在页面上。

语法

以下是HTML <img> 标签的语法：

<img src = "path of the image" alt = "text description">

示例

在下面的示例中，我们使用HTML <img> 标签将图片链接到网页：

<!DOCTYPE html>
<html>
   <head>
      <title>Linking an image</title>
   </head>
   <body style="background-color: lightgrey; text-align: center;">
      <h2 style="color: black;">Tutorialspoint, simply easy learning...</h2>
      <!--Linking an image-->
      <img src="https://tutorialspoint.com/images/logo.png?v2" alt="TP logo">
</body>
</html>

输出

正如我们在输出中看到的，我们提供的图片已链接到网页上。

链接网站

带有href属性的HTML <a>锚点标签用于创建到任何网页、文件、电子邮件或同一网页中特定部分的超链接。

语法

以下是使用HTML <a>锚点标签链接网站的语法：

<a href = "website address"> Name of the link </a>

示例

在下面的示例中，我们使用带有href属性的HTML <a>锚点标签来链接一个网站：

<!DOCTYPE html>
<html>
   <head>
      <title>Linking an website</title>
   </head>
   <body style="background-color: lightgrey; text-align: center;">
      <h2 style="color: black;">Tutorialspoint, simply easy learning...</h2>
      <!--Linking a website-->
      <a href="https://tutorialspoint.com/index.htm"> Click here for Tutorialspoint</a>
   </body>
</html>

输出

执行上述程序后，如果点击“点击此处访问Tutorialspoint”，它将跳转到目标网页。

链接邮件地址

要在HTML中链接电子邮件地址，我们使用<a>锚点标签以及在href属性中的mailto。

语法

以下是HTML中链接邮件地址的语法：

<a href = "mailto: [email protected]"> name of the mail </a>

示例

在下面的示例中，我们使用HTML中<a>锚点标签的href属性中的mailto链接来链接一个电子邮件地址。

<!DOCTYPE html>
<html>
   <head>
      <title>Linking an image</title>
   </head>
   <body style="background-color: lightgrey; text-align: center;">
      <h2 style="color: black;">Tutorialspoint, simply easy learning...</h2>
      <!--Linking an email-->
      <a href="mailto:[email protected]">Contact for support</a>
</body>
</html>

输出

执行后，如果点击“联系以获取支持”，它将跳转到您的邮件应用程序。

更新于：2023年8月4日

278 次浏览

开启您的职业生涯

完成课程获得认证

开始学习
广告