html5 图像标签

HTML网页中任何元素的实现都要依靠HTML标签，要想在网页中显示图像就需要使用图像标签。

1、<img>：图像嵌入

HTML <img> 元素将一份图像嵌入文档。src属性用于指定图像文件的路径和文件名，是<img>标签的必需属性。

alt 属性包含一条对图像的文本描述，这不是强制性的，但对无障碍而言，它难以置信地有用——屏幕阅读器会将这些描述读给需要使用阅读器的使用者听，让他们知道图像的含义。如果由于某种原因无法加载图像，普通浏览器也会在页面上显示alt 属性中的备用文本：例如，网络错误、内容被屏蔽或链接过期时。

还有很多其他属性，可以实现各种不同的目的：

• Referrer/CORS 控制，保证安全与隐私：详见 crossorigin 属性和 referrerpolicy 属性。
• 使用 width、height设置原始分辨率：这将设置图像应占用的空间，以确保图像被加载之前页面的布局是稳定的。
• 使用 sizes 和 srcset 设置响应式图像。

如果在加载或渲染图像时发生错误，且设置了至少一个 onerror 事件处理器来处理 error事件，那么设置的事件处理器就会被调用。

属性

alt：定义了图像的备用文本描述。

<img src="images/dinosaur.jpg"
     alt="The head and torso of a dinosaur skeleton;
          it has a large head with long sharp teeth">

crossorigin：这个枚举属性表明是否必须使用 CORS 完成相关图像的抓取。启用 CORS 的图像 可以在 元素中重复使用，而不会被污染（tainted）。允许的值有：

• anonymous
  执行一个跨域请求（比如，有 Origin HTTP header）。但是没有发送证书（比如，没有 cookie，没有 X.509 证书，没有 HTTP 基本授权认证）。如果服务器没有把证书给到源站（没有设置 Access-Control-Allow-Origin HTTP 头），图像会被污染，而且它的使用会被限制。

• use-credentials
  一个有证书的跨域请求（比如，有 Origin HTTP header）被发送（比如，cookie，一份证书，或者 HTTP 基本验证信息）。如果服务器没有给源站发送证书（通过 Access-Control-Allow-Credentials HTTP header），图像将会被污染，且它的使用会受限制。当用户并未显式使用本属性时，默认不使用 CORS 发起请求（例如，不会向服务器发送原有的HTTP 头部信息），可防止其在 中的使用。如果无效，默认当做 anonymous 关键字生效。

decoding：为浏览器提供图像解码方式上的提示。允许的值：

• sync
  同步解码图像，实现与其他内容的显示相互斥的原子显示。此图像的解码将是一个原子操作，在完成解码显示之前，不被其他内容的显示而打断，因此其他内容的显示会被延迟。
• async
  异步解码图像，以减少其他内容的显示延迟。
• auto
  默认值：不指定解码方式，由浏览器决定哪一种对用户来说是最合适的。

height：图像的高度，单位是 CSS 像素。可以只指定 width 和 height 中的一个值，浏览器会根据原始图像进行缩放。

width：图像的宽度，在单位是 CSS 像素。

<img src="images/dinosaur.jpg"
     alt="一只恐龙头（领头）（领头）部和躯干的骨架，它有一个巨大的头，长着锋利的牙齿。"
     width="400"
     height="341">

ismap：这个布尔属性表示图像是否是服务器端 map 的一部分。如果是，那么点击图片的精准坐标将会被发送到服务器。只有在 <img> 元素是一个拥有有效 href 属性的 <a> 元素的后代元素的情况下，这个属性才会被允许使用。

sizes：表示资源大小的、以逗号隔开的一个或多个字符串。每一个资源大小包括：

