首页 > 文章 > web前端 > HTML 中的图像链接

HTML 中的图像链接

PHPz原创: 2024-09-04 16:42:50881浏览

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

HTML 锚标记

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

点击此处！！

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

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

HTML 中的图像链接

输出

–>

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

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

HTML 图像标签

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

语法

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

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

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

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

HTML 中的图像链接

现在，在同一文件夹中，让我们使用以下 HTML 代码创建一个名为 Sunset.html 的 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。谷歌

HTML 中的图像链接