<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>标签是如何定位的?的主要内容,如果未能解决你的问题,请参考以下文章

使用area标签模仿a标签

使用area标签实现标签的嵌套

map+area标签

map,area标签

更改 HTML <area> 标签的背景颜色

HTML里面area标签的这个例子我搞不懂,求高手帮忙。。。