下载掌阅APP，畅读海量书库
立即打开
<a>元素是无法嵌套<a>元素的，例如：
浏览器会自动将上面的链接元素渲染成平行结构的，就像下面这样：
在实际的开发过程中，难免会遇到需要链接嵌套的情况，尤其在移动端的开发中。
移动端的点击都是使用手指完成的，属于不精确的点击，因此我们常常将整个列表都做成可点击的，但是有时候，列表中还会有其他外链的信息，此时链接嵌套的情况就出现了，比如图2-12所示的这个例子，外部列表是个人详情链接，简介信息中的是书籍链接，瞧，这是典型的链接嵌套场景。
图2-12 链接嵌套示意
如果是你，你会如何实现此需求？
使用JavaScript的location.href方法触发跳转？可以，是个方法！除此之外呢？
嘿，不妨试试使用<area>元素。
<area>元素也是HTML标准元素，它的许多行为和<a>元素的都是一样的，不仅原生支持href属性的跳转行为，对于target、rel、ping、referrerpolicy等属性也都是支持的。
不过<area>元素并非嵌套元素，无法包裹文字或其他标签，所以作为链接出现的时候，只能覆盖在其他的元素上。
例如，上面链接嵌套的需求可以使用如下所示的代码实现（仅展示关键部分）：
此时，再使用CSS让<area>元素绝对定位覆盖外面的<span>元素就可以了：
此方法简单又干脆，且语义和无障碍访问都没问题，在桌面端浏览器中，把光标移动到对应的链接上，浏览器也会在左下角显示链接地址（Safari除外，因为Safari没有提示链接地址的行为）。
可以通过在浏览器中输入地址https://www.htmlapi.cn/2/1-8.html或扫码访问来体验。
然而，上面这种写法目前仅在Chrome浏览器下有效，在Firefox和Safari浏览器下，<area>元素尚不能脱离<map>元素使用。
这一点说来话就长了。
<area>和<map>元素原本的作用
<area>和<map>元素原本的作用是给图片元素上标记不规则的点击区域，例如图2-13所示的饼图的三个分区就属于不规则的点击区域。
图2-13 饼图与不规则点击区域
这种场景下的最佳实现一定是使用<area>和<map>元素。
此时，不同的饼图区域就会有不同的链接，有演示页面，可以通过在浏览器中输入地址https://www.htmlapi.cn/2/1-9.html或扫码访问来体验。
其中出现了若干个必须要出现的属性和元素。
（1）<img>元素，<map>元素的生效离不开图片元素。
（2）usemap属性，用来指向使用哪个热点地图，需要以“＃”开头。
（3）<map>元素，需要设置id或者name属性值，方便和usemap属性值匹配。
（4）<area>元素，设置链接地址及点击区域的形状与坐标信息。
上面四个要素中，前三个比较简单，不展开讲，重点讲一下<area>元素的几个比较独有的HTML属性。
1.shape
shape表示点击热点区域的形状，支持矩形（rect）、圆形（circle）以及多边形（poly）。
2.coords
coords表示点击热点区域形状的坐标。坐标点（0，0）表示图片的左上角。其中rect支持4个数值，2个坐标，分别是矩形左上角坐标和矩形右下角坐标。例如，coords="20，20，80，80"生成的就是一个左上角坐标（20，20）、宽和高都是60px的矩形区域。circle支持3个数值，前2个值为圆心坐标，第3个值为圆的半径大小。poly就更简单了，每两个数值组合表示一个坐标点，依次连线形成的区域就是最终的热点区域。
3.alt
alt同<img>元素的alt，表示热点区域图片的描述信息。
大家可能知道CSS中有个名为clip-path的CSS属性，支持矩形、圆形和多边形的剪裁，<area>元素的coords属性值语法与之类似，区别在于，coords属性的兼容性更好，包括IE8浏览器在内的浏览器都支持。然而，很可惜的是，<area>元素无法像普通元素那样进行样式自定义，边框、背景色之类的样式都是无效的。这个特点限制了其只能覆盖在某些元素上作为点击区域使用。
了解了<area>元素，我们再回到一开始的那个链接嵌套的问题。
既然Firefox和Safari浏览器不支持单纯的<area>覆盖，我们就使用标准的语法，也就是使用<img>元素覆盖，然后将整个<img>元素都做成点击链接。
HTML代码示意如下（只展示核心部分）：
此时，所有的浏览器，包括IE浏览器在内，点击书名都能跳转到另外的链接，不受外部<a>元素链接的影响。
演示页面就是上面出现过的https://www.htmlapi.cn/2/1-8.html，其中有个前端小技巧，就是让<area>元素的矩形坐标值设置得足够大，这样，可以复用在任意尺寸的点击元素上，而不用关心点击元素具体的尺寸大小，<img>元素的src属性可以不用设置。