HTML图片

文
章
目
录

• HTML img标签的属性
• 使用alt属性
• 如何从另一个目录/文件夹获取图像？
• 使用<img>标签作为链接
•  支持的浏览器

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图像标签的所有属性如下。

1. src 这是一个必需属性，描述图像的源或路径。它指示浏览器在服务器上查找图像的位置。

图像的位置可以在同一目录中，也可以在另一台服务器上。

2. alt alt属性定义了图像的替代文本，如果图像无法显示，则显示替代文本。alt属性的值用文字描述图像。从SEO的角度来看，alt属性被认为是一个好的实践。
3. width 这是一个可选属性，用于指定图像的显示宽度。现在不推荐使用。应该使用CSS来替代width属性。
4. 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>  

 支持的浏览器