HTML 中的图像链接

HTML 中的图像链接几乎存在于所有页面中，因为它们帮助我们从网站上的一个页面导航到另一个页面。一种流行的组合是使用 HTML 锚标记 。带有 HTML 的 img 标签 。通过这种组合，我们可以允许用户通过单击图像从一个页面移动到另一个页面。在我们进一步深入讨论这个主题之前，让我们首先了解锚点和图像元素的工作和渲染，然后将它们组合起来以实现链接图像。

HTML 锚标记

HTML 锚标记用于创建指向其他网页或网络上托管的多媒体内容的 HTML 超链接。让我们参考下面的语法来了解锚标签的工作原理及其基本属性

点击此处！！

在上面的示例中，“href”属性指定了我们希望在用户单击文本“单击此处！！”时将其重定向到的网页的 URL。

让我们看看下面的完整代码：

输出

–>

通过上面的例子，您将能够做出以下观察

1. 未访问的链接将显示为蓝色下划线。对于，例如这是一个未访问过的链接
2. 访问过的链接将显示下划线并呈紫色。对于，例如这是一个已经访问过的链接
3. 活动链接显示为红色下划线。对于，例如这是一个活跃的链接

HTML 图像标签

在浏览互联网时，我相信您一定见过几个包含各种形式多媒体的网页。特别是图像是一种流行的多媒体形式，几乎可以在当今所有交互式网页和网站中找到。让我们通过下面的示例来了解图像标签及其在 HTML 中的实现：

语法

<img src="smiley.gif" alt="Smiley face" width="42" height="42">

现在让我们了解 img 标签中的每个属性是如何工作的：

1. src: src 属性定义我们尝试使用此标签加载的图像文件路径。它可以链接到网络上托管的图像（格式如 example.com/images/dummy.png）或本地托管在与网页相同的服务器上的图像文件。
2. alt: alt 属性定义我们想要显示的图像的文本和描述，以防图像由于网络连接或任何其他问题而无法加载。
3. 宽度和高度：这两个属性的宽度和高度定义了我们要在网页上显示的图像的宽度和高度。否则，图像将默认使用 100% 的高度和宽度。

现在让我们看看在网页上加载图像所需的完整 HTML 代码。将以下图像以“sunset.png”名称保存到本地驱动器中名为“image_test”的文件夹中。

现在，在同一文件夹中，让我们使用以下 HTML 代码创建一个名为 Sunset.html 的 HTML 文件：

现在转到您计算机上的浏览器并输入 .html 文件的路径。我的文件存储在D盘，所以我的路径是

D:/image_test/sunset.html

现在我们可以看到渲染的 HTML 页面已在浏览器中加载了日落图像。借助 CSS 和

标签，我们还可以根据我们的要求在图像周围显示文本。锚点和 img 标签均与所有浏览器兼容，如 Google Chrome、Safari、Microsoft Edge、Firefox 和 Internet Explorer。

HTML 中的链接图像

现在我们已经通过示例了解了锚标记和图像标记如何单独工作，现在让我们了解如何将这两种功能结合起来以实现我们希望用户通过单击重定向到新网页的场景图像的。要使图像可点击并将用户重定向到另一个网页，我们只需将图像嵌套在锚标记中即可。在下面的示例中，我们将尝试列出全球使用的前 3 个网络搜索引擎。在我们的列表中，我们将显示 3 个搜索引擎的徽标，通过单击任何徽标，用户将被重定向到相应的搜索引擎页面。让我们创建一个名为“redirection test”的文件夹，并在同一文件夹中保存以下图像

1。谷歌

2。雅虎

3。兵

现在我们将在同一文件中创建一个名为 imageredirection.html 的 .html。 imageredirection.html 将包含以下代码。

现在我们需要从浏览器访问 HTML 页面，为此我将输入本地路径“D:/redirectiontest/ imageredirection.html”。然后浏览器将渲染 HTML 文件以生成以下结果：

–>

用户将能够通过单击其徽标导航到相应的搜索引擎。从上面的例子中，我们可以看出HTML是一种简单而灵活的语言，它允许我们将多个标签组合在一起并实现这样的复杂功能。使用 img 和锚标记的组合是一种流行的组合。通过额外的 HTML 编码，我们还可以添加不同的 HTML 元素，例如使用

在有序或无序列表中显示链接图像。或

。 HTML 为每个发布的版本提供了极大的灵活性和简单性，可帮助 UI 和 UX 设计师设计我们在浏览互联网进行日常活动时看到的交互式且直观的网页。

推荐文章

这是 HTML 中图像链接的指南。在这里，我们讨论不同类型的 HTML 标签以及语法。您还可以阅读我们其他推荐的文章以了解更多信息 –

1. HTML 属性
2. HTML 格式标签
3. HTML 图像标签
4. HTML 框架

以上是HTML 中的图像链接的详细内容。更多信息请关注PHP中文网其他相关文章！