www.w3org tr html5,W3C HTML5标准阅读笔记 - img元素

HTML5中，img标签用于在文档中插入图片元素，并默认呈现inline效果 -- 插入的图片与img标签前后的文本显示在同一行。对于img元素的内容模型(content model)，标准规定其必须为空，也即img标签内不允许出现任何子标签，也不允许出现任何文本内容。

除了通用属性，img标签还包含一些特有属性：src、alt、crossorigin、usemap、ismap、width和height等。

src

所有的img标签都必须拥有src属性，其值为非空URL，用以定义原始图片的地址。如果一个img标签的src属性缺失，则该img标签将没有任何意义 -- 定义一个缺少图片源的图片元素是没有什么意义的。当img标签拥有src属性时，浏览器将试图下载该src属性所设定的图片，并在页面上显示出来。这使得img标签存在4种状态：

不可用(Unavailable)。浏览器未获取任何图片数据。

部分可用(Partially available)。浏览器获取了部分图片数据。

完全可用(Completely available)。浏览器获取了全部的图片数据，且至少能解析出该图片的宽高维度信息。

损坏(Broken)。浏览器已下载了所有可以下载的图片数据，但却依旧无法对图片进行解析以获知其宽高信息。一般来说，“损坏”这一状态有三种情况：图片本身已损坏、网络原因导致无法正常下载到图片、图片可以完整的下载但浏览器无法对其格式进行解析。

当img标签的src属性或crossorigin属性发生改变时，浏览器将同步重新加载图片，并对该img标签的图片显示进行更新。

对于img元素，存在两个概念：

最新图片源(last selected source)。初始值为null，表示最新的源图片地址。

当前像素密度(current pixel density)。初始值为undefined，表示当前显示的真实像素值与CSS像素值之比，这个值最终是由显示设备来决定的。

alt

img标签的alt属性用于定义图片元素的备选显示文本，一般在两种情况下会比较有用：

当图片无法加载显示时，浏览器会在图片所占据的区域显示该alt属性值，从而避免因图片加载失败而影响对页面的访问与理解。

当用户为盲人，无法直接阅读网页时，其所使用的网页语音阅读工具可以借助该alt值来传达图片所表达的意思。

关于在不同环境中，图片的alt值应该怎么写，标准文档进行了详细的描述，也提供了非常多的实例。

crossorigin

crossorigin属性用于定义处理跨域图片访问的方式，其默认值为anonymous；当有需要时，可以将其值设定为use-credentials。

usemap

当文档中存在map元素时，img标签的usemap属性可以用来定义当前图片所使用的地图对象 -- usemap的值需设定为相应map元素的name属性值。

width、height

width属性与height属性用于设定图片元素在页面上显示的宽度和高度。如果width/height属性未定义，在CSS中也未作任何声明，则该img元素显示为其初始宽度/高度 -- img元素的初始宽度为其原始图片的宽度，而其初始高度则为原始图片的高度。

对于DOM中的img对象，其width与height值表示最终图片显示的宽和高(以CSS像素值来表示)，而其naturalWidth与naturalHeight则表示原始图片的宽度和高度。

除了width、height、naturalWidth和naturalHeight，img对象还有一个叫做complete的属性，意为图片加载操作是否已经完成(true/false)。对于src不存在、图片完全可用、图片损坏等情况，img的complete值均为true。