HTML图片

本文概述

• HTML img标签的属性
• 将height和width属性与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预期有利。

3）宽度

它是一个可选属性, 用于指定显示图像的宽度。现在不建议使用。你应该使用CSS代替width属性。

4）高度

h3图像的高度。 HTML height属性还支持iframe, 图片和对象元素。现在不建议使用。你应该使用CSS代替height属性。

将height和width属性与img标签一起使用

你已经了解了如何在网页中插入图片, 现在, 如果我们要根据需要提供一些高度和宽度来显示图片, 则可以使用图片的height和width属性进行设置。

例

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

立即测试

输出：

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

使用alt属性

我们可以将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。

使用<img>标签作为链接

我们还可以将图像链接到其他页面, 也可以将图像用作链接。为此, 请将<img>标记放在<a>标记内。

例

<a href="https://www.srcmini02.com/what-is-robotics"><img src="robot.jpg" height="100" width="100"></a>

立即测试

输出：

支持的浏览器