map標簽的用途：是與img標簽綁定使用的，常被用來賦予給客戶端圖像某處區域特殊的含義，點擊該區域可跳轉到新的文檔。 因為map標簽是與img標簽綁定使用的，所以我們需要給map標簽添加ID和name屬性，讓img標簽中的usemap屬性引用map標簽中的id或者name屬性（由於瀏覽器的不同，us ...
map標簽的用途：是與img標簽綁定使用的，常被用來賦予給客戶端圖像某處區域特殊的含義，點擊該區域可跳轉到新的文檔。
因為map標簽是與img標簽綁定使用的，所以我們需要給map標簽添加ID和name屬性，讓img標簽中的usemap屬性引用map標簽中的id或者name屬性（由於瀏覽器的不同，usemap屬性接收二者之一的值，所以通常name和id屬性二者都寫，值相同），並配合area標簽進行使用。
示例代碼如下：
<!doctype html>
<html>
<head></head>
<body>
<img src="http://s2.sinaimg.cn/middle/69906822ga1e24ba6e971&690" width="444" height="395" alt="中國地圖" usemap="#province"/>
<map name="province" id="province">
<area shape="rect" coords="80,112,110,125" alt="新疆" href="https://baike.baidu.com/item/%E6%96%B0%E7%96%86/132263?fr=aladdin">
<area shape="rect" coords="77,209,110,229" alt="西藏" href="https://baike.baidu.com/item/%E8%A5%BF%E8%97%8F/130045">
<area shape="rect" coords="150,176,185,192" alt="青海" href="https://baike.baidu.com/item/%E9%9D%92%E6%B5%B7/31638">
<area shape="rect" coords="197,236,235,261" alt="四川" href="https://baike.baidu.com/item/%E5%9B%9B%E5%B7%9D/212569">
<area shape="rect" coords="170,300,211,325" alt="雲南" href="https://baike.baidu.com/item/%E4%BA%91%E5%8D%97/206207">
<area shape="circle" coords="227,200,8" alt="甘肅" href="https://baike.baidu.com/item/%E7%94%98%E8%82%83">
<area shape="circle" coords="240,177,5" alt="寧夏" href="https://baike.baidu.com/item/%E7%94%98%E8%82%83">
<area shape="circle" coords="285,133,8" alt="內蒙古" href="https://baike.baidu.com/item/%E7%94%98%E8%82%83">
</map>
</body>
</html>
顯示效果如下：
我們可以看出這是一張地圖，如果單單隻是一張圖片，就會顯得很單調，所以我們通過map標簽賦予各個省的區域以含義，在這裡我點擊新疆區域後跳轉到新疆的百度百科，如下圖：
這樣我們就可以直接瞭解到每個省的歷史和文化，而不用再去一個個的去搜尋，顯得更人性化。
其中area標簽定義了圖像中被賦予特殊含義的區域，它主要的值有alt、cooreds、href、shape、target等
1、alt屬性
定義：規定區域的替代文本。
說明：如果寫href屬性，則alt屬性是必寫的
2、cooreds屬性
定義：定義相關區域的坐標
說明：和shape屬性搭配使用
（1）當shape屬性為rect時，代表相關區域為矩形，則cooreds屬性值為(x1,y1,x2,y2),其中x1,y1為左上角的坐標，x2,y2為右下角的坐標；
（2）當shape屬性為circle時，代表相關區域為圓形，則cooreds屬性值為(x,y,radius),其中x,y為圓形的中心坐標，radius為圓形的半徑；
（3）當shape屬性為poly時，代表相關區域為多邊形，則cooreds屬性值為(x1,y1,x2,y2,x3,y3......xn,yn),規定了多邊形各個頂點的坐標，由於瀏覽器會自動閉合多邊形，所以尾部坐標不必與第一個坐標相等。
3、href屬性
定義：定義了相關區域所連目標
說明：href屬性一般有三種值
（1）絕對路徑：通常用來指向其他的網站如（href="https://www.baidu.com"）
（2）相對路徑：通常用來指向自身網站內的某個文件如（href="//favicon.ico"）
（3）錨鏈接：通常用來指向頁面中的錨如（href="#header"）
4、shape屬性
定義：定義了相關區域的形狀
說明：（1）預設值（default）:規定全部區域
（2）rect:規定相關區域為矩形
（3）circle:規定相關區域為圓形
（4）poly:規定先關區域為多邊形
5、target屬性
定義：定義了在何處打開目標鏈接
說明：（1）_blank:在新視窗打開被鏈接的文檔
（2）_self:預設，在相同框架中打開被鏈接的文檔
（3）_parent:在父框架集中打開被鏈接的文檔
（4）_top：在整個視窗中打開被鏈接文檔
（5）framename:在指定框架中打開被鏈接文檔
說明：area標簽有些時候也可以當做a標簽的替代品，因為a標簽並不能直接嵌套a標簽，在某些情況下，我們又不得不用，那麼我們可以把a標簽替換為area標簽，使佈局更加簡單。
