如何在 HTML 中使用图像作为链接？

我们可以将图像添加为链接，以及其他HTML元素作为链接。链接是从一个网页到另一个网页的连接。

我们可以在网页中添加页面链接。HTML 链接是超链接。<a>标签定义了一个超链接，用于从一个页面链接到另一个页面。href 属性与<a>标签一起使用，用于指示链接的目标。

要在 HTML 页面中创建页面链接，请使用 <a> 和 </a> 标签，并使用 href 属性定义链接。我们应该在 <body>…</body> 标签内使用 <a>…</a> 标签。

语法

以下是将图像添加为网页链接的语法。

<a href="link address"><img src="image destination"></a>

示例

以下是用图像作为链接的示例程序。

<!DOCTYPE html>
<html>
<body>
   <p><a href="https://www.Youtube.com/"><img src="https://tutorialspoint.com/assets/questions/media/426142-1668760872.png" style="width:50px;height:50px;"></a></p>
</body>
</html>

以下是将图像作为链接的输出，点击图像将导航到谷歌主页。

示例

以下是用图像作为链接的示例程序。

<!DOCTYPE html>
<html>
<body>
   <center>
      <h2>Image as a Link</h2>
      <a href="https://tutorialspoint.com"><img src="https://tutorialspoint.com/assets/questions/media/426142-1668760765.png" alt="Tutorialspoint" style="width:50px;height:60px;"></a>
   </center>
</body>
</html>

以下是将图像作为链接的输出，点击图像将导航到目标网页。

示例

以下是另一个用图像作为链接的示例程序。

<!DOCTYPE html>
<html>
<head>
   <title>HTML Image as link</title>
</head>
<body>
   The following image works as a link:<br>
   <a href="https://www.qries.com/">
      <img alt="Qries" src="https://www.qries.com/images/banner_logo.png" width=150" height="70">
   </a>
</body>
</html>

点击图像后，它将重定向到目标网页。

更新于: 2023年8月29日

336K+ 浏览量

开启你的 职业生涯

通过完成课程获得认证

开始学习
广告