1. 一个媒体条件。最后一项一定是被忽略的。
2. 一个资源尺寸的值。Media Conditions describe properties of the viewport, not of the image. For example, (max-height: 500px) 1000px proposes to use a source of 1000px width, if the viewport is not higher than 500px.资源尺寸的值被用来指定图像的预期尺寸。当 srcset 中的资源使用了宽度描述符 w 时，用户代理会使用当前图像大小来选择 srcset 中合适的一个图像 URL。被选中的尺寸影响图像的显示大小（如果没有影响大小的 CSS 样式被应用的话）。如果没有设置 srcset 属性，或者没有属性值，那么 sizes 属性也将不起作用。

<img srcset="elva-fairy-320w.jpg 320w,
             elva-fairy-480w.jpg 480w,
             elva-fairy-800w.jpg 800w"
     sizes="(max-width: 320px) 280px,
            (max-width: 480px) 440px,
            800px"
     src="elva-fairy-800w.jpg" 
     alt="Elva dressed as a fairy">

在这里，如果支持浏览器以视窗宽度为 480px 来加载页面，那么(max-width: 480px)的媒体条件为真，因此440px的槽会被选择，所以elva-fairy-480w.jpg将加载，因为它的的固定宽度（480w）最接近于440px。800px 的照片大小为 128KB 而 480px 版本仅有 63KB 大小—节省了 65KB。现在想象一下，如果这是一个有很多图片的页面。使用这种技术会节省移动端用户的大量带宽。

src：图像的 URL，这个属性对 <img> 元素来说是必需的。在支持 srcset 的浏览器中，src 被当做拥有一个像素密度的描述符 1x 的候选图像处理，除非一个图像拥有这个像素密度描述符已经被在 srcset 或者 srcset 包含 w 描述符中定义了。

<img src="images/dinosaur.jpg">

srcset：以逗号分隔的一个或多个字符串列表表明一系列用户代理使用的可能的图像。每一个字符串由以下组成：1. 指向图像的 URL。2. 可选地，再加一个空格之后，附加以下的其一：

• 一个宽度描述符，这是一个正整数，后面紧跟 ‘w’ 符号。该整数宽度除以 sizes 属性给出的资源（source）大小来计算得到有效的像素密度，即换算成和 x 描述符等价的值。
• 一个像素密度描述符，这是一个正浮点数，后面紧跟 ‘x’ 符号。如果没有指定源描述符，那它会被指定为默认的 1x。在相同的 srcset 属性中混合使用宽度描述符和像素密度描述符时，会导致该值无效。重复的描述符（比如，两个源在相同的 srcset 两个源都是 2x）也是无效的。The user agent selects any of the available sources at its discretion. This provides them with significant leeway to tailor their selection based on things like user preferences or bandwidth conditions. See our Responsive images tutorial for an example.

<img srcset="elva-fairy-320w.jpg,
             elva-fairy-480w.jpg 1.5x,
             elva-fairy-640w.jpg 2x"
     src="elva-fairy-640w.jpg" alt="Elva dressed as a fairy">

usemap：与元素相关联的 image map 的部分 URL（以 ‘#’ 开始的部分）。

2、<picture>

HTML <picture> 元素通过包含零或多个 <source> 元素和一个 <img> 元素来为不同的显示/设备场景提供图像版本。浏览器会选择最匹配的子 <source> 元素，如果没有匹配的，就选择 <img> 元素的 src 属性中的 URL。然后，所选图像呈现在<img>元素占据的空间中。

要决定加载哪个 URL，user agent 检查每个 <source> 的 srcset、media 和 type 属性，来选择最匹配页面当前布局、显示设备特征等的兼容图像。

<picture>
  <source media="(max-width: 799px)" srcset="elva-480w-close-portrait.jpg">
  <source media="(min-width: 800px)" srcset="elva-800w.jpg">
  <img src="elva-800w.jpg" alt="Chris standing up holding his daughter Elva">
</picture>

