HTML基礎（四）---影象元素
一、影象標籤的屬性
1、影象標籤的語法與屬性
1.1、影象標籤是用於在html中顯示圖片的標籤，具體的書寫語法如下：
1.2、相關屬性介紹
第一、src屬性：src是圖片存在的路徑，可以是本地路徑和網路路徑，本地路徑包含同級路徑、相對路徑、絕對路徑
第二、alt屬性：alt屬性是圖片替代文字，有兩方面的作用，一是用於搜尋引擎搜尋，二是使用者提示，在圖片未加載出來時可以看到alt資訊，src與alt是img的必選選項
第三、title屬性：title屬性是提示文字，滑鼠移入圖片時會顯示提示文字
第四、width屬性、height屬性：設定圖片寬度和高度的屬性，Width
<!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>