文
章
目
录
章
目
录
HTML img标签用于在网页上显示图像。HTML img标签是一个空标签，只包含属性，不使用HTML图像元素中的闭合标签。
让我们看一个HTML图片的示例。
<h2>HTML Image Example</h2>
<img src="good_morning.jpg" alt="Good Morning Friends"/>
HTML img标签的属性
src和alt是HTML img标签的重要属性。HTML图像标签的所有属性如下。
- src 这是一个必需属性，描述图像的源或路径。它指示浏览器在服务器上查找图像的位置。
图像的位置可以在同一目录中，也可以在另一台服务器上。
- alt alt属性定义了图像的替代文本，如果图像无法显示，则显示替代文本。alt属性的值用文字描述图像。从SEO的角度来看，alt属性被认为是一个好的实践。
- width 这是一个可选属性，用于指定图像的显示宽度。现在不推荐使用。应该使用CSS来替代width属性。
- height 它表示图像的高度。HTML height属性还支持iframe、图像和对象元素。现在不推荐使用。应该使用CSS来替代height属性。
使用height和width属性与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——>图像文件夹——>animal.png中。
注意：如果src URL不正确或拼写错误，则不会在网页上显示图像，因此请尽量提供正确的URL。
使用<img>标签作为链接
我们还可以将图像链接到其他页面，或者将图像用作链接。要执行此操作，将<img>标签放在<a>标签内部。
示例：
<a href="https://www.panziye.com/what-is-robotics"><img src="robot.jpg" height="100" width="100"></a>
支持的浏览器
| 元素 | Chrome | IE | Firefox | Opera | Safari |
| <img> | 支持 | 支持 | 支持 | 支持 | 支持 |
