如何在 HTML 中将图片用作链接?

htmlweb developmentfront end technology更新于 2025/2/14 23:40:17

我们可以将图片添加为链接，也可以将其他 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://www.cainiaomax.com/assets/questions/media/426142-1668760872.png" style="width:50px;height:50px;"></a></p>
</body>
</html>

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

示例

以下是将图片作为链接的示例程序。


<!DOCTYPE html>
<html>
<body>
   <center>
      <h2>Image as a Link</h2>
      <a href="https://www.tutorialspoint.com"><img src="https://www.cainiaomax.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>