HTML Map 标签的使用

Myth丶恋晨 2023-02-08 12:57 14阅读 0赞

今天看到京东的一个营销活动，左侧浮动导航是用HTML 中的map标签写的，因此有了这篇记录的文章。

直接上图如其中的大家电

![图片][Center]

顺便在摘抄了一些相关资料奉上：

HTML <map> 标签

带有可点击区域的图像映射;

所有主流浏览器都支持 <map> 标签。

## 定义和用法 ##

定义一个客户端图像映射。图像映射（image-map）指带有可点击区域的一幅图像。

## 提示和注释： ##

**注释：**area 元素永远嵌套在 map 元素内部。area 元素可定义图像映射中的区域。

**注释：**<img>中的 usemap 属性可引用 <map> 中的 id 或 name 属性（取决于浏览器），所以我们应同时向 <map> 添加 id 和 name 属性。

## HTML 与 XHTML 之间的差异 ##

在 HTML 中，<area> 没有结束标签。

在 XHTML 中，<area> 必须正确地关闭。

## area 属性 ##

<table> 
 <tbody> 
  <tr> 
   <th style="vertical-align:baseline;width:120px;">属性</th> 
   <th style="vertical-align:baseline;width:120px;">值</th> 
   <th style="vertical-align:baseline;width:403px;">描述</th> 
  </tr> 
  <tr> 
   <td style="border-color:#aaaaaa;vertical-align:text-top;"><a href="http://www.w3school.com.cn/tags/att_area_coords.asp" rel="nofollow">coords</a></td> 
   <td style="border-color:#aaaaaa;vertical-align:text-top;">坐标值</td> 
   <td style="border-color:#aaaaaa;vertical-align:text-top;">定义可点击区域（对鼠标敏感的区域）的坐标。</td> 
  </tr> 
  <tr> 
   <td style="border-color:#aaaaaa;vertical-align:text-top;"><a href="http://www.w3school.com.cn/tags/att_area_href.asp" rel="nofollow">href</a></td> 
   <td style="border-color:#aaaaaa;vertical-align:text-top;">URL</td> 
   <td style="border-color:#aaaaaa;vertical-align:text-top;">定义此区域的目标 URL。</td> 
  </tr> 
  <tr> 
   <td style="border-color:#aaaaaa;vertical-align:text-top;"><a href="http://www.w3school.com.cn/tags/att_area_nohref.asp" rel="nofollow">nohref</a></td> 
   <td style="border-color:#aaaaaa;vertical-align:text-top;">nohref</td> 
   <td style="border-color:#aaaaaa;vertical-align:text-top;">从图像映射排除某个区域。</td> 
  </tr> 
  <tr> 
   <td style="border-color:#aaaaaa;vertical-align:text-top;"><a href="http://www.w3school.com.cn/tags/att_area_shape.asp" rel="nofollow">shape</a></td> 
   <td style="border-color:#aaaaaa;vertical-align:text-top;"> 
    <ul style="margin-left:0px;"> 
     <li>default</li> 
     <li>rect</li> 
     <li>circ</li> 
     <li>poly</li> 
    </ul></td> 
   <td style="border-color:#aaaaaa;vertical-align:text-top;">定义区域的形状。</td> 
  </tr> 
  <tr> 
   <td style="border-color:#aaaaaa;vertical-align:text-top;"><a href="http://www.w3school.com.cn/tags/att_area_target.asp" rel="nofollow">target</a></td> 
   <td style="border-color:#aaaaaa;vertical-align:text-top;"> 
    <ul style="margin-left:0px;"> 
     <li>_blank</li> 
     <li>_parent</li> 
     <li>_self</li> 
     <li>_top</li> 
    </ul></td> 
   <td style="border-color:#aaaaaa;vertical-align:text-top;">规定在何处打开 href 属性指</td> 
  </tr> 
 </tbody> 
</table>

# HTML DOM Area 对象 #

## Area 对象 ##

Area 对象代表图像映射的一个区域（图像映射指的是带有可点击区域的图像）

在 HTML 文档中 <area> 标签每出现一次，就会创建一个 Area 对象。

## Area 对象的属性 ##

