HTML：活文档标准

网页开发者版 — 最后更新于 2024年9月12日

1. 1. 4.8 嵌入内容
      1. 4.8.1 picture 元素
      2. 4.8.2 source 元素
      3. 4.8.3 img 元素

4.8 嵌入内容

4.8.1 picture 元素

类别:

流内容.

短语内容.

嵌入内容.

可感知内容.

可以使用此元素的上下文:

在预期 嵌入内容 的地方。

内容模型:

零个或多个 source 元素，后跟一个 img 元素，可以选择性地与 支持脚本的元素 交织在一起。

在 text/html 中的标签省略:

两个标签都不能省略。

内容属性:

全局属性

可访问性考虑因素:

针对作者.

针对实现者.

DOM 接口:

使用 HTMLPictureElement。

picture 元素是一个容器，它为其包含的 img 元素提供了多个来源，以便作者可以声明性地控制或向用户代理提供有关要使用哪个图像资源的提示，具体取决于屏幕像素密度、视口 大小、图像格式和其他因素。它 表示 其子元素。

picture 元素与外观相似的 video 和 audio 元素略有不同。虽然它们都包含 source 元素，但当元素嵌套在 picture 元素中时，source 元素的 src 属性没有意义，并且资源选择算法也不同。此外，picture 元素本身不显示任何内容；它仅仅为其包含的 img 元素提供了一个上下文，使该元素能够从多个 URL 中进行选择。

4.8.2 source 元素

类别:

无。

可以使用此元素的上下文:

作为 picture 元素的子元素，位于 img 元素之前。

作为 媒体元素 的子元素，位于任何 流内容 或 track 元素之前。

内容模型:

无.

在 text/html 中的标签省略:

无 结束标签。

内容属性:

全局属性

type — 嵌入资源的类型

media — 适用的媒体

src (在 audio 或 video 中) — 资源的地址

srcset (在 picture 中) — 在不同情况下使用的图像，例如高分辨率显示器、小型显示器等。

sizes (在 picture 中) — 不同页面布局的图像大小

width (在 picture 中) — 水平尺寸

height (在 picture 中) — 垂直尺寸

可访问性考虑因素:

针对作者.

针对实现者.

DOM 接口:

使用 HTMLSourceElement。

source 元素允许作者为 img 元素指定多个备用 源集 或为 媒体元素 指定多个备用 媒体资源。它本身 不表示 任何内容。

type 属性可以存在。如果存在，则该值必须是 有效的 MIME 类型字符串。

media 属性也可以存在。如果存在，则该值必须包含 有效的媒体查询列表。如果该值 不匹配环境，则用户代理将跳到下一个 source 元素。

media 属性在 媒体元素 的 资源选择算法 期间仅评估一次。相反，当使用 picture 元素时，用户代理将 对环境的变化做出反应。

其余要求取决于父元素是 picture 元素还是 媒体元素

source 元素的父元素是 picture 元素

srcset 属性必须存在，并且是 srcset 属性。

如果选择了 source 元素，则 srcset 属性将 图像源 贡献给 源集。

如果 srcset 属性有任何使用 宽度描述符 的 图像候选字符串，则 sizes 属性也可以存在。此外，如果以下同级 img 元素 不允许自动大小，则 sizes 属性必须存在。sizes 属性是 sizes 属性，如果选择了 source 元素，则该属性将 源大小 贡献给 源集。

如果 img 元素 允许自动大小，则可以在前面的同级 source 元素上省略 sizes 属性。在这种情况下，它等效于指定 auto。

source 元素支持 尺寸属性。img 元素可以使用 width 和 height 属性（在 source 元素上），而不是在 img 元素本身上，来确定其呈现的尺寸和纵横比，如“渲染”部分所定义。

type 属性给出 源集 中图像的类型，以便用户代理在不支持给定类型时可以跳到下一个 source 元素。

如果未指定 type 属性，则如果用户代理在获取图像后发现它不支持图像格式，则它不会选择不同的 source 元素。

当 source 元素具有以下同级 source 元素或 img 元素（并指定了 srcset 属性）时，它必须至少具有以下一项

• 指定了 media 属性，其值在 去除前导和尾随 ASCII 空格 后，不是空字符串，并且与字符串“all” 不区分大小写 匹配。

• 指定了 type 属性。

src 属性不能存在。

source 元素的父元素是 媒体元素

src 属性给出 媒体资源 的 URL。该值必须是 有效的非空 URL，可能包含空格。此属性必须存在。

