HTML：活文档标准
面向 Web 开发人员版本 — 最后更新于 2024 年 9 月 12 日
面向 Web 开发人员版本 — 最后更新于 2024 年 9 月 12 日
source、img 和 link 元素的通用属性要在 HTML 中嵌入图像，当只有一个图像资源时，请使用 img 元素及其 src 属性。
< h2 > From today's featured article</ h2 >
< img src = "/uploads/100-marie-lloyd.jpg" alt = "" width = "100" height = "150" >
< p >< b >< a href = "/wiki/Marie_Lloyd" > Marie Lloyd</ a ></ b > (1870–1922)
was an English < a href = "/wiki/Music_hall" > music hall</ a > singer, ...但是，在许多情况下，作者可能希望使用用户代理可以从中选择的多个图像资源。
不同的用户可能具有不同的环境特征。
用户的物理屏幕尺寸可能彼此不同。
手机屏幕的对角线可能为 4 英寸，而笔记本电脑屏幕的对角线可能为 14 英寸。
只有当图像的渲染尺寸取决于 视口 大小时，这才是相关的。
用户的屏幕像素密度可能彼此不同。
手机屏幕的每英寸物理像素数量可能是另一部手机屏幕的三倍，无论它们的物理屏幕尺寸如何。
用户的缩放级别可能彼此不同，或者对于单个用户而言，随着时间的推移可能会发生变化。
用户可能会放大特定图像以获得更详细的视图。
缩放级别和屏幕像素密度（前一点）都会影响每个 CSS 像素 的物理屏幕像素数量。此比率通常称为 设备像素比。
用户的屏幕方向可能彼此不同，或者对于单个用户而言，随着时间的推移可能会发生变化。
平板电脑可以竖直放置或旋转 90 度，因此屏幕可以是“纵向”或“横向”。
用户的网络速度、网络延迟和带宽成本可能彼此不同，或者对于单个用户而言，随着时间的推移可能会发生变化。
用户在工作时可能处于快速、低延迟和固定成本的连接中，在家中可能处于缓慢、低延迟和固定成本的连接中，而在其他任何地方都可能处于速度可变、高延迟和可变成本的连接中。
作者可能希望显示相同图像内容，但根据（通常是） 视口 的宽度显示不同的渲染尺寸。这通常称为 基于视口的选择。
网页顶部可能有一个横幅始终跨越整个 视口 宽度。在这种情况下，图像的渲染尺寸取决于屏幕的物理尺寸（假设浏览器窗口最大化）。
另一个网页可能在列中包含图像，对于物理尺寸小的屏幕，有一列，对于物理尺寸中等的屏幕，有两列，对于物理尺寸大的屏幕，有三列，并且图像在每种情况下都以不同的渲染尺寸变化以填充 视口。在这种情况下，与两列布局相比，图像的渲染尺寸在单列布局中可能更大，尽管屏幕更小。
作者可能希望根据图像的渲染尺寸显示不同的图像内容。这通常称为 艺术指导。
当在物理尺寸大的屏幕上查看网页时（假设浏览器窗口最大化），作者可能希望在图像的关键部分周围包含一些不太相关的部分。当在物理尺寸小的屏幕上查看相同的网页时，作者可能希望仅显示图像的关键部分。
作者可能希望显示相同图像内容，但使用不同的图像格式，具体取决于用户代理支持哪些图像格式。这通常称为 基于图像格式的选择。
网页可能包含一些 JPEG、WebP 和 JPEG XR 图像格式的图像，后两种图像格式与 JPEG 相比具有更好的压缩能力。由于不同的用户代理可以支持不同的图像格式，并且某些格式可以提供更好的压缩率，因此作者希望为支持它们的代理提供更好的格式，同时为不支持的代理提供 JPEG 备用方案。
上述情况并非互斥的。例如，将不同资源组合用于不同的 设备像素比 和用于 艺术指导 的不同资源是合理的。
虽然可以使用脚本解决这些问题，但这会引入其他一些问题。
某些用户代理在脚本有机会运行之前，会积极下载 HTML 标记中指定的图像，以便网页更快地完成加载。如果脚本更改要下载的图像，则用户代理可能会启动两个单独的下载，这反而会导致页面加载性能下降。
如果作者避免在 HTML 标记中指定任何图像，而是从脚本实例化单个下载，则可以避免上述双重下载问题，但对于禁用脚本的用户，根本不会下载任何图像，并且积极的图像下载优化也将被禁用。
考虑到这一点，本规范引入了一些功能，以声明性方式解决上述问题。
可以使用 src 和 srcset 属性（使用 x 描述符）在 img 元素上提供多个图像，这些图像仅在尺寸上有所不同（较小的图像是较大图像的缩小版本）。
当图像的渲染尺寸取决于 视口 宽度（基于视口的选择）时，x 描述符不适用，但可以与 艺术指导 一起使用。
< h2 > From today's featured article</ h2 >
< img src = "/uploads/100-marie-lloyd.jpg"
srcset = "/uploads/150-marie-lloyd.jpg 1.5x, /uploads/200-marie-lloyd.jpg 2x"
alt = "" width = "100" height = "150" >
< p >< b >< a href = "/wiki/Marie_Lloyd" > Marie Lloyd</ a ></ b > (1870–1922)
was an English < a href = "/wiki/Music_hall" > music hall</ a > singer, ...用户代理可以根据用户的屏幕像素密度、缩放级别以及可能的其他因素（如用户的网络状况）选择任何给定的资源。
为了与尚不理解 srcset 属性的旧版用户代理向后兼容，其中一个 URL 在 img 元素的 src 属性中指定。这将导致即使在旧版用户代理中也能显示有用的内容（尽管分辨率可能低于用户期望）。对于新的用户代理，src 属性参与资源选择，就像它在 srcset 中使用 1x 描述符指定一样。
可以使用 srcset 和 sizes 属性（使用 w 描述符）提供多个图像，这些图像仅在尺寸上有所不同（较小的图像是较大图像的缩小版本）。
在此示例中，横幅图像占据了整个 视口 宽度（使用适当的 CSS）。
< h1 >< img sizes = "100vw" srcset = "wolf-400.jpg 400w, wolf-800.jpg 800w, wolf-1600.jpg 1600w"
src = "wolf-400.jpg" alt = "The rad wolf" ></ h1 > 用户代理将根据指定的 w 描述符和 sizes 属性中指定的渲染尺寸计算每个图像的有效像素密度。然后，它可以根据用户的屏幕像素密度、缩放级别以及可能的其他因素（如用户的网络状况）选择任何给定的资源。
如果用户的屏幕宽度为 320 CSS 像素，则等效于指定 wolf-400.jpg 1.25x, wolf-800.jpg 2.5x, wolf-1600.jpg 5x。另一方面，如果用户的屏幕宽度为 1200 CSS 像素，则等效于指定 wolf-400.jpg 0.33x, wolf-800.jpg 0.67x, wolf-1600.jpg 1.33x。通过使用 w 描述符和 sizes 属性，用户代理可以根据用户设备的大小选择正确的图像源进行下载。
为了向后兼容，其中一个 URL 在 img 元素的 src 属性中指定。在新版用户代理中，当 srcset 属性使用 w 描述符时，将忽略 src 属性。
在这个示例中，网页根据视口的宽度拥有三种布局。窄布局有一列图像（每张图像的宽度约为 100%），中等布局有两列图像（每张图像的宽度约为 50%），最宽的布局有三列图像和一些页面边距（每张图像的宽度约为 33%）。当视口分别宽 30em 和 50em 时，布局会在这些布局之间切换。
< img sizes = "(max-width: 30em) 100vw, (max-width: 50em) 50vw, calc(33vw - 100px)"
srcset = "swing-200.jpg 200w, swing-400.jpg 400w, swing-800.jpg 800w, swing-1600.jpg 1600w"
src = "swing-400.jpg" alt = "Kettlebell Swing" > sizes 属性在 30em 和 50em 处设置布局断点，并在这些断点之间声明图像大小为 100vw、50vw 或 calc(33vw - 100px)。这些大小不一定要完全与 CSS 中指定的实际图像宽度匹配。
用户代理将从 sizes 属性中选择一个宽度，使用第一个具有求值为真的<media-condition>（括号中的部分）的项目，或者如果所有项目都求值为假，则使用最后一个项目（calc(33vw - 100px)）。
例如，如果视口宽度为 29em，则 (max-width: 30em) 求值为真，并使用 100vw，因此出于资源选择的目的，图像大小为 29em。如果视口宽度改为 32em，则 (max-width: 30em) 求值为假，但 (max-width: 50em) 求值为真，并使用 50vw，因此出于资源选择的目的，图像大小为 16em（视口宽度的一半）。请注意，稍微更宽的视口由于布局不同而导致图像变小。
然后，用户代理可以计算有效像素密度并选择合适的资源，类似于前面的示例。
此示例与前一个示例相同，但图像延迟加载。在这种情况下，sizes 属性可以使用auto 关键字，用户代理将使用width 属性（或 CSS 中指定的宽度）作为源大小。
< img loading = "lazy" width = "200" height = "200" sizes = "auto"
srcset = "swing-200.jpg 200w, swing-400.jpg 400w, swing-800.jpg 800w, swing-1600.jpg 1600w"
src = "swing-400.jpg" alt = "Kettlebell Swing" > 为了与不支持auto 关键字的旧版用户代理更好地向后兼容，可以根据需要指定回退大小。
< img loading = "lazy" width = "200" height = "200"
sizes = "auto, (max-width: 30em) 100vw, (max-width: 50em) 50vw, calc(33vw - 100px)"
srcset = "swing-200.jpg 200w, swing-400.jpg 400w, swing-800.jpg 800w, swing-1600.jpg 1600w"
src = "swing-400.jpg" alt = "Kettlebell Swing" > picture 元素和source 元素，以及media 属性，可用于提供多个图像，这些图像会改变图像内容（例如，较小的图像可能是较大图像的裁剪版本）。
< picture >
< source media = "(min-width: 45em)" srcset = "large.jpg" >
< source media = "(min-width: 32em)" srcset = "med.jpg" >
< img src = "small.jpg" alt = "The wolf runs through the snow." >
</ picture > 用户代理将选择第一个source 元素，其中media 属性中的媒体查询匹配，然后从其srcset 属性中选择合适的 URL。
图像的渲染大小取决于选择的资源。为了指定用户代理在下载图像之前可以使用的尺寸，可以使用 CSS。
img { width : 300 px ; height : 300 px }
@media ( min-width: 32em) { img { width: 500px; height:300px } }
@media (min-width: 45em) { img { width: 700px; height:400px } }type 属性可在source 元素上使用，以提供不同格式的多个图像。
< h2 > From today's featured article</ h2 >
< picture >
< source srcset = "/uploads/100-marie-lloyd.webp" type = "image/webp" >
< source srcset = "/uploads/100-marie-lloyd.jxr" type = "image/vnd.ms-photo" >
< img src = "/uploads/100-marie-lloyd.jpg" alt = "" width = "100" height = "150" >
</ picture >
< p >< b >< a href = "/wiki/Marie_Lloyd" > Marie Lloyd</ a ></ b > (1870–1922)
was an English < a href = "/wiki/Music_hall" > music hall</ a > singer, ...在此示例中，用户代理将选择第一个具有type 属性且具有受支持 MIME 类型的源。如果用户代理支持 WebP 图像，则将选择第一个source 元素。如果没有，但用户代理支持 JPEG XR 图像，则将选择第二个source 元素。如果这两种格式都不受支持，则将选择img 元素。
CSS 和媒体查询可用于构建图形页面布局，这些布局会根据用户的环境动态调整，特别是针对不同的视口尺寸和像素密度。但是，对于内容，CSS 无法提供帮助；相反，我们有img 元素的srcset 属性和picture 元素。本节将逐步介绍一个示例案例，展示如何使用这些功能。
假设在宽屏（宽于 600CSS 像素）上，要使用名为 a-rectangle.png 的 300×150 图像，但在较小的屏幕（600CSS 像素 或更少）上，要使用名为 a-square.png 的较小的 100×100 图像。此标记如下所示
< figure >
< picture >
< source srcset = "a-square.png" media = "(max-width: 600px)" >
< img src = "a-rectangle.png" alt = "Barney Frank wears a suit and glasses." >
</ picture >
< figcaption > Barney Frank, 2011</ figcaption >
</ figure > 有关在alt 属性中放置什么的详细信息，请参阅提供文本作为图像替代的必要条件部分。
这样做的问题是，用户代理在图像加载时不一定知道要使用什么尺寸。为了避免布局在页面加载时多次重新调整，可以使用 CSS 和 CSS 媒体查询来提供尺寸
< style >
# a { width : 300 px ; height : 150 px ; }
@ media ( max-width : 600px ) { # a { width : 100 px ; height : 100 px ; } }
</ style >
< figure >
< picture >
< source srcset = "a-square.png" media = "(max-width: 600px)" >
< img src = "a-rectangle.png" alt = "Barney Frank wears a suit and glasses." id = "a" >
</ picture >
< figcaption > Barney Frank, 2011</ figcaption >
</ figure > 或者，可以使用width 和height 属性为旧版用户代理提供宽度和高度，仅对支持picture 的用户代理使用 CSS
< style media = "(max-width: 600px)" >
# a { width : 100 px ; height : 100 px ; }
</ style >
< figure >
< picture >
< source srcset = "a-square.png" media = "(max-width: 600px)" >
< img src = "a-rectangle.png" width = "300" height = "150"
alt = "Barney Frank wears a suit and glasses." id = "a" >
</ picture >
< figcaption > Barney Frank, 2011</ figcaption >
</ figure > img 元素与src 属性一起使用，该属性提供要用于不支持picture 元素的旧版用户代理的图像 URL。这导致了一个问题，即在src 属性中提供哪个图像。
如果作者希望在旧版用户代理中使用最大的图像，则标记可以如下所示
< picture >
< source srcset = "pear-mobile.jpeg" media = "(max-width: 720px)" >
< source srcset = "pear-tablet.jpeg" media = "(max-width: 1280px)" >
< img src = "pear-desktop.jpeg" alt = "The pear is juicy." >
</ picture > 但是，如果旧版移动用户代理更重要，则可以在source 元素中列出所有三个图像，完全覆盖src 属性。
< picture >
< source srcset = "pear-mobile.jpeg" media = "(max-width: 720px)" >
< source srcset = "pear-tablet.jpeg" media = "(max-width: 1280px)" >
< source srcset = "pear-desktop.jpeg" >
< img src = "pear-mobile.jpeg" alt = "The pear is juicy." >
</ picture > 由于此时src 属性实际上被支持picture 的用户代理完全忽略，因此src 属性可以默认为任何图像，包括既不是最小也不是最大的图像
< picture >
< source srcset = "pear-mobile.jpeg" media = "(max-width: 720px)" >
< source srcset = "pear-tablet.jpeg" media = "(max-width: 1280px)" >
< source srcset = "pear-desktop.jpeg" >
< img src = "pear-tablet.jpeg" alt = "The pear is juicy." >
</ picture > 在上面使用了 max-width 媒体功能，它给出了图像的预期最大(视口) 尺寸。也可以使用 min-width 代替。
< picture >
< source srcset = "pear-desktop.jpeg" media = "(min-width: 1281px)" >
< source srcset = "pear-tablet.jpeg" media = "(min-width: 721px)" >
< img src = "pear-mobile.jpeg" alt = "The pear is juicy." >
</ picture > source、img 和link 元素的通用属性srcset 属性 是一个具有本节中定义的要求的属性。
如果存在，其值必须由一个或多个图像候选字符串组成，每个字符串之间用 U+002C 逗号字符 (,) 分隔。如果图像候选字符串不包含描述符并且在 URL 后没有ASCII 空格，则如果存在，下一个图像候选字符串必须以一个或多个ASCII 空格开头。
图像候选字符串 由以下组件按顺序组成，并受下面此列表中描述的其他限制
零个或多个ASCII 空格。
一个有效的非空 URL，该 URL 既不以 U+002C 逗号字符 (,) 开头也不以其结尾，引用非交互式、可选动画的图像资源，该资源既不是分页的也不是脚本化的。
零个或多个ASCII 空格。
零个或一个以下内容
零个或多个ASCII 空格。
对于具有与另一个图像候选字符串的宽度描述符值相同的宽度描述符值的元素，不得有图像候选字符串。
对于具有与另一个图像候选字符串的像素密度描述符值相同的像素密度描述符值的元素，不得有图像候选字符串。出于此要求的目的，没有描述符的图像候选字符串等效于具有 1x 描述符的图像候选字符串。
如果元素的图片候选字符串指定了宽度描述符，则该元素的所有其他图片候选字符串也必须指定宽度描述符。
在图片候选字符串的宽度描述符中指定的宽度必须与图片候选字符串的URL给出的资源中的自然宽度匹配，如果它有自然宽度。
如果元素存在sizes 属性，则该元素的所有图片候选字符串都必须指定宽度描述符。
一个sizes 属性是一个具有在本节中定义的要求的属性。
如果存在，则其值必须是有效的源尺寸列表。
一个有效的源尺寸列表是一个与以下语法匹配的字符串：[CSSVALUES] [MQ]
< source-size-list > = < source-size > #? , < source-size-value >
< source-size > = < media-condition > < source-size-value > | auto
< source-size-value > = < length > | auto一个作为<length>的<source-size-value>不能为负数，并且不能使用除数学函数之外的CSS函数。
关键字auto是在解析 sizes 属性中计算出的宽度。如果存在，它必须是第一个条目，并且整个<source-size-list>值必须是字符串“auto”（ASCII 不区分大小写）或以字符串“auto,”（ASCII 不区分大小写）开头。
如果启动图像加载（使用更新图像数据或对环境变化做出反应算法）的img元素允许自动尺寸并且正在渲染，则auto是具体对象尺寸宽度。否则，将忽略auto值，并使用下一个源尺寸，如果有的话。
如果满足以下条件，则可以在source元素的sizes属性和img元素的sizes属性中指定auto关键字。否则，不能指定auto。
此外，强烈建议使用width和height属性或CSS来指定尺寸。如果没有指定尺寸，图像可能会以300x150尺寸呈现，因为sizes="auto"在渲染部分中意味着contain-intrinsic-size: 300px 150px。
<source-size-value>给出图像的预期布局宽度。作者可以使用<media-condition>为不同的环境指定不同的宽度。
在<source-size-value>中不允许使用百分比，以避免对其相对于什么的混淆。'vw'单位可用于相对于视口宽度的尺寸。
除非另有说明，否则必须指定alt属性，并且其值不能为空；该值必须是图像的适当替代。 alt属性的具体要求取决于图像的预期表示内容，如下节所述。
编写替代文本时要考虑的最通用的规则如下：目的是用其alt属性的文本替换每个图像不会改变页面的含义。
因此，一般来说，可以通过考虑如果无法包含图像将写什么来编写替代文本。
alt属性的值永远不应包含可被视为图像的标题、标题或图例的文本。它应该包含用户可以代替图像使用的替换文本；它不旨在补充图像。title属性可用于补充信息。
另一个推论是，alt属性的值不应重复图像旁边散文部分中已提供的信息。
考虑替代文本的一种方法是考虑如何通过电话向某人朗读包含图像的页面，而无需提及存在图像。您代替图像所说的任何内容通常都是编写替代文本的良好开端。
当创建超链接的a元素或button元素没有任何文本内容，但包含一个或多个图像时，alt属性必须包含共同传达链接或按钮目的的文本。
在此示例中，用户被要求从三个颜色列表中选择他们喜欢的颜色。每种颜色都由一个图像给出，但对于已将其用户代理配置为不显示图像的用户，则改为使用颜色名称。
< h1 > Pick your color</ h1 >
< ul >
< li >< a href = "green.html" > < img src = "green.jpeg" alt = "Green" > </ a ></ li >
< li >< a href = "blue.html" > < img src = "blue.jpeg" alt = "Blue" > </ a ></ li >
< li >< a href = "red.html" > < img src = "red.jpeg" alt = "Red" > </ a ></ li >
</ ul > 在此示例中，每个按钮都有一组图像来指示用户所需的输出颜色类型。在每种情况下，第一个图像都用于提供替代文本。
< button name = "rgb" > < img src = "red" alt = "RGB" >< img src = "green" alt = "" >< img src = "blue" alt = "" > </ button >
< button name = "cmyk" > < img src = "cyan" alt = "CMYK" >< img src = "magenta" alt = "" >< img src = "yellow" alt = "" >< img src = "black" alt = "" > </ button > 由于每个图像都表示文本的一部分，因此也可以这样编写。
< button name = "rgb" > < img src = "red" alt = "R" >< img src = "green" alt = "G" >< img src = "blue" alt = "B" > </ button >
< button name = "cmyk" > < img src = "cyan" alt = "C" >< img src = "magenta" alt = "M" >< img src = "yellow" alt = "Y" >< img src = "black" alt = "K" > </ button > 但是，对于其他替代文本，这可能不起作用，并且在每种情况下将所有替代文本都放入一个图像中可能更有意义。
< button name = "rgb" > < img src = "red" alt = "sRGB profile" >< img src = "green" alt = "" >< img src = "blue" alt = "" > </ button >
< button name = "cmyk" > < img src = "cyan" alt = "CMYK profile" >< img src = "magenta" alt = "" >< img src = "yellow" alt = "" >< img src = "black" alt = "" > </ button > 有时某些内容可以用图形形式更清晰地表达，例如流程图、示意图、图形或显示方向的简单地图。在这种情况下，可以使用img元素给出图像，但仍然必须给出较少的文本版本，以便无法查看图像的用户（例如，因为他们的连接速度非常慢，或者因为他们使用的是纯文本浏览器，或者因为他们正在收听免提汽车语音网络浏览器朗读的页面，或者仅仅因为他们是盲人）仍然能够理解传达的信息。
文本必须在alt属性中给出，并且必须传达与src属性中指定的图像相同的信息。
重要的是要意识到替代文本是图像的替换，而不是图像的描述。
在以下示例中，我们有一个流程图以图像形式呈现，alt属性中的文本以散文形式重新表述了流程图。
< p > In the common case, the data handled by the tokenization stage
comes from the network, but it can also come from script.</ p >
< p > < img src = "images/parsing-model-overview.svg" alt = "The Network
passes data to the Input Stream Preprocessor, which passes it to the
Tokenizer, which passes it to the Tree Construction stage. From there,
data goes to both the DOM and to Script Execution. Script Execution is
linked to the DOM, and, using document.write(), passes data to the
Tokenizer." > </ p > 这是另一个示例，显示了包含图像描述时的好解决方案和坏解决方案。
首先，这是好的解决方案。此示例显示了替代文本应该是什么，如果图像从未存在，您将在散文中输入的内容。
<!-- This is the correct way to do things. -->
< p >
You are standing in an open field west of a house.
< img src = "house.jpeg" alt = "The house is white, with a boarded front door." >
There is a small mailbox here.
</ p > 其次，这是坏的解决方案。在这种不正确的做法中，替代文本只是图像的描述，而不是图像的文本替换。它很糟糕，因为当图像未显示时，文本的流畅性不如第一个示例。
<!-- This is the wrong way to do things. -->
< p >
You are standing in an open field west of a house.
< img src = "house.jpeg" alt = "A white house, with a boarded front door." >
There is a small mailbox here.
</ p > 诸如“带木板门的白色房屋的照片”之类的文本将是同样糟糕的替代文本（尽管它可能适合title属性或在具有此图像的figure的figcaption元素中）。
文档可以包含以图标形式的信息。图标旨在帮助使用可视化浏览器的用户一眼识别功能。
在某些情况下，图标是对传达相同含义的文本标签的补充。在这些情况下，alt 属性必须存在，但必须为空。
这里图标位于传达相同含义的文本旁边，因此它们具有空的 alt 属性
< nav >
< p >< a href = "/help/" > < img src = "/icons/help.png" alt = "" > Help</ a ></ p >
< p >< a href = "/configure/" > < img src = "/icons/configuration.png" alt = "" >
Configuration Tools</ a ></ p >
</ nav > 在其他情况下，图标旁边没有文本描述其含义；图标应该不言自明。在这些情况下，必须在 alt 属性中提供等效的文本标签。
这里，新闻网站上的帖子用一个表示其主题的图标进行标记。
< body >
< article >
< header >
< h1 > Ratatouille wins < i > Best Movie of the Year</ i > award</ h1 >
< p > < img src = "movies.png" alt = "Movies" > </ p >
</ header >
< p > Pixar has won yet another < i > Best Movie of the Year</ i > award,
making this its 8th win in the last 12 years.</ p >
</ article >
< article >
< header >
< h1 > Latest TWiT episode is online</ h1 >
< p > < img src = "podcasts.png" alt = "Podcasts" > </ p >
</ header >
< p > The latest TWiT episode has been posted, in which we hear
several tech news stories as well as learning much more about the
iPhone. This week, the panelists compare how reflective their
iPhones' Apple logos are.</ p >
</ article >
</ body > 许多页面包含徽标、标识、旗帜或徽章，它们代表特定的实体，例如公司、组织、项目、乐队、软件包、国家或类似的东西。
如果徽标用于代表实体，例如作为页面标题，则 alt 属性必须包含徽标所代表的实体的名称。 alt 属性 不能 包含诸如“徽标”之类的文本，因为传达的不是它是徽标的事实，而是实体本身。
如果徽标用在其所代表的实体名称旁边，则徽标是补充性的，其 alt 属性必须为空。
如果徽标仅用作装饰性材料（作为品牌或例如文章中提及徽标所属实体的侧边图像），则适用下面关于纯装饰性图像的条目。如果徽标实际上正在讨论，则它被用作具有替代图形表示（徽标本身）的短语或段落（徽标的描述），并且适用上述第一个条目。
在以下代码片段中，存在上述所有四种情况。首先，我们看到一个用于代表公司的徽标
< h1 > < img src = "XYZ.gif" alt = "The XYZ company" > </ h1 > 接下来，我们看到一段文字，它在公司名称旁边使用了徽标，因此没有任何替代文本
< article >
< h2 > News</ h2 >
< p > We have recently been looking at buying the < img src = "alpha.gif"
alt = "" > ΑΒΓ company, a small Greek company
specializing in our type of product.</ p > 在这个第三个代码片段中，我们在旁注中使用了一个徽标，作为讨论收购的较大文章的一部分
< aside >< p >< img src = "alpha-large.gif" alt = "" ></ p ></ aside >
< p > The ΑΒΓ company has had a good quarter, and our
pie chart studies of their accounts suggest a much bigger blue slice
than its green and orange slices, which is always a good sign.</ p >
</ article > 最后，我们有一篇评论文章讨论了一个徽标，因此徽标在替代文本中得到了详细描述。
< p > Consider for a moment their logo:</ p >
< p >< img src = "/images/logo" alt = "It consists of a green circle with a
green question mark centered inside it." ></ p >
< p > How unoriginal can you get? I mean, oooooh, a question mark, how
< em > revolutionary</ em > , how utterly < em > ground-breaking</ em > , I'm
sure everyone will rush to adopt those specifications now! They could
at least have tried for some sort of, I don't know, sequence of
rounded squares with varying shades of green and bold white outlines,
at least that would look good on the cover of a blue book.</ p > 此示例显示了如何编写替代文本，以便如果图像不可用并且使用文本代替，则文本将无缝地融入周围文本中，就好像图像从未存在过一样。
有时，图像仅由文本组成，并且图像的目的不是突出显示用于渲染文本的实际版式效果，而只是传达文本本身。
在这种情况下，alt 属性必须存在，但必须与图像本身中编写的文本相同。
考虑一个包含“地球日”文本的图形，但所有字母都用花卉和植物装饰。如果文本仅用作标题，以美化图形用户的页面，则正确的替代文本只是相同的文本“地球日”，无需提及装饰
< h1 > < img src = "earthdayheading.png" alt = "Earth Day" > </ h1 > 手抄本可能会为某些图像使用图形。在这种情况下，替代文本只是图像所代表的字符。
< p >< img src = "initials/o.svg" alt = "O" > nce upon a time and a long long time ago, late at
night, when it was dark, over the hills, through the woods, across a great ocean, in a land far
away, in a small house, on a hill, under a full moon...当图像用于表示 Unicode 中无法以其他方式表示的字符时，例如外字、异体字或新的字符，例如新颖的货币符号，替代文本应该是以更常规的方式编写相同的内容，例如使用日语假名或片假名给出字符的发音。
在此 1997 年的示例中，一个新奇的货币符号（看起来像一个带两个横杠而不是一个横杠的卷曲 E）使用图像表示。替代文本给出了字符的发音。
< p > Only < img src = "euro.png" alt = "euro " > 5.99!如果字符可以达到相同目的，则不应使用图像。只有当文本无法直接使用文本表示时，例如由于装饰或没有合适的字符（例如外字），图像才合适。
如果作者想使用图像，因为他们的默认系统字体不支持给定字符，那么网络字体比图像更好的解决方案。
在许多情况下，图像实际上只是补充性的，它的存在仅仅强化了周围的文本。在这些情况下，alt 属性必须存在，但其值必须为空字符串。
通常，如果删除图像不会使页面变得不那么有用，但包含图像会使可视化浏览器用户更容易理解概念，则图像属于此类别。
以图形形式重复上一段的流程图
< p > The Network passes data to the Input Stream Preprocessor, which
passes it to the Tokenizer, which passes it to the Tree Construction
stage. From there, data goes to both the DOM and to Script Execution.
Script Execution is linked to the DOM, and, using document.write(),
passes data to the Tokenizer.</ p >
< p >< img src = "images/parsing-model-overview.svg" alt = "" ></ p > 在这些情况下，包含仅由标题组成的替代文本将是错误的。如果要包含标题，则可以使用 title 属性，或者可以使用 figure 和 figcaption 元素。在后一种情况下，图像实际上将是一个具有替代图形表示的短语或段落，因此需要替代文本。
<!-- Using the title="" attribute -->
< p > The Network passes data to the Input Stream Preprocessor, which
passes it to the Tokenizer, which passes it to the Tree Construction
stage. From there, data goes to both the DOM and to Script Execution.
Script Execution is linked to the DOM, and, using document.write(),
passes data to the Tokenizer.</ p >
< p > < img src = "images/parsing-model-overview.svg" alt = ""
title = "Flowchart representation of the parsing model." > </ p > <!-- Using <figure> and <figcaption> -->
< p > The Network passes data to the Input Stream Preprocessor, which
passes it to the Tokenizer, which passes it to the Tree Construction
stage. From there, data goes to both the DOM and to Script Execution.
Script Execution is linked to the DOM, and, using document.write(),
passes data to the Tokenizer.</ p >
< figure >
< img src = "images/parsing-model-overview.svg" alt = "The Network leads to
the Input Stream Preprocessor, which leads to the Tokenizer, which
leads to the Tree Construction stage. The Tree Construction stage
leads to two items. The first is Script Execution, which leads via
document.write() back to the Tokenizer. The second item from which
Tree Construction leads is the DOM. The DOM is related to the Script
Execution." >
< figcaption > Flowchart representation of the parsing model.</ figcaption >
</ figure > <!-- This is WRONG. Do not do this. Instead, do what the above examples do. -->
< p > The Network passes data to the Input Stream Preprocessor, which
passes it to the Tokenizer, which passes it to the Tree Construction
stage. From there, data goes to both the DOM and to Script Execution.
Script Execution is linked to the DOM, and, using document.write(),
passes data to the Tokenizer.</ p >
< p >< img src = "images/parsing-model-overview.svg"
alt = "Flowchart representation of the parsing model." ></ p >
<!-- Never put the image's caption in the alt="" attribute! --> 以图形形式重复上一段的图表
< p > According to a study covering several billion pages,
about 62% of documents on the web in 2007 triggered the Quirks
rendering mode of web browsers, about 30% triggered the Almost
Standards mode, and about 9% triggered the Standards mode.</ p >
< p >< img src = "rendering-mode-pie-chart.png" alt = "" ></ p > 有时，图像对于内容不是至关重要的，但它既不是纯粹的装饰性的，也不是与文本完全冗余的。在这些情况下，alt 属性必须存在，其值应为空字符串或图像传达的信息的文本表示。如果图像具有给出图像标题的标题，则 alt 属性的值不能为空（因为这对于非视觉读者来说会非常令人困惑）。
考虑一篇关于政治人物的新闻文章，其中该人的脸在图像中显示。图像并非纯粹的装饰性，因为它与故事相关。图像也不是与故事完全冗余的，因为它显示了政治家的样子。是否需要提供任何替代文本是作者的决定，取决于图像是否会影响散文理解。
在此第一个变体中，图像在没有上下文的情况下显示，并且没有提供替代文本
< p > < img src = "president.jpeg" alt = "" > Ahead of today's referendum,
the President wrote an open letter to all registered voters. In it, she admitted that the country was
divided.</ p > 如果图片只是一张脸，那么描述它可能没有价值。读者是否关心该人是否有红头发或金发，是否有白皮肤或黑皮肤，是否有两只眼睛或一只眼睛都没有兴趣。
但是，如果图片更具动态性，例如显示政治家生气、特别高兴或心烦意乱，一些替代文本将有助于设定文章的基调，否则可能会错过这种基调
< p > < img src = "president.jpeg" alt = "The President is sad." >
Ahead of today's referendum, the President wrote an open letter to all
registered voters. In it, she admitted that the country was divided.
</ p > < p > < img src = "president.jpeg" alt = "The President is happy!" >
Ahead of today's referendum, the President wrote an open letter to all
registered voters. In it, she admitted that the country was divided.
</ p > 该人是否“悲伤”或“快乐”会影响其余段落的解释方式：她是否可能说她对国家分裂感到不满，或者她是否说国家分裂的前景对她的政治生涯有利？解释根据图像而有所不同。
如果图像有标题，则包含替代文本可以避免非视觉用户对标题指的是什么感到困惑。
< p > Ahead of today's referendum, the President wrote an open letter to
all registered voters. In it, she admitted that the country was divided.</ p >
< figure >
< img src = "president.jpeg"
alt = "A high forehead, cheerful disposition, and dark hair round out the President's face." >
< figcaption > The President of Ruritania. Photo © 2014 PolitiPhoto. </ figcaption >
</ figure > 如果图像具有装饰性但不是特定于页面的——例如构成站点范围设计方案一部分的图像——则应在站点的 CSS 中指定图像，而不是在文档的标记中。
但是，一个没有被周围文本讨论但仍然具有一定相关性的装饰性图像可以使用 img 元素包含在页面中。此类图像具有装饰性，但仍然构成内容的一部分。在这些情况下，alt 属性必须存在，但其值必须为空字符串。
图像尽管相关但纯粹是装饰性的示例包括：在关于火人节活动的文章中拍摄的黑岩城景观照片，或在朗读该诗歌的页面上，一幅受诗歌启发的绘画图像。以下代码片段显示了后一种情况的示例（此代码片段中仅包含第一节）
< h1 > The Lady of Shalott</ h1 >
< p >< img src = "shalott.jpeg" alt = "" ></ p >
< p > On either side the river lie< br >
Long fields of barley and of rye,< br >
That clothe the wold and meet the sky;< br >
And through the field the road run by< br >
To many-tower'd Camelot;< br >
And up and down the people go,< br >
Gazing where the lilies blow< br >
Round an island there below,< br >
The island of Shalott.</ p > 当图片已被切分成较小的图像文件，然后一起显示以再次形成完整的图片时，其中一个图像必须将其 alt 属性设置为适合整个图片的相关规则，然后所有其余图像必须将其 alt 属性设置为空字符串。
在以下示例中，代表 XYZ Corp 公司徽标的图片已分成两部分，第一部分包含字母“XYZ”，第二部分包含单词“Corp”。替代文本（“XYZ Corp”）全部位于第一张图像中。
< h1 > < img src = "logo1.png" alt = "XYZ Corp" >< img src = "logo2.png" alt = "" > </ h1 > 在以下示例中，评分显示为三个实心星和两个空心星。虽然替代文本可以是“★★★☆☆”，但作者已决定更有效地以“5 分中的 3 分”的形式给出评分。那是第一张图像的替代文本，其余的替代文本为空。
< p > Rating: < meter max = 5 value = 3 > < img src = "1" alt = "3 out of 5"
>< img src = "1" alt = "" >< img src = "1" alt = "" >< img src = "0" alt = ""
>< img src = "0" alt = "" > </ meter ></ p > 通常，应使用 图像地图 而不是切分图像以创建链接。
但是，如果图像确实被切片，并且切片图像的任何组件都是链接的唯一内容，则每个链接必须在一个图像的 alt 属性中包含替代文本，以表示链接的目的。
在下面的示例中，一张图片代表飞天意面怪物的标志，其中左侧的意面状附肢和右侧的意面状附肢位于不同的图像中，以便用户可以在冒险中选择左侧或右侧。
< h1 > The Church</ h1 >
< p > You come across a flying spaghetti monster. Which side of His
Noodliness do you wish to reach out for?</ p >
< p >< a href = "?go=left" >< img src = "fsm-left.png" alt = "Left side. " ></ a
>< img src = "fsm-middle.png" alt = ""
>< a href = "?go=right" >< img src = "fsm-right.png" alt = "Right side." ></ a ></ p > 在某些情况下，图像的内容至关重要。例如，在照片库的一部分页面上，情况可能就是这样。图像就是包含它的页面的全部 重点。
如何为作为内容关键部分的图像提供替代文本取决于图像的来源。
当可以提供详细的替代文本时，例如，如果图像是一系列杂志评论中的屏幕截图的一部分，或者漫画的一部分，或者是在关于该照片的博客文章中的照片，则必须将可以用作图像替代的文本作为 alt 属性的内容。
新操作系统的屏幕截图库中的一个屏幕截图，带有某些替代文本
< figure >
< img src = "KDE%20Light%20desktop.png"
alt = "The desktop is blue, with icons along the left hand side in
two columns, reading System, Home, K-Mail, etc. A window is
open showing that menus wrap to a second line if they
cannot fit in the window. The window has a list of icons
along the top, with an address bar below it, a list of
icons for tabs along the left edge, a status bar on the
bottom, and two panes in the middle. The desktop has a bar
at the bottom of the screen with a few buttons, a pager, a
list of open applications, and a clock." >
< figcaption > Screenshot of a KDE desktop.</ figcaption >
</ figure > 财务报告中的图表
< img src = "sales.gif"
title = "Sales graph"
alt = "From 1998 to 2005, sales increased by the following percentages
with each year: 624%, 75%, 138%, 40%, 35%, 9%, 21%" > 请注意，“销售图表”对于销售图表来说是不够的替代文本。通常不适合用作替换文本的文本是良好的 标题。
在某些情况下，图像的性质可能使得提供完整的替代文本不切实际。例如，图像可能模糊不清，或者可能是复杂的碎形，或者可能是详细的拓扑图。
在这些情况下，alt 属性必须包含一些合适的替代文本，但它可能比较简短。
有时根本没有文本可以完美地描述图像。例如，对于罗夏墨迹测试，几乎没有什么可以说的。但是，即使简短的描述也比没有好。
< figure >
< img src = "/commons/a/a7/Rorschach1.jpg" alt = "A shape with left-right
symmetry with indistinct edges, with a small gap in the center, two
larger gaps offset slightly from the center, with two similar gaps
under them. The outline is wider in the top half than the bottom
half, with the sides extending upwards higher than the center, and
the center extending below the sides." >
< figcaption > A black outline of the first of the ten cards
in the Rorschach inkblot test.</ figcaption >
</ figure > 请注意，以下将是非常糟糕的替代文本用法
<!-- This example is wrong. Do not copy it. -->
< figure >
< img src = "/commons/a/a7/Rorschach1.jpg" alt = "A black outline
of the first of the ten cards in the Rorschach inkblot test." >
< figcaption > A black outline of the first of the ten cards
in the Rorschach inkblot test.</ figcaption >
</ figure > 像这样在替代文本中包含标题没有用，因为它实际上为无法显示图像的用户重复了标题，两次取笑他们，但并没有比他们只阅读或听到标题一次更有帮助。
另一个无法完全描述的图像示例是碎形，根据定义，碎形的细节是无限的。
以下示例显示了一种为曼德勃罗集图像的全视图提供替代文本的可能方法。
< img src = "ms1.jpeg" alt = "The Mandelbrot set appears as a cardioid with
its cusp on the real axis in the positive direction, with a smaller
bulb aligned along the same center line, touching it in the negative
direction, and with these two shapes being surrounded by smaller bulbs
of various sizes." > 类似地，例如在传记中，一个人的面部照片可以被认为与内容非常相关且关键，但很难完全用文本替代
< section class = "bio" >
< h1 > A Biography of Isaac Asimov</ h1 >
< p > Born < b > Isaak Yudovich Ozimov</ b > in 1920, Isaac was a prolific author.</ p >
< p >< img src = "headpics/asimov.jpeg" alt = "Isaac Asimov had dark hair, a tall forehead, and wore glasses.
Later in life, he wore long white sideburns." ></ p >
< p > Asimov was born in Russia, and moved to the US when he was three years old.</ p >
< p > ...</ p >
</ section > 在这种情况下，没有必要（实际上也不鼓励）在替代文本中包含对图像本身存在的引用，因为此类文本与浏览器本身报告图像的存在是冗余的。例如，如果替代文本是“艾萨克·阿西莫夫的照片”，那么符合标准的用户代理可能会将其读作“（图像）艾萨克·阿西莫夫的照片”，而不是更有用的“（图像）艾萨克·阿西莫夫有着黑色的头发，高高的额头，戴着眼镜……”。
在某些不幸的情况下，可能根本没有可用的替代文本，这可能是因为图像以某种自动化方式获得，没有任何关联的替代文本（例如，网络摄像头），或者因为页面是由使用用户提供的图像的脚本生成的，而用户没有提供合适的或可用的替代文本（例如，照片分享网站），或者因为作者本人不知道图像代表什么（例如，盲人摄影师在他们的博客上分享图像）。
在这种情况下，可以省略 alt 属性，但还必须满足以下条件之一
img 元素位于包含 figcaption 元素的 figure 元素中，该元素包含除 元素间空白 之外的内容，并且，忽略 figcaption 元素及其后代，figure 元素没有 流内容 后代，除了 元素间空白 和 img 元素。
title 属性存在且具有非空值。
目前不鼓励依赖 title 属性，因为许多用户代理没有以本规范要求的可访问方式公开该属性（例如，需要指向设备（如鼠标）才能使工具提示出现，这排除了仅使用键盘的用户和仅使用触摸的用户，例如任何拥有现代手机或平板电脑的用户）。
此类情况必须降至最低。如果作者即使有一点点可能能够提供真实的替代文本，那么省略 alt 属性将不可接受。
照片分享网站上的照片，如果网站接收到的图像除了标题之外没有其他元数据，可以按如下方式标记
< figure >
< img src = "1100670787_6a7c664aef.jpg" >
< figcaption > Bubbles traveled everywhere with us.</ figcaption >
</ figure > 但是，如果从用户那里获取并包含在页面上的图像重要部分的详细描述会更好。
盲人用户的博客，其中显示了用户拍摄的照片。最初，用户可能不知道他们拍摄的照片显示了什么
< article >
< h1 > I took a photo</ h1 >
< p > I went out today and took a photo!</ p >
< figure >
< img src = "photo2.jpeg" >
< figcaption > A photograph taken blindly from my front porch.</ figcaption >
</ figure >
</ article > 然而，最终，用户可能会从朋友那里获得图像的描述，然后可以包含替代文本
< article >
< h1 > I took a photo</ h1 >
< p > I went out today and took a photo!</ p >
< figure >
< img src = "photo2.jpeg" alt = "The photograph shows my squirrel
feeder hanging from the edge of my roof. It is half full, but there
are no squirrels around. In the background, out-of-focus trees fill the
shot. The feeder is made of wood with a metal grate, and it contains
peanuts. The edge of the roof is wooden too, and is painted white
with light blue streaks." >
< figcaption > A photograph taken blindly from my front porch.</ figcaption >
</ figure >
</ article > 有时图像的全部意义在于没有可用的文本描述，并且用户需要提供描述。例如，验证码图像的目的是查看用户是否可以真正读取图形。以下是一种标记验证码的方法（请注意 title 属性）
< p >< label > What does this image say?
< img src = "captcha.cgi?id=8934" title = "CAPTCHA" >
< input type = text name = captcha ></ label >
(If you cannot see the image, you can use an < a
href = "?audio" > audio</ a > test instead.)</ p > 另一个示例是显示图像并请求替代文本的软件，其目的正是为了然后编写包含正确替代文本的页面。这样的页面可以有一个图像表，如下所示
< table >
< thead >
< tr > < th > Image < th > Description
< tbody >
< tr >
< td > < img src = "2421.png" title = "Image 640 by 100, filename 'banner.gif'" >
< td > < input name = "alt2421" >
< tr >
< td > < img src = "2422.png" title = "Image 200 by 480, filename 'ad3.gif'" >
< td > < input name = "alt2422" >
</ table > 请注意，即使在此示例中，尽可能多的有用信息仍包含在 title 属性中。
由于某些用户根本无法使用图像（例如，因为他们的连接速度非常慢，或者因为他们使用的是纯文本浏览器，或者因为他们正在收听汽车免提语音网络浏览器读取的页面，或者仅仅是因为他们看不见），因此仅当没有可用的替代文本且无法提供任何替代文本时（如上述示例中），才允许省略 alt 属性，而不是使用替换文本。作者缺乏努力不是省略 alt 属性的可接受理由。
通常，作者应避免将 img 元素用于显示图像以外的目的。
如果 img 元素用于显示图像以外的目的，例如作为统计页面浏览量的服务的一部分，则 alt 属性必须为空字符串。
在这种情况下，width 和 height 属性都应设置为零。
本节不适用于公开可访问的文档，或目标受众不一定是作者个人认识的文档，例如网站上的文档、发送到公共邮件列表的电子邮件或软件文档。
当图像包含在针对能够查看图像的特定人员的私人通信（例如 HTML 电子邮件）中时，可以省略 alt 属性。但是，即使在这种情况下，也强烈建议作者包含替代文本（根据所涉及图像的类型，如上述条目中所述），以便在用户使用不支持图像的邮件客户端或文档转发给其他用户时，电子邮件仍然可用，而这些用户的功能可能不包括轻松查看图像。