HTML - img 标签

HTML <img> 标签用于将图像嵌入到 HTML 文档中。它是一个内联和空元素，因此它不会从新行开始，也不需要结束标记。

<img> 元素必须具有两个属性 src 和 alt，前者从该源获取图像，后者指定图片的替代文本。浏览器从 <img> 标记中提供的源插入 HTML 图像，而不是直接将图片插入到文档中。

语法


<img src="..." alt="...">

属性

<img> 标签支持 HTML 的全局属性和事件属性。还有一些特定的属性，如下所列。

属性	值	描述
alt	text	指定替换文本。
crossorigin	anonymous use-credentials	它允许来自允许跨源访问的第三方站点的图像与 canvas 重复使用。
height	Pixels	指定图像的高度。
ismap	ismap	将图像定义为服务器端图像映射。
loading	eager lazy	指定应何时加载图像。
longdesc	URL	指定附加图像的详细说明。
referrerpolicy	no-referrer no-referrer-when-downgrade origin origin-when-cross-origin unsafe-url	指定哪些引用者信息。
sizes	sizes	指定不同的图像大小。
src	URL	指定将显示的图像 URL。
srcset	URL-list	指定在不同情况下要使用的图像文件列表。
usemap	#mapname	将图像定义为客户端图像映射，并与 <map> 和 <area> 标记一起使用。
width	pixels	设置图像的宽度（以像素为单位）或 %。

<img> 标签的示例

下面的例子将说明<img> 标签的用法。在哪里、何时以及如何使用 <img> 标签，以及我们如何使用 CSS 操作 img 元素。

使用 img 标签插入图像

让我们考虑以下示例，我们将使用 <img> 标签将图像上传到 HTML 页面。它将生成一个输出，其中包含上传到网页的图像


<!DOCTYPE html>
<html>
<head>
   <title>HTML Tag</title>
</head>
<body>
   <img src="/cg/images/logo.png" 
        alt="HTML Tutorial" height="150" width="390" />
</body>
</html>

使用 CSS 对齐图像元素

考虑到另一种情况，我们将使用 CSS 和 <img> 标签对齐图像。


<!DOCTYPE html>
<html>
<body>
   <h2>Image vertical-align: middle</h2>
   <p>
       Pawan Kalyan 
       <img src=
"https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRB3tcOH6bebY1QFANMOUDhGU0nI3fTaKqP2qEKxBxpRKKBL5Y-51iu&usqp=CAE&s" 
            width="42" height="42" style="vertical-align:middle">
       is an Indian actor, politician, filmmaker, and 
       philanthropist. He primarily works in Telugu cinema.
       He is the recipient of a Filmfare Award, a SIIMA Award,
       a CineMAA Award and a Santosham Film Award.
   </p>
   <h2>Image vertical-align: top</h2>
   <p>
       Mahendra Singh Dhoni 
       <img src=
"https://upload.wikimedia.org/wikipedia/commons/7/70/Mahendra_Singh_Dhoni_January_2016_%28cropped%29.jpg"
            width="42" height="42" style="vertical-align:top">
       is an former Indian cricketer. He was captain of 
       the Indian national team in limited-overs formats 
       from 2007 to 2017 and in Test cricket from 2008 to 2014. 
   </p>
</body>
</html>

可点击的图片

以下示例，我们将把 <img> 标签放在 <a> 标签内，使图像成为链接。


<!DOCTYPE html>
<html>

<head>
    <title>Image tag</title>
</head>

<body>
    <h2>QikepuCom</h2>
    <p>Click on the image to direct to webpage.</p> 
    <a href="/index.htm">
        <img src="/images/logo.png?v2" 
             height="55" width="200"> 
    </a> 
</body>

</html>

图像无法加载替代项

在以下示例中，我们将使用 alt 属性并使用 CSS 设置 <img> 标签的样式。


<!DOCTYPE html>
<html>
<body>
   <div>
      <img src="/cg/images/ogo.png"
           alt="QikepuCom_Logo" width="100" height="106">
   </div>
</body>
</html>

支持的浏览器

浏览器
<img>	Yes	Yes	Yes	Yes	Yes

打印本页