在项目中我们会碰到这种需求：即点击这个整个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标签实现标签的嵌套的更多相关文章

  1. 夺命雷公狗---DEDECMS----12dedecms全局标签的使用以及嵌套标签的使用

    在网站开发中,在很多页面可能会使用到同一个变量,比如路径网站信息等,所以我们可以用全局变量来使用. 默认的放在: 进去里面看下就会发现很多的常量都是在这里定义的: 我们在实际开发的时候可以将我们在多个 ...

  2. python 全栈开发，Day46(列表标签,表格标签,表单标签,css的引入方式,css选择器)

    一.列表标签 列表标签分为三种. 1.无序列表<ul>,无序列表中的每一项是<li> 英文单词解释如下: ul:unordered list,“无序列表”的意思. li:lis ...

  3. JSP常用标签——JSTL标签和EL表达式

    一.JSTL简介 1.什么是JSTL JSTL是Java中的一个定制标记库集.(这个标记库集不需要自己编写,可以直接使用) 2.为什么要使用JSTL 实现了JSP页面中的代码复用(基于标签库原理,重复 ...

  4. 我给女朋友讲编程html系列(3) --html中的超链接标签-a标签 和 框架frame与框架集frameset

    我们浏览网页的时候,当单击某段文字或图片时,就会打开一个新的网页,这里面就使用了超链接. 就比如下图是一个导航类网页,当你单击某个链接就会打开新的网页. 比如,我拿我的qq空间“金河访谈”举例,新建一 ...

  5. python 全栈开发，Day45(html介绍和head标签,body标签中相关标签)

    一.html介绍 1.web标准 web准备介绍: w3c:万维网联盟组织,用来制定web标准的机构(组织) web标准:制作网页遵循的规范 web准备规范的分类:结构标准.表现标准.行为标准. 结构 ...

  6. 前端 HTML body标签相关内容 常用标签 盒子标签 div

    盒子标签 div <div>可定义文档的分区 division的缩写 译:区 <div> 标签可以把文档分割为独立的.将他们进行分区 div在浏览器中,默认是不会增加任何的效果 ...

  7. JSP自定义标签（标签处理器 tld文件）

    标签的形式如下,标签处理器就是处理JSP页面中的标签的属性和内容,定义好之后就跟使用JSTL一样 <标签名 属性名="属性值" 属性名="属性值"> ...

  8. 前端基础-html 列表标签,表格标签,表单标签

    一.列表标签 1.ul(无序列表)标签 ul(unordered list)无序列表,ul下的子元素只能是li(list item),如下示例: <ul> <li>第一项< ...

  9. java-自定义标签&&JSTL标签库详解

    自定义标签是Jav aWeb的一部分非常重要的核心功能,我们之前就说过,JSP规范说的很清楚,就是Jsp页面中禁止编写一行Java代码,就是最好不要有Java脚本片段,下面就来看一下自定义标签的简介: ...

  10. javaEE(7)_自定义标签&JSTL标签(JSP Standard Tag Library)

    一.自定义标签简介 1.自定义标签主要用于移除Jsp页面中的java代码,jsp禁止出现一行java脚本. 2.使用自定义标签移除jsp页面中的java代码,只需要完成以下两个步骤: •编写一个实现T ...

随机推荐

  1. 基于CSS3图片悬停放大特效

    今天我们要来分享一款很酷的CSS3图片特效,这款图片特效可以利用鼠标滑过图片使其悬停放大,并使图片的周围出现发光的效果.配合黑色的背景,这款CSS3图片悬停放大效果显得更加立体大气,非常适合产品图片的 ...

  2. html5和css3打造一款创意404页面

    之前和网友分享一款HTML5可爱的404页面动画 很逗的机器人.今天要爱编程小编要再给大家带来一款html5和css3打造的创意404页面.一起看下效果图吧: 在线预览   源码下载 实现的代码. h ...

  3. dubbo_rpc原理

    alibaba有好几个分布式框架,主要有:进行远程调用(类似于RMI的这种远程调用)的(dubbo.hsf),jms消息服务(napoli.notify),KV数据库(tair)等.  这个框架/工具 ...

  4. Tomcat配置 设置启动参数,点击startup.bat启动

    catalina.batrem ---------------------------------------------------------------------------rem Set J ...

  5. Android-——多线程之Handler（转）

    Android--多线程之Handler 原文地址:http://www.cnblogs.com/shirley-1019/p/3557800.html 前言 Android的消息传递机制是另外一种形 ...

  6. windows宿主机ping不通Docker容器的解决办法

      网卡上有       docker is not a virtual machine, and you don't get access to the docker host via IP add ...

  7. 统一建模语言 UML

    目录 统一建模语言 UML UML定义了5类10种模型图 一用例图用于建立需求模型 二静态图主要描述系统的静态表示和关系包括类图包图对象图 三行为图描述系统动态模型和对象组成的交换关系包括状态图和活动 ...

  8. ES学习2

    1:es中的分页 一般搜索引擎中的分页都不会提供很大的页面查询,因为查询的页码越大,查询效率越低. 例子: 我们就先预想一下我们在搜索一个拥有5个主分片的索引.当我们请求第一页搜索的时 候,每个分片产 ...

  9. 常用HQL(Hibernate Query Language)查询

    查询一个对象(实体类必须有一个不带参数的构造方法) 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 @Test public void test01() ...

  10. 10 个很有用的高级 Git 命令（转）

    英文原文:10 Useful Advanced Git Commands 迄今,我已经使用Git很长一段时间了,考虑分享一些不管你是团队开发还是个人项目,都受用的高级git命令. 1. 输出最后一次提 ...