HTML图片

前端 潘老师 6个月前 (10-15) 118 ℃ (0) 扫码查看

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 这是一个必需属性,描述图像的源或路径。它指示浏览器在服务器上查找图像的位置。

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

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

版权声明:本站文章,如无说明,均为本站原创,转载请注明文章来源。如有侵权,请联系博主删除。
本文链接:https://www.panziye.com/front/9608.html
喜欢 (0)
请潘老师喝杯Coffee吧!】
分享 (0)
用户头像
发表我的评论
取消评论
表情 贴图 签到 代码

Hi,您需要填写昵称和邮箱!

  • 昵称【必填】
  • 邮箱【必填】
  • 网址【可选】