W3C HTML5标准阅读笔记 - img元素

标准原文:https://www.w3.org/TR/html5/embedded-content-0.html#the-img-element

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种状态:

  1. 不可用(Unavailable)。浏览器未获取任何图片数据。
  2. 部分可用(Partially available)。浏览器获取了部分图片数据。
  3. 完全可用(Completely available)。浏览器获取了全部的图片数据,且至少能解析出该图片的宽高维度信息。
  4. 损坏(Broken)。浏览器已下载了所有可以下载的图片数据,但却依旧无法对图片进行解析以获知其宽高信息。一般来说,“损坏”这一状态有三种情况:图片本身已损坏、网络原因导致无法正常下载到图片、图片可以完整的下载但浏览器无法对其格式进行解析。

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

对于img元素,存在两个概念:

  • 最新图片源(last selected source)。初始值为null,表示最新的源图片地址。
  • 当前像素密度(current pixel density)。初始值为undefined,表示当前显示的真实像素值与CSS像素值之比,这个值最终是由显示设备来决定的。

alt

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

  1. 当图片无法加载显示时,浏览器会在图片所占据的区域显示该alt属性值,从而避免因图片加载失败而影响对页面的访问与理解。
  2. 当用户为盲人,无法直接阅读网页时,其所使用的网页语音阅读工具可以借助该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。

Chuan Shao

Read more posts by this author.

Shanghai

Subscribe to Chuan's blog

Get the latest posts delivered right to your inbox.

or subscribe via RSS with Feedly!