type 属性指定了 媒体资源 的类型，以帮助用户代理在获取之前确定它是否可以播放此 媒体资源。某些 MIME 类型定义的 codecs 参数可能需要用于精确指定资源的编码方式。[RFC6381]

当 source 元素已插入到 video 或 audio 元素中时，动态修改其 src 或 type 属性将无效。要更改正在播放的内容，只需直接使用 媒体元素 上的 src 属性，并可能利用 canPlayType() 方法从可用资源中进行选择。通常，在文档解析完成后手动操作 source 元素是一种不必要的复杂方法。

以下列表显示了如何在 type 属性中使用 codecs= MIME 参数的一些示例。

H.264 受限基线配置文件视频（主视频和扩展视频兼容）级别 3 和低复杂度 AAC 音频在 MP4 容器中

<source src='video.mp4' type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>

H.264 扩展配置文件视频（基线兼容）级别 3 和低复杂度 AAC 音频在 MP4 容器中

<source src='video.mp4' type='video/mp4; codecs="avc1.58A01E, mp4a.40.2"'>

H.264 主配置文件视频级别 3 和低复杂度 AAC 音频在 MP4 容器中

<source src='video.mp4' type='video/mp4; codecs="avc1.4D401E, mp4a.40.2"'>

H.264 “高级”配置文件视频（与主、基线或扩展配置文件不兼容）级别 3 和低复杂度 AAC 音频在 MP4 容器中

<source src='video.mp4' type='video/mp4; codecs="avc1.64001E, mp4a.40.2"'>

MPEG-4 视觉简单配置文件级别 0 视频和低复杂度 AAC 音频在 MP4 容器中

<source src='video.mp4' type='video/mp4; codecs="mp4v.20.8, mp4a.40.2"'>

MPEG-4 高级简单配置文件级别 0 视频和低复杂度 AAC 音频在 MP4 容器中

<source src='video.mp4' type='video/mp4; codecs="mp4v.20.240, mp4a.40.2"'>

MPEG-4 视觉简单配置文件级别 0 视频和 AMR 音频在 3GPP 容器中

<source src='video.3gp' type='video/3gpp; codecs="mp4v.20.8, samr"'>

Theora 视频和 Vorbis 音频在 Ogg 容器中

<source src='video.ogv' type='video/ogg; codecs="theora, vorbis"'>

Theora 视频和 Speex 音频在 Ogg 容器中

<source src='video.ogv' type='video/ogg; codecs="theora, speex"'>

仅 Vorbis 音频在 Ogg 容器中

<source src='audio.ogg' type='audio/ogg; codecs=vorbis'>

仅 Speex 音频在 Ogg 容器中

<source src='audio.spx' type='audio/ogg; codecs=speex'>

仅 FLAC 音频在 Ogg 容器中

<source src='audio.oga' type='audio/ogg; codecs=flac'>

Dirac 视频和 Vorbis 音频在 Ogg 容器中

<source src='video.ogv' type='video/ogg; codecs="dirac, vorbis"'>

srcset 和 sizes 属性不得存在。

<script>
 function fallback(video) {
   // replace <video> with its contents
   while (video.hasChildNodes()) {
     if (video.firstChild instanceof HTMLSourceElement)
       video.removeChild(video.firstChild);
     else
       video.parentNode.insertBefore(video.firstChild, video);
   }
   video.parentNode.removeChild(video);
 }
</script>
<video controls autoplay>
 <source src='video.mp4' type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
 <source src='video.ogv' type='video/ogg; codecs="theora, vorbis"'
         onerror="fallback(parentNode)">
 ...
</video>

4.8.3 img 元素

类别:

流内容.

短语内容.

嵌入内容.

表单关联元素.

如果元素具有 usemap 属性：交互式内容。

可感知内容.

可以使用此元素的上下文:

在预期 嵌入内容 的地方。

作为 picture 元素的子元素，位于所有 source 元素之后。

内容模型:

无.

在 text/html 中的标签省略:

没有 结束标签。

内容属性:

全局属性

alt — 当图像不可用时使用的替换文本

src — 资源的地址

srcset — 在不同情况下使用的图像，例如高分辨率显示器、小型显示器等。

sizes — 不同页面布局的图像大小

crossorigin — 元素如何处理跨源请求

usemap — 要使用的 图像映射 的名称

ismap — 图像是否为服务器端图像映射

width — 水平尺寸

height — 垂直尺寸

referrerpolicy — 元素发起的 获取 的 引荐来源策略

decoding — 用于处理此图像以进行呈现时的解码提示

loading — 用于确定加载延迟时使用

