1. 標簽介紹：

(1)map標簽： 該標簽是指圖片的映射，也就是說一張可以點擊的圖片的映射；

屬性介紹：

<1> id: 中的 usemap 屬性可引用 中的 id 或 name 屬性(取決于瀏覽器)

<2>name:同上

說明：不同的瀏覽器會根據img中的usemap屬性去引用ID或者name值，所以最好使用的時候這兩個屬性都要加上。

(2)area標簽：指的是圖片映射的區域，可以是矩形(rect)、圓形()；

屬性介紹：

<1> alt :類似img 標簽中的同名屬性

<2>coords: 區域的坐標(0，0 指的是圖片的左上角)，矩形為左上角和右下角兩個坐標，圓形為圓心X、Y和半徑，多邊形為任意兩個坐標之間構成的區域

<3>shape:指的區域形狀；矩形、圓形、多邊形

....

2.使用場景：

主要適用于多個圖片組成的超鏈接區域，例如導航欄、底部說明欄等等；

說白了就是同一張圖片點擊不同的區域能夠跳到不同的鏈接中或者實現不同的邏輯；

這樣的話可以避免我們切圖的時候切成多張的圖片，減少了客戶端的http請求，對提升頁面的性能有不少的幫助。

來源：https://www.cnblogs.com/makunzheng/p/10493433.html

總結

以上是生活随笔為你收集整理的同一个html页面中两个area,HTML中的map和area标签的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。