图像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照片图片都叫好
其他兼容不好别用了
下边真的可以不看 -----
有想法评论提出哈,欢迎交流,小编也是渣渣一枚呢~一起进步呗
这次真的可以不看 -----
点个收藏呗,要不赞一个呗,小编手都敲累了,但还是持续加更呢~