网页中，除了看文字，剩下的就是有图有真相的图片了，而图片对应的应用标签主要有img,map,area,canvas，以及figcation,figure总共六种标签
- 图像img
图像中的img标签主要用于定义html中的图像，而图像并不会直接定义到html页面中，而是链接到html页面上
img的属性:
src:说明图像的url
alt：规定图像的替代文本
width：设置图像 的宽度
height:用于定义图像的高度
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<img src="image/1.jpg" alt="图片加载失败" align="middle" border="10px" width="400px" height="400px" title="DUT">
<!--width与height只用写一个，等比例放大缩小
border 出现一个图像
title:当图片悬停到其上时，会出现提示
alt:图片不能正常加载时，其上出现的文字
-->
<a href="http://www.baidu.com" target="_blnk">
<img src="image/1.jpg" width="200" height="200" alt="网站_logo">
</a>
</body>
</html>
- 图片映射
- map
定义图像映射，图像映射（image-map）
主要指的是带有可单击区域的一幅图像 - area
定义图像映射的区域，area元素永远嵌套在map元素的内部，area元素可定义图像映射中的区域
< img > 标签中的 usemap 属性与 map 元素 name 属性相关联，创建图像与映射之间的联系
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<img src="image/1.jpg" alt="图片加载失败" border="10px" width="400px" height="400px" title="DUT" usemap="#Map">
<!--width与height只用写一个，等比例放大缩小
border 出现一个图像
title:当图片悬停到其上时，会出现提示
alt:图片不能正常加载时，其上出现的文字
-->
<map name="Map">
<area shape="rect" coords="0,0,200,200" href="http://www.baidu.com" >
<area shape="rect" coords="200,200,400,0" href="http://www.dxper.net" >
<area shape="rect" coords="200,200,400,400" href="http://www.xiaomi.com" >
<area shape="rect" coords="0,400,200,200" href="http://www.amazon.com" >
</map>
</body>
</html>
- Shape属性的设置说明：
Rect
定义一个矩形区域，coords属性设置值为左上角、右下角的坐标，各个坐标之间用逗号分开。
Poly：
定义一个多边型区域，coords属性设置值为多边形各个顶点的坐标值。
Circle：
定义一个圆形区域，coords属性设置值为圆心坐标及半径，前两个参数分别为圆心的横、纵坐标，第三个参数为半径。