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

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

要将图像链接或嵌入到网站中，使用 < img>标签。
要链接到一个网站，我们使用带有 href （超文本引用）属性的<a>锚点标签。
要链接到一个电子邮件地址，我们在 < a>锚点标签的href属性中使用mailto。

链接图像

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

语法

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

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

示例

在下面的示例中，我们使用HTML 标签将一个图片链接到一个网页。

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

输出

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

链接一个网站

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

语法

下面是HTML <a> 锚标签链接网站的语法 −

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

示例

在下面的示例中，我们使用HTML的<a>锚标签和href属性链接了一个网站 −

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

输出

在执行以上程序后，如果我们点击“ 点击这里进入deepinout ” ，它将重定向到目标网页。

链接邮件地址

要在HTML中链接电子邮件地址，我们使用<a>标签并在href属性内使用mailto。

语法

以下是在HTML中链接电子邮件地址的语法-

<a href = "mailto: example@mail.com"> name of the mail </a>

示例

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

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