一、图像标签的属性
1、图像标签的语法与属性
1.1、图像标签是用于在html中显示图片的标签，具体的书写语法如下：
1.2、相关属性介绍
第一、src属性：src是图片存在的路径，可以是本地路径和网络路径，本地路径包含同级路径、相对路径、绝对路径
第二、alt属性：alt属性是图片替代文本，有两方面的作用，一是用于搜索引擎搜索，二是用户提示，在图片未加载出来时可以看到alt信息，src与alt是img的必选选项
第三、title属性：title属性是提示文字，鼠标移入图片时会显示提示文字
第四、width属性、height属性：设置图片宽度和高度的属性，Width和height改变图像的宽度和高度，如果害怕设置了width和height会使得图像变形，那么就可以只设置其中一个参数，另一个参数会自动对应比例呈现
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head>
<title></title>
</head>
<body>
<!-- 图像标签 -->
<!-- 同级目录图像 -->
<img src="img_01.jpg" alt="风景壁纸" title="鼠标移入显示风景壁纸" />
<!-- 相对路径 -->
<img src="img/img_02.jpg" width="500" />
<!-- 绝对路径 -->
<img src="C:\Users\Administrator\Desktop\Web开发\test\HTML&CSS\H04-图像标签\img/img_03.jpg" />
<!-- 网络地址 -->
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1540485278140&di=06da727e50d2c0e976debff2c08cf596&imgtype=0&src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F0125fd5770dfa50000018c1b486f15.jpg%401280w_1l_2o_100sh.jpg" width="500" height="400">
</body>
</html>二、绝对路径与相对路径
1、绝对路径与相对路径区别
1.1、绝对路径是指文件在硬盘上真正存在的路径，从该盘符开始的路径
例如：E:\HTML\images\photo.jpg 该路径表示在E盘HTML文件夹下images文件夹下的photo.jpg图像
1.2、相对路径是指以当前路径为参考，相对于当前位置的路径
例如：当前路径为E:\HTML，要想加载photo.jpg该图像，只需输入images/photo.jpg
2、相对路径表示方法
2.1、同级路径：同属于一层路径下，访问文件可以直接写文件名称
<img src="img1.jpg" alt="" />2.2、如果访问该路径下面的文件夹，应该先输入文件夹名称然后加“ / ”，再输入文件名
<img src="images/img1.jpg" alt="" />2.3、如果访问该路径上一层文件夹下的内容，应该先加“.. / ”再添加文件名，退出多层应该加“../../”再加文件名
<img src="../img1.jpg" alt="" />如果向上返回两层应该这样写：
<img src="../../img1.jpg" alt="" />三、图片热点地图用法
1、热点地图写法格式
下面是图片热点地图的写法格式
<!-- 指定图片map映射对象 -->
<img src=“图片地址” usemap=“#Map”/>
<!-- 图片热点地图map -->
<map name=“Map”>
<!-- 热点地图划分区域 -->
<area shape=“rect” coords=“10,10,50,50” href=“#”>
<area shape="circle" coords="100,40,20" href="#">
<area shape="poly" coords="100,20,100,50,200,50,200,20" href="#">
</map>
2、相关属性及其注意事项
2.1、下面介绍相关属性：
第一、shape属性：shape是指定形状类型，有三种形状，rect-矩形，circle-圆形，poly-多边形
第二、coords属性：coords是指定热点范围，指定绘制的区域 ，鼠标移动到相关区域会显示点击图标
第三、href属性：href指定跳转的地址
第四、target属性：是指定跳转页面的方式（_self、_blank、_parent、_top）
2.2、注意事项
第一、shape属性规定area元素的形状， rect（矩形） circle（圆形）poly（多边形）
第二、coords 属性规定形状的坐标， rect（x1,y1,x2,y2） circle（x,y,radius） poly（x1,y1,x2,y2,..,xn,yn）
第三、target规定打开窗口的方式
第四、href规定打开的链接地址
第五、<img>中的 usemap 属性引用 <map> 中的 name 属性
第六、area 元素永远嵌套在 map 元素内部
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head>
<title>图像热点地图方法</title>
</head>
<body>
<!-- 图像热点地图 -->
<img src="img/map_img.jpg" usemap="#mymap" />
<map name="mymap">
<!-- 京东图标:矩形 -->
<area shape="rect" coords="19,32,220,150" href="http://www.jd.com" target="_blank">
<!-- 搜狐图标:矩形 -->
<area shape="rect" coords="240,33,417,124" href="http://www.sohu.com/" target="_blank">
<!-- 天猫图标:矩形 -->
<area shape="rect" coords="239,170,426,287" href="https://1111.tmall.com/" target="_blank">
<!-- 腾讯图标:圆形 -->
<area shape="circle" coords="120,244,54" href="https://www.qq.com/" target="_blank">
<!-- 其他图标:多边形 -->
<area shape="poly" coords="550,91,476,219,783,219,708,91" href="https://www.gamersky.com/" target="_blank">
</map>
</body>
</html>