fetchpriority — 设置元素发起的 获取 的 优先级

可访问性考虑因素:

如果元素具有非空 alt 属性：供作者使用；供实现者使用。

否则：供作者使用；供实现者使用。

DOM 接口:

使用 HTMLImageElement。

img 元素表示图像。

img 元素具有 尺寸属性源，最初设置为元素本身。

由 src 和 srcset 属性指定的图像，以及如果父元素是 picture 元素，则任何之前的同级 source 元素的 srcset 属性，都是嵌入内容；alt 属性的值为无法处理图像或已禁用图像加载的用户提供等效内容（即它是 img 元素的 回退内容）。

alt 属性值的具体要求在 单独的部分 中描述。

src 属性必须存在，并且必须包含一个 有效的非空 URL（可能由空格包围），该 URL 引用非交互式、可选动画的图像资源，该资源既不分页也不带脚本。

上述要求意味着图像可以是静态位图（例如 PNG、GIF、JPEG）、单页矢量文档（单页 PDF、带有 SVG 文档元素的 XML 文件）、动画位图（APNG、动画 GIF）、动画矢量图形（带有 SVG 文档元素 并使用声明式 SMIL 动画的 XML 文件）等等。但是，这些定义排除了带有脚本的 SVG 文件、多页 PDF 文件、交互式 MNG 文件、HTML 文档、纯文本文档等。[PNG] [GIF] [JPEG] [PDF] [XML] [APNG] [SVG] [MNG]

srcset 属性也可以存在，并且是一个 srcset 属性。

srcset 属性和 src 属性（如果未使用 宽度描述符）将 图像源 贡献给 源集（如果没有选择 source 元素）。

如果 srcset 属性存在并且有任何使用 宽度描述符 的 图像候选字符串，则 sizes 属性也必须存在。如果未指定 srcset 属性，并且 loading 属性处于 延迟 状态，则可以使用值“auto”（ASCII 不区分大小写）指定 sizes 属性。sizes 属性是一个 sizes 属性，它将 源大小 贡献给 源集（如果没有选择 source 元素）。

如果 img 元素 允许自动调整大小，则

• 其 loading 属性处于 延迟 状态，并且
• 其 sizes 属性的值为“auto”（ASCII 不区分大小写），或以“auto,”（ASCII 不区分大小写）开头。

crossorigin 属性是一个 CORS 设置属性。其目的是允许使用允许跨源访问的第三方站点的图像与 canvas 一起使用。

referrerpolicy 属性是一个 引用来源策略属性。它的目的是在 获取图像时设置使用的 引用来源策略。 [REFERRERPOLICY]

decoding 属性指示解码此图像的首选方法。如果存在，该属性必须是 图像解码提示。此属性的 缺失值默认值 和 无效值默认值 均为 auto 状态。

fetchpriority 属性是一个 获取优先级属性。它的目的是在 获取图像时设置使用的 优先级。

loading 属性是一个 延迟加载属性。它的目的是指示加载视口外部图像的策略。

当 loading 属性的状态更改为 Eager 状态时，用户代理必须执行以下步骤

1. 令 resumptionSteps 为 img 元素的 延迟加载恢复步骤。

2. 如果 resumptionSteps 为空，则返回。

3. 将 img 的 延迟加载恢复步骤 设置为空。

4. 调用 resumptionSteps。

<img src="1.jpeg" alt="1">
<img src="2.jpeg" loading=eager alt="2">
<img src="3.jpeg" loading=lazy alt="3">
<div id=very-large></div> <!-- Everything after this div is below the viewport -->
<img src="4.jpeg" alt="4">
<img src="5.jpeg" loading=lazy alt="5">

给定 insertedNode，img 的 HTML 元素插入步骤 为

1. 如果 insertedNode 的父元素是 picture 元素，则将其计为 insertedNode 的 相关变异。

给定 removedNode 和 oldParent，img 的 HTML 元素移除步骤 为

1. 如果 oldParent 是 picture 元素，则将其计为 removedNode 的 相关变异。

img 元素不得用作布局工具。特别是，img 元素不应用于显示透明图像，因为此类图像很少传达含义，也很少对文档有任何有益的补充。

如果存在，usemap 属性可以指示图像具有关联的 图像地图。

当用于作为具有 href 属性的 a 元素的后代的元素时，ismap 属性通过其存在指示该元素提供对服务器端图像地图的访问。这会影响相应 a 元素上事件的处理方式。

ismap 属性是一个 布尔属性。不得在没有祖先 a 元素（具有 href 属性）的元素上指定该属性。