<table> 
 <tbody> 
  <tr> 
   <th style="vertical-align:baseline;width:155px;">属性</th> 
   <th style="vertical-align:baseline;">描述</th> 
  </tr> 
  <tr> 
   <td style="border-color:#aaaaaa;vertical-align:text-top;"><a href="http://www.w3school.com.cn/jsref/prop_area_accesskey.asp" rel="nofollow">accessKey</a></td> 
   <td style="border-color:#aaaaaa;vertical-align:text-top;">设置或返回访问某个区域的快捷键。</td> 
  </tr> 
  <tr> 
   <td style="border-color:#aaaaaa;vertical-align:text-top;"><a href="http://www.w3school.com.cn/jsref/prop_area_alt.asp" rel="nofollow">alt</a></td> 
   <td style="border-color:#aaaaaa;vertical-align:text-top;">设置或返回当浏览器无法显示某个区域时的替换文字。</td> 
  </tr> 
  <tr> 
   <td style="border-color:#aaaaaa;vertical-align:text-top;"><a href="http://www.w3school.com.cn/jsref/prop_area_coords.asp" rel="nofollow">coords</a></td> 
   <td style="border-color:#aaaaaa;vertical-align:text-top;">设置或返回图像映射中可点击区域的坐标。</td> 
  </tr> 
  <tr> 
   <td style="border-color:#aaaaaa;vertical-align:text-top;"><a href="http://www.w3school.com.cn/jsref/prop_area_hash.asp" rel="nofollow">hash</a></td> 
   <td style="border-color:#aaaaaa;vertical-align:text-top;">设置或返回某个区域中 URL 的锚部分。</td> 
  </tr> 
  <tr> 
   <td style="border-color:#aaaaaa;vertical-align:text-top;"><a href="http://www.w3school.com.cn/jsref/prop_area_host.asp" rel="nofollow">host</a></td> 
   <td style="border-color:#aaaaaa;vertical-align:text-top;">设置或返回某个区域中 URL 的主机名和端口。</td> 
  </tr> 
  <tr> 
   <td style="border-color:#aaaaaa;vertical-align:text-top;"><a href="http://www.w3school.com.cn/jsref/prop_area_href.asp" rel="nofollow">href</a></td> 
   <td style="border-color:#aaaaaa;vertical-align:text-top;">设置或返回图像映射中链接的 URL。</td> 
  </tr> 
  <tr> 
   <td style="border-color:#aaaaaa;vertical-align:text-top;"><a href="http://www.w3school.com.cn/jsref/prop_area_id.asp" rel="nofollow">id</a></td> 
   <td style="border-color:#aaaaaa;vertical-align:text-top;">设置或返回某个区域的 id。</td> 
  </tr> 
  <tr> 
   <td style="border-color:#aaaaaa;vertical-align:text-top;"><a href="http://www.w3school.com.cn/jsref/prop_area_nohref.asp" rel="nofollow">noHref</a></td> 
   <td style="border-color:#aaaaaa;vertical-align:text-top;">设置或返回某个区域是否应是活动的还是非活动的。</td> 
  </tr> 
  <tr> 
   <td style="border-color:#aaaaaa;vertical-align:text-top;"><a href="http://www.w3school.com.cn/jsref/prop_area_pathname.asp" rel="nofollow">pathname</a></td> 
   <td style="border-color:#aaaaaa;vertical-align:text-top;">设置或返回某个区域中的 URL 的路径名。</td> 
  </tr> 
  <tr> 
   <td style="border-color:#aaaaaa;vertical-align:text-top;"><a href="http://www.w3school.com.cn/jsref/prop_area_protocol.asp" rel="nofollow">protocol</a></td> 
   <td style="border-color:#aaaaaa;vertical-align:text-top;">设置或返回某个区域中的 URL 的协议。</td> 
  </tr> 
  <tr> 
   <td style="border-color:#aaaaaa;vertical-align:text-top;"><a href="http://www.w3school.com.cn/jsref/prop_area_search.asp" rel="nofollow">search</a></td> 
   <td style="border-color:#aaaaaa;vertical-align:text-top;">设置或返回某个区域中 URL 的查询字符串部分。</td> 
  </tr> 
  <tr> 
   <td style="border-color:#aaaaaa;vertical-align:text-top;"><a href="http://www.w3school.com.cn/jsref/prop_area_shape.asp" rel="nofollow">shape</a></td> 
   <td style="border-color:#aaaaaa;vertical-align:text-top;">设置或返回图像映射中某个区域的形状。</td> 
  </tr> 
  <tr> 
   <td style="border-color:#aaaaaa;vertical-align:text-top;"><a href="http://www.w3school.com.cn/jsref/prop_area_tabindex.asp" rel="nofollow">tabIndex</a></td> 
   <td style="border-color:#aaaaaa;vertical-align:text-top;">设置或返回某个区域的 tab 键控制次序。</td> 
  </tr> 
  <tr> 
   <td style="border-color:#aaaaaa;vertical-align:text-top;"><a href="http://www.w3school.com.cn/jsref/prop_area_target.asp" rel="nofollow">target</a></td> 
   <td style="border-color:#aaaaaa;vertical-align:text-top;">设置或返回在何处打开区域中的 link-URL。</td> 
  </tr> 
 </tbody> 
</table>

## 标准属性 ##

[Center]: /images/20230208/35ad3567f0104435a3b294ac132f5474.png