HTML 如何使用图像作为链接

如何在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://www.tutorialspoint.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.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>

点击图片后,将会重定向到目标网页。

Camera课程

Python教程

Java教程

Web教程

数据库教程

图形图像教程

办公软件教程

Linux教程

计算机教程

大数据教程

开发工具教程