<source>元素包含一个media属性，这一属性包含一个媒体条件——就像第一个srcset例子，这些条件来决定哪张图片会显示——第一个条件返回真，那么就会显示这张图片。在这种情况下，如果视窗的宽度为 799px 或更少，第一个<source>元素的图片就会显示。如果视窗的宽度是 800px 或更大，就显示第二张图片。

srcset属性包含要显示图片的路径。请注意，正如我们在<img>上面看到的那样，<source>可以使用引用多个图像的srcset属性，还有sizes属性。所以你可以通过一个 <picture>元素提供多个图片，不过也可以给每个图片提供多分辨率的图片。实际上，你可能不想经常做这样的事情。

type 属性允许你为 <source> 元素的 srcset 属性指向的资源指定一个 MIME 类型。如果用户代理不支持指定的类型，那么这个 <source> 元素会被跳过。

​<picture>
  <source srcset="mdn-logo.svg" type="image/svg xml">
  <img src="mdn-logo.png" alt="MDN">
</picture>

在任何情况下，你都必须在 </picture>之前正确提供一个<img>元素以及它的src和alt属性，否则不会有图片显示。当媒体条件都不返回真的时候，它会提供图片；如果浏览器不支持 <picture>元素时，它可以作为后备方案。

<img srcset="elva-fairy-320w.jpg 320w,
             elva-fairy-480w.jpg 480w,
             elva-fairy-800w.jpg 800w"
     sizes="(max-width: 320px) 280px,
            (max-width: 480px) 440px,
            800px"
     src="elva-fairy-800w.jpg" 
     alt="Elva dressed as a fairy">

回顾一下，美术设计问题涉及要更改显示的图像以适应不同的图像显示尺寸。例如，如果在桌面浏览器上的一个网站上显示一张大的、横向的照片，照片中央有个人，然后当在移动端浏览器上浏览这个网站时，照片会缩小，这时照片上的人会变得非常小，看起来会很糟糕。这种情况可能在移动端显示一个更小的肖像图会更好，这样人物的大小看起来更合适。<picture>元素允许我们这样实现。

关与使用picture元素和img的srcset属性的区别，可以通过这个页面responsive.html来对比。可以发现，当缩小浏览器的窗口时，使用img srcset属性的元素对应的图片会随窗口的缩小而等比例放缩，而使用picture元素的图片则不会。

3、<figcaption>、<figure>：可附标题/内容

HTML <figure> 元素代表一段独立的内容，经常与说明（caption）<figcaption> 配合使用，并且作为一个独立的引用单元。当它属于主内容流（main flow）时，它的位置独立于主体。这个标签经常是在主文中引用的图片，插图，表格，代码段等等，当这部分转移到附录中或者其他页面时不会影响到主体。

HTML <figcaption> 元素是与其相关联的图片的说明/标题，用于描述其父节点 <figure> 元素里的其他数据。这意味着 <figcaption> 在<figure> 块里是第一个或最后一个。同时 HTML figcaption 元素是可选的；如果没有该元素，这个父节点的图片只是会没有说明/标题。

<figure>
    <img src="/media/cc0-images/elephant-660-480.jpg"
         alt="Elephant at sunset">
    <figcaption>An elephant at sunset</figcaption>
</figure>

通常，<figure>是图像，插图，图表，代码片段等，在文档的主流程中引用，但可以移动到文档的另一部分或附录而不影响主流程。

通过在其中插入<figcaption>（作为第一个或最后一个子元素），可以将标题与<figure>元素相关联。图中找到的第一个<figcaption>元素显示为图的标题。

4、<map>、<area>

HTML <map> 元素 与 <area> 元素一起使用来定义一个图像映射 (一个可点击的链接区域)。

<map> 元素必须使用name 全局属性给 map 一个名字用来查询，这个属性是必须的，值必须不能为空并且不能带空格。name 属性不准与同文档中其他 map 元素的值相同，如果 id 属性也被添加，name 属性和 id 属性的值必须相同。

HTML <area> 元素 在图片上定义一个热点区域，可以关联一个超链接。<area>元素仅在<map>元素内部使用。

