[07]HTML基础之图片标签

1. <img>标签

显示给定来源的图片。

<img src="//www.juetan.cn" alt="头像" width="120" height="120">
属性：
src:图片来源地址，使用相同协议时，可省略协议
alt:图片来源地址失效时使用，用于描述当前图片内容
width:图片宽度
height:图片高度
ismap:是否为图像映射
usemap:使用图像映射，值为#+对应映射元素的name属性值
作为普通图片使用时，建议前四个属性都写上，不仅更加符合语义化，还能防止图片失效时
影响页面布局；

2. <area>标签

定义图片映射内部的可点击区域。

常用属性：
shape: 区域形状,rect矩形,circle圆形,poly多边形,default默认
coords:区域的坐标
href:点击区域后的跳转地址
alt:区域的替代文本
其他属性：
hreflang：目标地址的语言
rel：当前图像与目标地址的关系
media：在哪种设备使用该图像映射
target：以什么形式打开目标地址
type：目标地址的MIME类型

3. <map>标签

定义图像映射，与标签搭配。

定义图片的映射，可用于地图之类的跳转点击
name:图像映射的名字，应唯一

4. <figture>标签

表示图片容器。

用作文档中插图的图片，与figcaption标签搭配使用
<figture>
    <img src="//j.cn/sky.png" alt="傍晚的天空" width="300" height="200">
    <figcaption>傍晚的天空</figcaption>
</figture>

5. <figcaption>标签

表示图片容器的标题，与<figture>标签搭配。
使用如上，相较于直接使用img标签，这两个标签增加了语义化

6. <svg>标签

表示矢量图行，有专门的绘画API。

7. <convas>标签

表示标量图形，有专门的绘画API。