HTML图像标签在网页上显示图像。它是一个包含图像源和其他属性的自关闭标记(意味着它的结构方式使您不必添加单独的关闭标记)。
下面是一个图像html标签的例子:
现在,让我们详细讨论一下图像的HTML标记(也称为标记)。
如何使用HTML图像标签
可以在HTML代码中想要显示图像的任何地方插入标记。就像在产品页面的英雄部分一样。
它总是包含两个必需的属性:
src:指示所显示的图像的路径
alt:表示在图像加载失败时显示的替代(alt)文本,适用于使用屏幕阅读器或其他文本转语音工具的个人
图像不是直接嵌入到页面中,而是从标记中的源路径加载的。
而且图像可以从任何地方获取。在同一服务器上(称为相对路径)或在不同的服务器上(称为绝对路径)。
您还可以将图像标签嵌套到其他容器标签中。,带有开始和结束标记的HTML标记。
下面是一个图片标签嵌套在链接到另一个网站的锚标签中的例子:
它创建了一个可点击的图像链接。
HTML图像属性的类型
HTML图像属性用于指定有关图像的信息。您可以使用它们来控制如何显示、加载图像等。
让我们逐一查看这些属性。
Src属性
这是最重要的属性。它指定图像的路径。
如果没有源路径,浏览器将无法找到并显示图像。
源可以是绝对URL,也可以是相对URL。
Alt属性
该属性用于包含图像的替代文本——基于文本的图像解释。
浏览器在加载图像失败或找不到图像时显示此文本。比如当用户网速很慢的时候。
在网页上是这样的:
它还使视障读者和那些更喜欢听内容而不是阅读内容的人能够访问图像。因为屏幕阅读器和其他文本转语音工具使用所有文本来描述图像。
从SEO的角度来看,这也是一个重要的属性。
为什么?
因为所有文本可以帮助搜索引擎,如谷歌更好地理解你的内容,这可以带来更高的排名。这对于帮助您的图像出现在图像结果中尤其有益。特别是如果你包含了相关的关键字。
Title属性
此属性用于设置图像的标题。提供关于图像的附加上下文。
title属性显示为工具提示—当您将鼠标光标悬停在图像上时,该元素将显示有关图像的信息。
工具提示看起来是这样的:
Longdesc属性
此属性用于链接到带有图像详细描述的网页。这对于无法用所有文本完整解释的复杂图像很有帮助。
它可以是另一个网页的地址,也可以是同一页面中的一个元素。
但很少使用。因为大多数浏览器不支持它。
交叉源属性
当从另一个域加载图像时,使用crosorigin属性。
它告诉浏览器发出跨域资源共享(CORS)请求。CORS安全机制使web服务器能够控制其他域是否可以访问其资源。并保护敏感信息不被未经授权的请求访问。
crosorigin属性可以有以下值:
anonymous:发送没有凭据的请求。它与空的交叉源属性相同。这种类型的请求用于访问公共可用资源。
use-credentials:发送带有身份验证凭证的请求。、cookies、证书等。这种类型的请求用于访问私有资源。
Ismap属性
ismap属性表示存储在服务器上的图像映射(带有可单击区域的图像)。它只用于可点击的图像(即, 它是一个布尔属性,意思是当它存在时为“真”,不存在时为“假”。它不包含任何值。 例如: 当用户单击图像时,也会随请求一起发送单击的位置。它将光标坐标添加到URL的末尾。 在上面的例子中,点击坐标为(x=33, y=45)的图像将打开以下URL: https://example.com/?33,45 服务器上的程序或脚本处理请求并执行特定的操作。或者将用户带到特定的页面。 现在很少用了。因为它对屏幕阅读器的用户没有帮助。使用JS/CSS提供了更高效的功能,而不依赖于服务器的处理。 Usemap属性 usemap属性表示带有可点击区域的图像(称为图像映射)。 每个区域都链接到一个特定的地址。,网页或资源。 关于这些区域和地址的位置信息存储在标签在标签)。