在项目中我们会碰到这种需求：即点击这个整个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. 在java web中获取该项目的根路径

    在jsp页面中: <% String path = application.getRealPath("").replace("\\","\\\\ ...

  2. Path类与Directory类与File类

    阅读目录 开始 Path 对路径 字符串进行操作 获得后缀 能合并路径 获取文件名 Directory和DirectoryInfo  对目录进行操作 判断目录是否存在 创建目录 删除目录 获取目录下所 ...

  3. linux查找系统中占用磁盘空间最大的文件

    Q:下午有一客户磁盘空间占用很大,使用df查看磁盘剩余空间很小了,客户想知道是哪些文件占满了文件. Q1:在Linux下如何查看系统占用磁盘空间最大的文件? Q2:在Linux下如何让文件夹下的文件让 ...

  4. Java学习理解路线图

    信息来自知乎网友 学习截图:来自开源力量

  5. [Javascript]右侧悬浮框

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  6. MongoDB（六）：使用C#代码连接并读取MongoDB数据库

    在上篇文章中,讲解了MongoDB的基本操作,包括增.删.改.查,但是这些操作都是在命令行模式下进行的,这篇文章中讲解如何使用C#程序连接到MongoDB数据库,并且读取里面的文档. 一.新建项目 新 ...

  7. Spring Boot 日志记录 SLF4J

    Spring Boot 日志记录 SLF4J 2016年01月12日 09:25:28 阅读数:54086 在开发中打印内容,使用 System.out.println() 和 Log4j 应当是人人 ...

  8. 登录centos虚拟机后显示-bash-4.1

    http://zhidao.baidu.com/link?url=KwpGOdwFw1oxnL71pvPlfRgbRL_IuQeYRzIYJjiDb2SnX0dQye5yUXqHAGSyuD6u2nD ...

  9. Hibernate查询_HQL_EJBQL_QBC_QBE

    查询按功能强弱可以分为以下几种:Native SQL > HQL > EJBQL > QBC > QBE 1.Native SQLNative SQL为数据库系统本身的SQL, ...

  10. 11个超棒的 jQuery 分步指引插件(转)

    当一个网站或者一个Web应用推出新功能时,为了让用户了解你的站点(或应用)如何操作,往往都会在站点(应用)中添加一个分步指引的效果.然而这样的效果,对于不懂原生JS的同学来说,是件很头痛的事情. 下面 ...