<area>标签是如何定位的？
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了<area>标签是如何定位的？相关的知识，希望对你有一定的参考价值。
1，area标签：是在图像地图中划分作用区域的，通过该标签可以在图像地图中设定作用区域（又称为热点），这样当用户的鼠标移到指定的作用区域点击时，会自动链接到预先设定好的页面，来进行定位。2，area>标签：其划分的作用区域必须在图像地图的区域内，所以在用 <area> 标记划分区域前必须用html的另一个标记<map>来设定图像地图的作用区域，并为指定的图像地图设定名称。 参考技术A 这里有比较详细的介绍：http://www.nowamagic.net/html/html_MapArea.php
重点理解coords值代表什么意思，如何算坐标
使用area标签实现标签的嵌套
在项目中我们会碰到这种需求：即点击这个整个a标签跳转到一个页面，点击a里面的某个a再跳转到另一个页面。有人会说，这还不简单，直接a标签嵌套a标签，可是事实如此吗，看代码：
<a href="#">clickOne<a href="#">clickTwo</a></a>
此时的节点结构是a嵌套这a，但是经过页面解析以后：
嵌套关系成了兄弟关系。这是因为a标签不能去嵌套a标签，所以浏览器会默认的把他们解析为兄弟节点的关系。
那怎么才能嵌套呢，这个时候我们的主角area标签就出场了
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
span {
position: relative;
}
span area {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<a href="./../details/six.html">
clickOne
<span>
<area href="./../tabindex/index.html" alt="test">
clickTwo
</span>
</a>
</body>
</html>
area标签的href属性可以实现页面跳转，而且可以嵌套在任何元素里面（但是在最新版本的火狐浏览器里面不支持，仅支持谷歌浏览器）
以上是关于<area>标签是如何定位的？的主要内容，如果未能解决你的问题，请参考以下文章