HTML教程-HTML<img>标签

HTML img 标签用于在网页上显示图像。HTML img 标签是一个空标签，只包含属性，没有闭合标签。

让我们看一个 HTML 图像的示例。

<h2>HTML 图像示例</h2>
<img src="good_morning.jpg" alt="早上好朋友们"/>

HTML img 标签的属性

src 和 alt 是 HTML img 标签的重要属性。HTML 图像标签的所有属性如下所示。

1) src

这是一个必需的属性，用于描述图像的源或路径。它告诉浏览器在服务器上查找图像的位置。

图像的位置可以是相同的目录或另一个服务器。

2) alt

alt 属性定义图像无法显示时的替代文本。alt 属性的值用文字描述图像。从 SEO 的角度来看，alt 属性非常有用。

3) width

这是一个可选属性，用于指定图像的宽度。现在不推荐使用。应该使用 CSS 替代 width 属性。

4) height

这是图像的高度。HTML height 属性还支持 iframe、image 和 object 元素。现在不推荐使用。应该使用 CSS 替代 height 属性。

使用 height 和 width 属性的 img 标签

你已经学习了如何在网页中插入图像，现在如果我们想根据需求为图像设置一些高度和宽度，可以使用图像的 height 和 width 属性进行设置。

示例：

<img src="animal.jpg" height="180" width="300" alt="动物图像">

注意：尽量在插入图像时使用高度和宽度，否则在网页上显示时可能会闪烁。

alt 属性的使用

我们可以在 img 标签中使用 alt 属性。如果图像无法在浏览器中显示，它将显示替代文本。以下是 alt 属性的示例：

<img src="animal.png" height="180" width="300" alt="动物图像">

如何从另一个目录/文件夹获取图像？

要在网页中插入图像，该图像必须存在于与 HTML 文件相同的文件夹中。但是，如果某些情况下图像位于其他目录中，可以像这样访问图像：

htmlCopy code
<img src="E:/images/animal.png" height="180" width="300" alt="动物图像">

在上述语句中，我们将图像放在本地磁盘 E -> images 文件夹 -> animal.png 中。

注意：如果 src URL 不正确或拼写错误，则图像将无法显示在网页上，请确保使用正确的 URL。

使用 <img> 标签作为链接

我们还可以将图像链接到其他页面，或者将图像用作链接。要实现这一点，请将 标签放在 标签中。

示例：

<a href="http://www.javatiku.cn/what-is-robotics">
    <img src="robot.jpg" height="100" width="100">
</a>

支持的浏览器

元素	Chrome	IE	Firefox	Opera	Safari
<img>	是	是	是	是	是