這次帶給大家map標籤與area標籤怎樣使用，是有那個map標籤與area標籤的注意事項有哪些，下面就是實戰案例，一起來看一下。
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函數使用方法######
以上是map標籤與area標籤怎麼使用的詳細內容。更多資訊請關注PHP中文網其他相關文章！
