HTML5/embedded-content-1

嵌入内容

img元素

分类：

流式内容。
段落式内容。
嵌入式内容。
如果元素有一个usemap属性: 交互式内容。

使用场景：

需要嵌入式内容处。

内容模型：

空。

允许的属性：

全局属性
alt
src
usemap
ismap
width
height

DOM接口：

[NamedConstructor=Image(), NamedConstructor=Image(in unsigned long width), NamedConstructor=Image(in unsigned long width, in unsigned long height)] interface HTMLImageElement : HTMLElement { attribute DOMString alt; attribute DOMString src; attribute DOMString useMap; attribute boolean isMap; attribute unsigned long width; attribute unsigned long height; readonly attribute unsigned long naturalWidth; readonly attribute unsigned long naturalHeight; readonly attribute boolean complete;
};

当用户代理被要求处理一个 img 元素的 srcset 属性时， 用户代理必须运行下述返回一个 URL 与像素密度（在无从选择的情况分别是 null 与 undefined）的步骤：

1. 令输入为 img 元素的 srcset 属性的值。
2. 令位置为指向输入的指针，一开始指向字符串的起始位置。
3. 令粗糙候选为一个（URL，未解析描述子）的有序列，一开始为空。此列的条目顺序为加入此列的时间顺序。
4. 字符串分断回圈：跳过空白。
5. 搜集一串非空白字符，令其为 url。
6. 搜集一串非 U+002C COMMA（,）字符，并令其为描述子。
7. 将（url，描述子）加入粗糙候选。
8. 若位置已超过输入的结尾，跳至描述子解析器步骤。
9. 将位置移到输入的下一个字符（跳过分开两个候选的 U+002C COMMA（,）字符。）
10. 回到字符串分断回圈步骤。
11. 描述子解析器：令候选为一个条目是（URL，像素密度，宽度，高度）的有序列
    Error creating thumbnail: Unable to save thumbnail to destination
    ，一开始为空。此列的条目顺序为加入此列的时间顺序。
12. 对于在粗糙候选的每个条目（url，未解析描述子），按照加入粗糙候选的顺序，运行这些子步骤：
    1. 令描述子列为在空白分断未解析描述子的结果。
    2. 令错误为否。
    3. 令宽度为没有。
    4. 令高度为没有。
    5. 令密度为没有。
    6. 对于描述子列里的每一个 token，运行下面列表中合适的步骤
       Error creating thumbnail: Unable to save thumbnail to destination
       ：

       ↪ 若 token 为一个合法非负整数接 U+0077 LATIN SMALL LETTER W 字符

       Error creating thumbnail: Unable to save thumbnail to destination

       1. 若宽度不为没有，则令错误为是。
       2. 对 token 使用解析非负整数规则。令宽度为其结果。

       ↪ 若 token 为一个合法非负整数接 U+0068 LATIN SMALL LETTER H 字符

       1. 若高度不为没有，则令错误为是。
       2. 对 token 使用解析非负整数规则。令宽度为其结果。

       ↪ 若 token 为一个合法浮点数接 U+0078 LATIN SMALL LETTER X 字符

       1. 若密度不为没有，则令错误为是。
       2. 对 token 使用解析浮点数值规则。令宽度为其结果。

    7. 若宽度仍为没有，则令其为 Infinity。
    8. 若高度仍为没有，则令其为 Infinity。
    9. 若密度仍为没有，则令其为 1.0。
    10. 若错误仍为否，则将（url，宽度，高度，密度）加入候选。
13. 若 img 元素有 src 属性且其值不是空字符串，则运行这些子步骤：
    1. 令 url 为元素 src 属性的值。
    2. 将（url，Infinity，Infinity，1.0）加入候选。
14. 若候选为空，则返回的 URL 为 null，像素密度为 undefined，并退出这些步骤。
15. 若在候选里的条目 b 跟候选里前面条目 a 有相同的宽度、高度与像素密度，则拿掉条目 b。重复这个步骤直到候选里的条目里没有两个是有相同的宽度、高度与像素密度。
16. 用户代理可以在这里返回候选里任意一个条目的 URL 与像素密度，并退出这些步骤。用户代理可用任意算法或 heuristics 选择条目。
    注：本步骤允许用户代理在合理的情况下不用默认算法（在后续步骤描述）。举例来说，在带宽极度受限的环境下，这个步骤允许用户代理使用目标屏幕较小的图像。本规范奉劝实现不使用这个步骤，以让网页作者能预测选取结果。使用目标视口不同的图像会造成美观上难以接受的结果。
    注：因为下面用来选取图片的像素密度值也是留给用户代理决定的

    Error creating thumbnail: Unable to save thumbnail to destination

    ，要选取比显示设备的像素密度还低的图像不必要用到本步骤。只用在要让用户代理选取目标视口不同的图像的时候才有必要使用步骤。
17. 令最大宽度为视口宽度，最大高度为视口高度。[CSS]
18. 移除候选里宽度小于最大宽度的所有条目，如果这样会移除所有条目，则只移除宽度不是条目中最大宽度的所有条目。
19. 移除候选里高度小于最大高度的所有条目，如果这样会移除所有条目，则只移除高度不是条目中最大高度的所有条目。
20. 移除候选里像素密度小于用户代理定义的值（约略是显示设备的像素密度）的所有条目，如果这样会移除所有条目，则只移除像素密度不是条目中最大像素密度的所有条目。
21. 移除候选里宽度不是条目中最小宽度的所有条目。
22. 移除候选里高度不是条目中最小高度的所有条目。
23. 移除候选里像素密度不是条目中最小像素密度的所有条目。
24. 返回候选最后留下的条目的 URL 与像素密度。