HTML <img>用法及代码示例

HTML <img>标记用于在网页/网站内添加图像。如今，网站不直接将图像添加到网页，因为使用<img>标签将图像链接到网页，该标签为图像保留了空间。

用法:

<img src="" alt="" width="" height="">

属性：<img>标记具有以下属性。

HTML <img> src属性用法及代码示例：它用于指定图像的路径。
alt:它用于为图像指定替代文本。这很有用，因为它可以通知用户有关图像的含义，并且由于任何网络问题，如果无法显示图像，则将显示此替代文本。
crossorigin:它用于从允许cross-origin访问与画布一起使用的第三方站点导入图像。
height:用于指定图像的高度。
width:用于指定图像的宽度。
ismap:它用于将图像指定为服务器端图像映射。
loading:它用于指定浏览器是应推迟加载图像直到满足某些条件还是立即加载图像。
longdesc:它用于指定指向图像详细描述的URL。
referrerpolicy：用于指定在提取图像时要使用的引荐来源信息，即no-referrer，no-referrer-when降级，来源，origin-when-cross来源，unsafe-url。
sizes:用于指定不同页面布局的图像尺寸。
srcset:它用于指定在不同情况下使用的图像文件列表。
usemap:它用于将图像指定为客户端图像映射。

范例1：在此示例中，我们将<img>标记与src，width，height和alt属性一起使用。

HTML


<!DOCTYPE html>
<html>
  
<body style="text-align:center;">
    <h3>GeeksforGeeks logo</h3>
      
    <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-13.png"
        width="420" height="100" 
        alt="Geeksforgeeks.org">
</body>
  
</html>

输出：

具有宽度和高度的img src

范例2：在此示例中，我们添加了style属性，以向图像添加边框。

HTML


<!DOCTYPE html>
<html>
  
<body style="text-align:center;">
    <h3>GeeksforGeeks logo</h3>
  
    <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-13.png"
        width="420" height="100" 
        alt="Geeksforgeeks.org" 
        style="border:5px solid black">
</body>
  
</html>

输出：

带有边框的图像源

相关用法

注：本文由纯净天空筛选整理自Mandeep_Sheoran大神的英文原创作品 HTML <img> Tag。非经特殊声明，原始代码版权归原作者所有，本译文未经允许或授权，请勿转载或复制。