HTML 图片链接

17 Mar 2025 | 4 分钟阅读

我们可以使用 HTML 图片来改进网页的结构，使网页更具表现力和吸引力。我们甚至可以将 HTML 图片用作链接，这意味着如果我们点击图片，它将充当链接并将我们带到另一个页面。

在本文中，我们将更深入地了解 HTML 图片链接。在学习 **HTML 图片链接** 之前，理解 HTML 图片至关重要，所以我们先来理解 HTML 图片。

HTML 图片

过去，HTML 语言仅用于在网页上插入文本内容，这相当无聊，人们对阅读网页不感兴趣。然后，开发人员创建了 **<img> 标签**，用于在网页中添加图片，使网页看起来更有趣。

语法

从上面的语法中，我们可以看到 **<img>** 标签以及两个属性，分别是 **"src"** 和 **"alt"**。

<img>： 这是一个自闭合标签，不需要单独的开始和结束标签。
"src"： "src" 属性用于添加您所需图片的 URL 或路径。
"alt"： "alt" 属性用于添加与图片相关的文本，可以是图片的名称。

我们可以通过两种方法在网页中插入图片。

第一种方法是提供一个 URL 来访问互联网文件。
第二种方法是提供一个与当前网页位置相关的文件的路径。

第一种方法：提供 URL

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <title>HTML image Example - First Approach</title>
</head>
<body>
    <h1>Welcome to Javatpoint</h1>
    <p>It is the example of HTML &lt;img&gt; tag using first approach - providing URL of the image</p>
    <img src="https://tpointtech.cn/images/logo/jtp_logo.png" alt="Javatpoint image">
</body>
</html>

输出

我们可以在网页中看到图片。

第二种方法：提供图片的路径

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <title>HTML image Example - Second Approach</title>
</head>
<body>
    <h1>Welcome to Javatpoint</h1>
    <p>It is the example of HTML &lt;img&gt; tag using second approach - providing path of the image</p>
    <img src="jtp_logo.png" alt="Javatpoint Logo">
</body>
</html>

输出

我们可以在网页中看到图片。

现在我们知道了如何在网页中添加图片，是时候了解如何将这些图片用作链接了。

创建 **HTML 图片链接** 很简单。我们必须使用 `<a>` 标签结合 `<img>` 标签来添加链接。我们已经理解了 **<img> 标签**。现在让我们来理解 **<a> 标签**。

<a> 标签

<a> 是锚点标签，用于在网页上添加链接，帮助用户从一个页面跳转到另一个页面。

<a> 标签语法

<a href="链接">关于链接的文字 </a>

从上面的语法中，我们可以看到：

<a>： 这是锚点的开始标签。
</a>： 这是锚点的结束标签。
href： 这是一个用于创建超链接的属性。该链接可以是同一页面上的任何网页，等等。

<a> 标签示例

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Example of &lt;a&gt; tag</title>
</head>
<body>
    <h1>Welcome to Javatpoint</h1>
    <p>It is the example of &lt;a&gt; element of HTML. </p>
    <a href="https://tpointtech.cn/">Click on this link to open Javatpoint Website</a>
</body>
</html>

输出

当我们点击输出中提供的链接时，它会重定向到 Javatpoint 网站。

现在我们将结合 `<a>` 标签和 `<img>` 标签来构造一个 HTML 图片链接。