当与在 picture 元素中指定了 media 属性的 source 元素一起使用时，usemap 和 ismap 属性可能会导致令人困惑的行为。

img 元素支持 尺寸属性。

image.width [ = value ]

image.height [ = value ]

这些属性返回图像的实际渲染尺寸，如果尺寸未知则返回 0。

可以设置它们以更改相应的 content 属性。

image.naturalWidth

image.naturalHeight

这些属性返回图像的自然尺寸，如果尺寸未知则返回 0。

image.complete

如果图像已完全下载或未指定图像，则返回 true；否则，返回 false。

image.currentSrc

返回图像的 绝对 URL。

image.decode()

此方法导致用户代理 并行 解码图像，并在解码完成后返回一个 promise。

如果无法解码图像，则 promise 将被拒绝，并带有 "EncodingError" DOMException。

image = new Image([ width [, height ] ])

返回一个新的 img 元素，如果适用，其 width 和 height 属性将设置为相关参数中传递的值。

const img = new Image();
img.src = "nebula.jpg";
img.onload = () => {
    document.body.appendChild(img);
};
img.onerror = () => {
    document.body.appendChild(new Text("Could not load the nebula :("));
};

const img = new Image();
img.src = "nebula.jpg";
img.decode().then(() => {
    document.body.appendChild(img);
}).catch(() => {
    document.body.appendChild(new Text("Could not load the nebula :("));
});

const container = document.querySelector("#container");

const { containerWidth, containerHeight } = computeDesiredSize();
requestAnimationFrame(() => {
 container.style.width = containerWidth;
 container.style.height = containerHeight;
});

// ...

const img = new Image();
img.src = "supernova.jpg";
img.decode().then(() => {
    requestAnimationFrame(() => container.appendChild(img));
});

<p>I lived in <img src="carouge.svg" alt=""> Carouge.</p>

<p>Home town: <img src="carouge.svg" alt="Carouge"></p>

<p>Carouge has a coat of arms.</p>
<p><img src="carouge.svg" alt="The coat of arms depicts a lion, sitting in front of a tree."></p>
<p>It is used as decoration all over the town.</p>

<p>Carouge has a coat of arms.</p>
<p><img src="carouge.svg" alt=""></p>
<p>The coat of arms depicts a lion, sitting in front of a tree.
It is used as decoration all over the town.</p>

<p>She picked up the folder and a piece of paper fell out.</p>
<p><img src="carouge.svg" alt="Shaped like a shield, the paper had a
red background, a green tree, and a yellow lion with its tongue
hanging out and whose tail was shaped like an S."></p>
<p>She stared at the folder. S! The answer she had been looking for all
this time was simply the letter S! How had she not seen that before? It all
came together now. The phone call where Hector had referred to a lion's tail,
the time Maria had stuck her tongue out...</p>

<p>The last user to have uploaded a coat of arms uploaded this one:</p>
<p><img src="last-uploaded-coat-of-arms.cgi" title="User-uploaded coat of arms."></p>

<article>
 <h1>My cats</h1>
 <h2>Fluffy</h2>
 <p>Fluffy is my favorite.</p>
 <img src="fluffy.jpg" alt="She likes playing with a ball of yarn.">
 <p>She's just too cute.</p>
 <h2>Miles</h2>
 <p>My other cat, Miles just eats and sleeps.</p>
</article>

<article>
 <h1>Photography</h1>
 <h2>Shooting moving targets indoors</h2>
 <p>The trick here is to know how to anticipate; to know at what speed and
 what distance the subject will pass by.</p>
 <img src="fluffy.jpg" alt="A cat flying by, chasing a ball of yarn, can be
 photographed quite nicely using this technique.">
 <h2>Nature by night</h2>
 <p>To achieve this, you'll need either an extremely sensitive film, or
 immense flash lights.</p>
</article>

<article>
 <h1>About me</h1>
 <h2>My pets</h2>
 <p>I've got a cat named Fluffy and a dog named Miles.</p>
 <img src="fluffy.jpg" alt="Fluffy, my cat, tends to keep itself busy.">
 <p>My dog Miles and I like go on long walks together.</p>
 <h2>music</h2>
 <p>After our walks, having emptied my mind, I like listening to Bach.</p>
</article>

<article>
 <h1>Fluffy and the Yarn</h1>
 <p>Fluffy was a cat who liked to play with yarn. She also liked to jump.</p>
 <aside><img src="fluffy.jpg" alt="" title="Fluffy"></aside>
 <p>She would play in the morning, she would play in the evening.</p>
</article>