使用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标签实现标签的嵌套的更多相关文章
- 夺命雷公狗---DEDECMS----12dedecms全局标签的使用以及嵌套标签的使用
在网站开发中,在很多页面可能会使用到同一个变量,比如路径网站信息等,所以我们可以用全局变量来使用. 默认的放在: 进去里面看下就会发现很多的常量都是在这里定义的: 我们在实际开发的时候可以将我们在多个 ...
- python 全栈开发,Day46(列表标签,表格标签,表单标签,css的引入方式,css选择器)
一.列表标签 列表标签分为三种. 1.无序列表<ul>,无序列表中的每一项是<li> 英文单词解释如下: ul:unordered list,“无序列表”的意思. li:lis ...
- JSP常用标签——JSTL标签和EL表达式
一.JSTL简介 1.什么是JSTL JSTL是Java中的一个定制标记库集.(这个标记库集不需要自己编写,可以直接使用) 2.为什么要使用JSTL 实现了JSP页面中的代码复用(基于标签库原理,重复 ...
- 我给女朋友讲编程html系列(3) --html中的超链接标签-a标签 和 框架frame与框架集frameset
我们浏览网页的时候,当单击某段文字或图片时,就会打开一个新的网页,这里面就使用了超链接. 就比如下图是一个导航类网页,当你单击某个链接就会打开新的网页. 比如,我拿我的qq空间“金河访谈”举例,新建一 ...
- python 全栈开发,Day45(html介绍和head标签,body标签中相关标签)
一.html介绍 1.web标准 web准备介绍: w3c:万维网联盟组织,用来制定web标准的机构(组织) web标准:制作网页遵循的规范 web准备规范的分类:结构标准.表现标准.行为标准. 结构 ...
- 前端 HTML body标签相关内容 常用标签 盒子标签 div
盒子标签 div <div>可定义文档的分区 division的缩写 译:区 <div> 标签可以把文档分割为独立的.将他们进行分区 div在浏览器中,默认是不会增加任何的效果 ...
- JSP自定义标签(标签处理器 tld文件)
标签的形式如下,标签处理器就是处理JSP页面中的标签的属性和内容,定义好之后就跟使用JSTL一样 <标签名 属性名="属性值" 属性名="属性值"> ...
- 前端基础-html 列表标签,表格标签,表单标签
一.列表标签 1.ul(无序列表)标签 ul(unordered list)无序列表,ul下的子元素只能是li(list item),如下示例: <ul> <li>第一项< ...
- java-自定义标签&&JSTL标签库详解
自定义标签是Jav aWeb的一部分非常重要的核心功能,我们之前就说过,JSP规范说的很清楚,就是Jsp页面中禁止编写一行Java代码,就是最好不要有Java脚本片段,下面就来看一下自定义标签的简介: ...
- javaEE(7)_自定义标签&JSTL标签(JSP Standard Tag Library)
一.自定义标签简介 1.自定义标签主要用于移除Jsp页面中的java代码,jsp禁止出现一行java脚本. 2.使用自定义标签移除jsp页面中的java代码,只需要完成以下两个步骤: •编写一个实现T ...
随机推荐
- python学习笔记(20)--生成点拨【已放弃】
说明: 1. 本来是要写个脚本生成点拨rtf给讲师朗读的,不过实在是安装不上pywin32这个模块,虽然下载下来了whl文件,pip install 也能安装,但是导入pywin32.win32com ...
- Redis学习之(二)java运用
都1.首先,如果要在java运用的话,就需要引入对应的jar包 https://pan.baidu.com/s/1Hu1mUX5XoE_HmUEFlU3XBg 2.还有一点注意的就是,我在使用JDK8 ...
- 【C#/WPF】获取项目的根目录(Root Directory)
/// <summary> /// 获得项目的根路径 /// </summary> /// <returns></returns> public str ...
- Kettle转换或作业乱码
结果这样做还是乱码,其实这和
- JavaScrip——练习(做悬浮框)
通过HTML.CSS.JSP来实现 1.首先确定通过div嵌套来实现: 大的div里放默认显示的一层,限制其总层次高,设置超出部分隐藏 小的div里放鼠标移过去时显示的一层:3行1列的表格 1.1.什 ...
- Window 2008 R2组策略之一——组策略管理控制台
组策略管理在windows域管理中占有重要地位,本身也不是新的内容了.但微软在Windows2008中终于集成了一个非常好用的组策略管理工具——组策略管理控制台.并且为原有的组策略添加了新的元素.本文 ...
- TP5 display()
tp3.x $this->display(); tp5 return $this->fetch();
- parted创建LVM
parted创建LVM 把一块1T硬盘全部设为LVM #parted /dev/sdb >mklabel gpt 由于MBR分区表只支持2T硬盘,所以如果大于2T必须用GPT分区表 >pr ...
- 深入理解MongoDB的复合索引
更新时间:2018年03月26日 10:17:37 作者:Fundebug 我要评论 对于MongoDB的多键查询,创建复合索引可以有效提高性能.这篇文章主要给大家介绍了关于MongoDB复 ...
- mac安装IDEA
Mac上安装Java7 首先我们需要去oracle下载最新的jdk,笔者拿到的最新的版本是1.7.0_45-b18,这里没有什么好说的,直接下载安装即可,安装完毕后需要在.bash_profile或者 ...