html5 图像标签
标签概述
HTML网页中任何元素的实现都要依靠HTML标签，要想在网页中显示图像就需要使用图像标签。
<img> 标签用于定义图像，<img> 是空标签，意思是说，它只包含属性，并且没有闭合标签。要在页面上显示图像，你需要使用源属性（src）。src 指 “source”。源属性的值是图像的 URL 地址。
<map> 标签用于客户端图像映射。图像映射指带有可点击区域的一幅图像。<img>标签中的 usemap 属性可引用 <map> 中的 id 或 name 属性（取决于浏览器），所以我们应同时向 <map> 添加 id 和 name 属性。
<area> 标签永远嵌套在 <map> 标签内部。<area> 标签可定义图像映射中的区域。
<canvas> 标签通过脚本（通常是 JavaScript）来绘制图形（比如图表和其他图像）。<canvas> 标签只是图形容器，您必须使用脚本来绘制图形。
<figure> 标签规定独立的流内容（图像、图表、照片、代码等等）。<figure> 标签的内容应该与主内容相关，同时元素的位置相对于主内容是独立的。如果被删除，则不应对文档流产生影响。
<figcaption> 标签为 <figure> 标签定义标题。<figcaption> 标签应该被置于 <figure> 标签的第一个或最后一个子元素的位置。
标签使用
<img>标签
src属性用于指定图像文件的路径和文件名，是<img>标签的必需属性。要想在网页中灵活地使用图像，仅仅依靠src属性是远远不够的。为此HTML还为<img>标签准备了其他的属性。
有时页面中的图像可能无法正常显示，如图片加载错误，浏览器版本过低等。因此为页面上的图像添加替换文本是个很好的习惯，在图像无法显示时告诉用户该图片的信息，这就需要使用图像的alt属性。
通常情况下，如果不给<img>标签设置宽高属性，图片就会按照它的原始尺寸显示，此外，也可以通过width和height属性用来定义图片的宽度和高度。通常我们只设置其中的一个属性，另一个属性则会依据前一个设置的属性将原图等比例显示。如果同时设置两个属性，且其比例和原图大小的比例不一致，显示的图像就会变形或失真。
<img src="smiley-2.gif" alt="Smiley face" width="42" height="42">
<map>标签、<area>标签
<map>标签和<area>标签一般结合起来使用，<map>标签用于图像映射，也就是让图片有一块可点击的区域，<area>标签用于定义图像映射内部的区域。
<img> 标签中的 usemap 属性与 <map> 元素中的 name 属性相关联，以创建图像与映射之间的关系。<area>标签中的coords属性规定区域的坐标，href属性规定区域的目标 URL。
<img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap">
<map name="planetmap">
<area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm">
<area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.htm">
<area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm">
</map>
<canvas>标签
<canvas>标签用于在网页实时生成图像，并且可以操作图像内容，基本上它是一个可以用JavaScript操作的位图（bitmap）。可以直接在该对象上指定宽度和高度，但是，其大多数功能都可以通过CanvasRenderingContext2D 对象获得。这是通过 Canvas 对象的getContext() 方法并且把直接量字符串 “2d” 作为唯一的参数传递给它而获得的。
<canvas>标签有两个属性width和height，分别用于定义画布的宽度和高度。宽度的默认值是300，高度的默认值的150。
<canvas id="myCanvas">your browser does not support the canvas tag </canvas>
<script type="text/javascript">
var canvas=document.getElementById('myCanvas');
var ctx=canvas.getContext('2d');
ctx.fillStyle='#FF0000';
ctx.fillRect(0,0,80,100);
</script>
<figure>标签、<figcaption>标签
<figure>标签是一种标签的组合，可带有标题（可选）。<figure>标签用来表示网站制作页面上一块独立的内容，将其从网页上移除后不会对网页上的其他内容产生影响。<figure>标签所表示的内容可以是图片、统计图或代码示例。
<figcaption> 标签为 <figure> 标签定义标题。<figcaption> 标签应该被置于 <figure> 标签的第一个或最后一个子标签的位置。
<figure>
<img src="img_pulpit.jpg" alt="The Pulpit Rock" width="304" height="228">
<figcaption>Fig1. - A view of the pulpit rock in Norway.</figcaption>
</figure>
