图片标签 ‹img›

Exisi 2020-06-03 10:33:15

Categories： Tags：

<img> 标签将一份图像嵌入文档

属性

描述

src

图像的 URL，这个属性是必需的

alt

定义了图像加载失败时的备用显示文本描述

如果把这个属性设置为空字符串（alt=""），则表明该图像不是内容的关键部分，如果图片加载失败，可视化浏览器会隐藏表示图片损坏的图标。

将图像复制并粘贴为文本，或是将图像的链接保存为浏览器书签时，也会用到此属性。

height

图像的高度，单位是 CSS 像素。可以只指定 width 和 height 中的一个值，浏览器会根据原始图像进行缩放。

width

图像的宽度，在单位是 CSS 像素。

crossorigin

这个枚举属性表明是否必须使用 CORS 完成相关图像的抓取。启用 CORS 的图像可以在 <canvas> 元素中重复使用，而不会被污染（tainted）。允许的值有：

参数	描述
anonymous	执行一个跨域请求（比如，有 Origin HTTP header）。但是没有发送证书（比如，没有 cookie，没有 X.509 证书，没有 HTTP 基本授权认证）。如果服务器没有把证书给到源站（没有设置 Access-Control-Allow-Origin HTTP 头），图像会被污染，而且它的使用会被限制。
use-credentials	一个有证书的跨域请求（比如，有 Origin HTTP header）被发送（比如，cookie，一份证书，或者 HTTP 基本验证信息）。如果服务器没有给源站发送证书（通过 Access-Control-Allow-Credentials HTTP header），图像将会被污染，且它的使用会受限制。当用户并未显式使用本属性时，默认不使用 CORS 发起请求（例如，不会向服务器发送原有的HTTP 头部信息），可防止其在 <canvas> 中的使用。如果无效，默认当做 anonymous 关键字生效。更多信息，请查看 CORS 属性设置。

decoding

为浏览器提供图像解码方式上的提示。允许的值：

参数	描述
sync	同步解码图像，实现与其他内容的显示相互斥的原子显示。此图像的解码将是一个原子操作，在完成解码显示之前，不被其他内容的显示而打断，因此其他内容的显示会被延迟。
async	异步解码图像，以减少其他内容的显示延迟。
auto	默认值：不指定解码方式，由浏览器决定哪一种对用户来说是最合适的。

importance

指示下载资源时相对重要性，或者说优先级。允许的值：

参数	描述
auto	不指定优先级。浏览器可以使用自己的算法来为图像选择优先级。
high	此图像在下载时优先级较高。
low	此图像在下载时优先级较低。

ismap

这个布尔属性表示图像是否是服务器端 map 的一部分。如果是，那么点击图片的精准坐标将会被发送到服务器。

注

只有在 <img> 元素是一个拥有有效 href 属性的 <a> 元素的后代元素的情况下，这个属性才会被允许使用

指示浏览器应当如何加载该图像。允许的值：

参数	描述
eager	立即加载图像，不管它是否在可视视口（visible viewport）之外（默认值）。
lazy	延迟加载图像，直到它和视口接近到一个计算得到的距离，由浏览器定义

referrerpolicy

一个字符串，指示在获取资源时使用哪个引用方：

参数	描述
no-referrer	不发送Referer 标头。
no-referrer-when-downgrade	导航到没有 HTTPS 的源时，不会发送 Referer 标头。如果未另行指定策略，则这是默认设置。
origin	Referer 标头将包括页面的来源（方案、主机和端口（en-US））。
origin-when-cross-origin	导航到其他来源会将包含的引用数据限制为方案、主机和端口，而从同一来源导航将包含完整路径和查询字符串
unsafe-url	Referer 标头将始终包含来源、路径和查询字符串，但不包含片段、密码或用户名。这是不安全的，因为它可以将信息从受 TLS 保护的资源泄漏到不安全的来源。

sizes

表示资源大小的、以逗号隔开的一个或多个字符串。每一个资源大小包括：1. 一个媒体条件。最后一项一定是被忽略的。 2. 一个资源尺寸的值

资源尺寸的值被用来指定图像的预期尺寸。当 srcset 中的资源使用了宽度描述符 w 时，用户代理会使用当前图像大小来选择 srcset 中合适的一个图像 URL。被选中的尺寸影响图像的显示大小 (en-US)（如果没有影响大小的 CSS 样式被应用的话）。如果没有设置 srcset 属性，或者没有属性值，那么 sizes 属性也将不起作用。

srcset

以逗号分隔的一个或多个字符串列表表明一系列用户代理使用的可能的图像。每一个字符串由以下组成：1. 指向图像的 URL。 2. 可选地，再加一个空格之后，附加以下的其一：

一个宽度描述符，这是一个正整数，后面紧跟 'w' 符号。该整数宽度除以 sizes 属性给出的资源（source）大小来计算得到有效的像素密度，即换算成和 x 描述符等价的值。
一个像素密度描述符，这是一个正浮点数，后面紧跟 'x' 符号。如果没有指定源描述符，那它会被指定为默认的 1x。在相同的 srcset 属性中混合使用宽度描述符和像素密度描述符时，会导致该值无效。重复的描述符（比如，两个源在相同的 srcset 两个源都是 2x）也是无效的。

usemap

与元素相关联的 image map (en-US) 的部分 URL（以 '#' 开始的部分）

实例

<!DOCTYPE html>

<head>

</head>

<body>

</body>

</html>

浏览器运行结果如下：

来自 <https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/img>

特殊字符

多媒体标签 ‹audio› ‹vedio› ‹embed› ‹object› ‹param›