图像img相关的标签
一般用法
//日常
<img src = '图片url' alt = '获取图片失败的提示' />
//其他
<img src = '图片url'
alt = '获取图片失败的提示'
crossorigin = '帮助跨域' //说明见下
usemap = '关联分区响应图，见下文' //说明见分区响应图部分
/>
// crossorigin是html5新增的一个属性，用来帮助图像跨域,
// 主要目的用于帮助canvas元素能够使用第三方站点的图像，并且不会污染画布
// 属性值有两个：anonymous和use-credentials。
// anonymous用于执行一个跨域请求 响应报文包含Access-Control-Allow-Origin首部
// use-credentials执行一个有证书的跨域请求 响应报文包含Access-Control-Allow-Credentials首部
分区响应图
// 所谓分区相应，即图片不同的区域有不同的响应。所以必然有图片和区域的定义，并且二者可以关联
// 图片的定义
<img src = 'img/head.png' alt = '这里是头像图' usemap = '#img-map' />
// 区域的定义
// area元素与map元素组合,可以创建分区响应图
<map name = 'img-map'> //name属性必须有，与img的usemap属性相对应
//area的shape属性表示形状，值有rect、circle、poly、default四种，对应的coords即形状描述见下
<area shape = 'rect' href = '' coords = '100,100,150,160'> //矩形coords：左上坐标，右下坐标
<area shape = 'circle' href = '' coords = '50,50,30'> //圆形coords：圆心坐标和半径
<area shape = 'poly' href = '' coords = '50,50,100,100,150,160,50,200'> //每一个多边形的点的坐标，至少三个
<area shape = 'default' href = '' coords = ''>//覆盖整张图，可忽略coords值
</map>
插图元素
//html5中新增了两个与图像相关的语义化元素，figure figcaption，两者组合可用于插入图片
<figure>
<img src = '图片url' alt = '获取图片失败的提示' >
<figcaption> 头像照片</figcaption>
</figure>
展示效果就是上边图下边文字
图像格式及特点
| 格式 | 透明 | 压缩 | 动画 | 颜色数 | 兼容 | 特点 |
|---|---|---|---|---|---|---|
| GIF | 是，非alpha | 无损 | 有 | 8位 | all | 简单动画,颜色少，有锯齿 |
| PNG | 是，alpha | 无损 | 否 | 8位和24位 | IE6不支持透明 | 压缩比高色彩好，除了动画，其余方面可以代替GIF,UI中也叫透底图 |
| JPEG | 否 | 有损 | 否 | 24位 | all | 存储照片或者颜色丰富的复杂图片 |
| APNG | 是，非alpha | 有损 | 有 | 8位和24位 | 支持火狐，不支持IE,chrome、opera、safari部分支持 | PNG格式的扩展，可以代替PNG |
| WEBP | 是，非alpha | 无损和有损 | 有 | 24位 | chrome、opera支持，IE、safari、firefox不支持 | 简单动画,颜色少，有锯齿 |
口诀快速记忆：
gif有动画却颜色少
png压缩比高色彩好
jpeg照片图片都叫好
其他兼容不好别用了
下边真的可以不看 -----
有想法评论提出哈，欢迎交流，小编也是渣渣一枚呢～一起进步呗
这次真的可以不看 -----
点个收藏呗，要不赞一个呗，小编手都敲累了，但还是持续加更呢～