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

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

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

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

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

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

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

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值