属性

alt：在未显示图像的浏览器上显示代替的文本字符串。这个文本应该能传达给用户与显示图像而没有文本的情况下同等的选择。在 HTML4 中，这个属性时必需的，但是可以是一个空的串 (“”)。在 HTML5 中，这个属性只有在href 属性被使用的时候才是必需的。

coords：给热点区域设定具体的坐标值。这个值的数值和意义取决于这个值所描述的形状属性。对于矩形或长方形，这个 coords 值为两个 X,Y 对：左上、右下。对于圆形，这个值是 x,y,r，这里的 x,y 是一对确定圆的中心的坐标而 r 则表示的是半径值。对于多边和多边形，这个值是用 x,y 对表示的多边形的每一个点：x1,y1,x2,y2,x3,y3 等等。HTML4 里，值可能是像素数量或者百分比，区别是不是有 % 出现; HTML5 里，只可能是像素的数量。

download：这个属性如果存在的话，表明作者想把超链接用于下载一个资源。

href：area 的超链接，值为一个 URL. HTML4 里，这个值不管是不是有值都要明确指定出来。HTML5 里则不需要。

hreflang：指明链接资源的语言类型，值的范围参考BCP47。这个属性只能在指明 href 属性之后使用。

media：指明链接资源的媒体类型，例：print and screen。如果此属性省略，默认全部。仅在 href 属性存在情况下使用。

rel：对于包含 href 属性的锚，该属性指定目标对象与链接对象的关系。该值是一个逗号分隔的链接类型值列表。这些值及其语义将由一些可能对文档作者有意义的权威进行注册。如果没有其他的关系，默认的关系是无效的。只有当 href 属性是 presen 时才使用该属性。

shape：相关联的热点的形状。HTML 5 和 HTML 4 的规范定义了值 rect，它定义了一个矩形区域;圆圈，它定义了一个圆形区域;多边形，它定义了一个多边形;默认情况下，这表示整个区域超出了任何定义的形状。许多浏览器，特别是 Internet Explorer 4 和更高版本，支持弧形、多边形和矩形作为形状的有效值。

target：本属性指明了在什么地方显示链接的资源。HTML4 里，这个值是一个 frame 的链接或者关键字。HTML5 里，它是一个浏览器上下文 (比如：标签，窗口或者内嵌的 frame) 的链接或者关键字。值的含义：

• _self: 在当前区域加载链接指向的资源。这个是默认值。
• _blank: 在新的未命名的窗口或者 tab 里加载超链接资源。
• _parent: 在父级加载超链接资源。HTML4 里，是当前 frame 的父级，HTML5 里是当前的浏览器上下文，如果当前环境没有父级，行为和_self一样。
• _top: HTML4 里：将响应加载到完整的原始窗口中，取消所有其他帧。在 HTML5 中：将响应加载到顶级浏览上下文 (也就是说，浏览上下文是当前版本的祖先，并且没有父类)。如果没有父类，这个选项的行为方式与 self 相同本属性只能在指明 href 属性之后使用。

type：该属性指定了用于链接目标的 MIME 类型的媒体类型。一般来说，这是严格的咨询信息;然而，在未来，浏览器可能会为多媒体类型添加一个小图标。例如，当类型设置为音频/wav 时，浏览器可能会添加一个小的扬声器图标。公认的 MIME 类型的完整列表，请参阅 http://www.w3.org/TR/html4/references.html ref-MIMETYPES。只有当 href 属性存在时才使用该属性。

<img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap">

<map name="planetmap">
  <area shape="rect" coords="0,0,82,126" href="sun.htm" alt="Sun">
  <area shape="circle" coords="90,58,3" href="mercur.htm" alt="Mercury">
  <area shape="circle" coords="124,58,8" href="venus.htm" alt="Venus">
</map>

这篇好文章是转载于：学新通技术网