1. <img>
标签
显示给定来源的图片。
<img src="//www.juetan.cn" alt="头像" width="120" height="120">
属性:
src:图片来源地址,使用相同协议时,可省略协议
alt:图片来源地址失效时使用,用于描述当前图片内容
图片宽度
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。