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標籤，使布局更加簡單。
相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！
推薦閱讀：
jest測試react native組件的步奏是什麼js的自訂trim函數使用方法
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
