HTML教程-HTML图像

HTML img 标签用于在网页上显示图像。HTML img 标签是一个只包含属性的空标签，HTML 图像元素中不使用结束标签。

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

<h2>HTML 图像示例</h2>  
<img src="good_morning.jpg" alt="Good Morning Friends"/>  

HTML img 标签的属性

src 和 alt 是 HTML img 标签的重要属性。下面给出了 HTML 图像标签的所有属性。

1) src

是描述图片来源或路径的必要属性。它指示浏览器在服务器上的何处查找图像。

图像的位置可能在同一目录或另一台服务器上。

2）alt

alt 属性定义图像的替代文本，如果它不能显示的话。alt 属性的值用文字描述图像。alt 属性被认为有利于 SEO 预期。

3) width

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

4) height

它是图像的高度。HTML 高度属性还支持 iframe、图像和对象元素。现在不推荐。您应该应用 CSS 代替高度属性。

在 img 标签中使用高度和宽度属性

您已经了解了如何在网页中插入图像，现在如果我们想根据需要给图像提供一些高度和宽度来显示图像，那么我们可以通过图像的高度和宽度属性来设置它。

例子：

<img src="animal.jpg" height="180" width="300" alt="animal image">  

注意：始终尝试插入具有高度和宽度的图像，否则在网页上显示时可能会闪烁。

alt属性的使用

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

<img src="animal.png" height="180" width="300" alt="animal image">

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

要在您的网站中插入图像，该图像必须存在于您放置 HTML 文件的同一文件夹中。但是如果在某些情况下图像在其他目录中可用，那么您可以像这样访问图像：

<img src="E:/images/animal.png" height="180" width="300" alt="animal image">  

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

注意：如果 src URL 不正确或拼写错误，则它不会在网页上显示您的图像，因此请尝试输入正确的 URL。

使用 标签作为链接

我们还可以将图像链接到其他页面，或者我们可以使用图像作为链接。为此，将 标签放在 标签内。