一、图像标签的属性
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>