图像标签
- <img />单标签
属性- src "src" 属性的值是所要显示图像的URL
- width
- height
- alt
给图像显示一个“交互文本”。一般用于图片加载失败时的文本提示。(对SEO有帮助) - title 鼠标移过时显示的文字
- usemap="#name" 用于图像地图,可以和图像地图关联起来
图像地图
图像地图效果的实质是把一幅图片划分为不同的作用区域,再让不同的区域链接不同的地址
<map name="">
<area shape="" coords="" alt="" href="" target="" />
</map>
- shape形状
- Rect 矩形 coords = 'x1,y1,x2,y2' x1和y1为一个顶点的坐标,x2和y2为其对角顶点的坐标
- Circle 圆形 coords='x,y,z' x和y为圆心坐标,z为半径
- Poly 不规则图形 coords="x1,y1,x2,y2,x3,y3,..."
- coords 坐标
- title 鼠标经过提示的文字
- href 指向的链接
- target 以哪种方式打开
判断图片坐标:x为左边到该点的距离,y为上边到该点的距离,在ps中用矩形选框从左上角拉到该点,按F8显示选区信息
测量半径:椭圆选区
eg:
点击左眼跳转到百度,点击右眼跳转到360
<!DOCTYPE html>
<html>
<head>
<title>img</title>
</head>
<body>
<img src="cat.jpg" title="我是title属性" alt="一只小猫" usemap="#catmap">
<!-- 对图片的规划方案 -->
<map name="catmap">
<area shape="circle" coords="178,108,10" href="http://baidu.com" target="_blank">
<area shape="circle" coords="227,111,10" href="http://360.com" target="_blank">
</map>
</body>
</html>
图片类别
格式 | 透明度 | 动画 | 特点 | 适用场景 |
---|---|---|---|---|
JPG/JPEG | ✖ | ✖ | 色彩丰富,压缩比高,画质损失小,体积小 | 色彩丰富、要求体积要小 |
PNG | ✔ | ✖ | 色彩丰富,画质清晰,设置任意透明度,体积较小,但比jpg体积大些 | 对色彩有特殊要求、需要透明效果 |
GIF | ✔ | ✔ | 仅支持256种颜色,体积小,只有透明和不透明两种效果 | 图片颜色少、需要透明效果 |
BMP | ✖ | ✖ | 色彩丰富,画质清晰,但体积偏大 | 不推荐在网页中使用 |