与图像相关的html标签img以及 各种格式的图片对比 —— 标签整理

图像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照片图片都叫好
其他兼容不好别用了

下边真的可以不看 -----

想学习一些前端的书籍吗，我都帮你整理好啦！评论打出你想读的书，给你最全的笔记干货

超级全的前端知识，面试必备、系统复习必备哟哟哟

有想法评论提出哈，欢迎交流，小编也是渣渣一枚呢～一起进步呗

这次真的可以不看 -----

点个收藏呗，要不赞一个呗，小编手都敲累了，但还是持续加更呢～