HTML - img 标签_HTML 菜鸟教程

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

<img> 元素必须具有两个属性 src 和 alt。src 用于获取图像，alt 指定图片的替代文本。

浏览器从 <img> 标签提供的源显示图像，而不是直接将图片插入到文档中。

语法

<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> 标签如何使用，如何使用 CSS 操作 img 元素。

<img>标签显示图像

下面使用 <img> 标签显示图像：

<!DOCTYPE html>
<html>
<head>
   <title>HTML img 标签</title>
</head>
<body>
   <img src="/images/logo.png" alt="HTML 教程" height="150" width="390" />
</body>
</html>

使用 CSS 对齐图像元素

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

<!DOCTYPE html>
<html>
<body>
   <h2>图像 vertical-align: middle 示例</h2>
   <p>
   Java 教程
   <img src="/images/logo.png" width="100" height="100" style="vertical-align:middle">
   Java 是一种流行的高级、面向对象的编程语言，最初由 Sun Microsystems 开发并于 1995 年发布。
   Java 被用于开发多种类型的软件应用程序，包括桌面应用程序、移动应用程序、Web 应用程序等等。
   </p>
   <h2>图像 vertical-align: top 示例</h2>
   <p>
   PHP 教程
   <img src="/images/logo.png" width="100" height="100" style="vertical-align:top">
   PHP 是一种开源的通用脚本语言，广泛用于网站开发。它由 Rasmus Lerdorf 开发。
   PHP 代表递归首字母缩略词 PHP：超文本预处理器。PHP是世界最受欢迎的服务器端编程语言。
   </p>
</body>
</html>

<img> 标签超链接图片

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

<!DOCTYPE html>
<html>

<head>
    <title>Image 标签</title>
</head>

<body>
    <h2> Qikepu_Com </h2>
    <p>点击图片跳转至网页。</p> 
    <a href="https://www.qikepu.com/">
    <img src="/images/logo.png" height="55" width="200"> 
    </a> 
</body>

</html>

图像无法加载替代项

以下将使用 alt 属性并使用 CSS 设置 <img> 标签的样式。

<!DOCTYPE html>
<html>
<body>
   <div>
    <img src="/images/ogo.png" alt="Qikepu的Logo无法加载" width="100" height="106">
   </div>
</body>
</html>

支持的浏览器

标签
<img>	Yes	Yes	Yes	Yes	Yes

<< HTML - output 标签 HTML - map 标签 >>