a标签嵌套a标签在实际项目开发中遇到的坑
大家都知道HTML的嵌套规范,其中一个规范是块元素嵌套行内元素,块元素嵌套块元素,行内元素嵌套行内元素,行内元素不能嵌套块元素。
其中需要注意的是行内元素嵌套行内元素,a标签虽然是行内元素,但是a标签是不能嵌套a标签的,以前也没注意,结果不小心用了a标签嵌套a标签以后出现了以下的一个问题。
我想把二级显示变成三级显示,如下图
红色框部分是我增加三级显示的html代码
审查元素发现:我新增加的那个div(上图红色框的部分)莫名会增加一个a元素,这个增加的a元素是我新增加的div的父元素
这始终另我百思不得其解,后来和另外一个同事讨论测试以后发现是a标签嵌套a标签导致的。
解决方法:把下面红色框代码的父元素,也就是a标签,换成其它标签即可,比如div
注:P标签也是不能嵌套P标签的
至于为什么a标签不能嵌套a标签,网上的说法是:浏览器会自动添加结束符号,比如
你这样嵌套:<a href="www.baidu.com">谷歌<a href="www.weather.com.cn">中国天气网</a></a>
浏览器解析:<a href="www.baidu.com">谷歌</a><a href="www.weather.com.cn">中国天气网</a>
如果代码结构复杂,可能还会导致html层级错乱。
这里面还有一些平常可能不太清楚或者不知道的元素嵌套:http://blog.sina.com.cn/s/blog_12beb07f80102vfab.html
a标签嵌套a标签在实际项目开发中遇到的坑的更多相关文章
- IE浏览器下a标签嵌套img标签默认带有边框
最近写在线主页时发现IE浏览器下a标签嵌套img标签默认带有边框: 解决办法:img{border:0 none;} 注意,严格意义上0和none都要加上!
- 团队项目开发中,常见的版本控制有svn,git
团队项目开发中,常见的版本控制有svn,git
- 项目开发中的一些注意事项以及技巧总结 基于Repository模式设计项目架构—你可以参考的项目架构设计 Asp.Net Core中使用RSA加密 EF Core中的多对多映射如何实现? asp.net core下的如何给网站做安全设置 获取服务端https证书 Js异常捕获
项目开发中的一些注意事项以及技巧总结 1.jquery采用ajax向后端请求时,MVC框架并不能返回View的数据,也就是一般我们使用View().PartialView()等,只能返回json以 ...
- Angular 项目开发中父子组件传参
在项目开发中经常会遇到 组件之间传参的问题.今天总结下在使用angular的项目中父子组件传参的问题: 1.父组件向子组件传参: 然后在父组件中 然后在父组件的html中 然后就可以在子组件中使用了 ...
- 《Maven在Java项目开发中的应用》论文笔记(十七)
标题:Maven在Java项目开发中的应用 一.基本信息 时间:2019 来源:山西农业大学 关键词:Maven:Java Web:仓库:开发人员:极限编程; 二.研究内容 1.Maven 基本原理概 ...
- 炼金术(1): 识别项目开发中的ProtoType、Demo、MVP
软件开发是很分裂的,只有不断使用原则和规律,才能带来质量. 只要不是玩具性质的项目,项目应该可以大概划分为0-1,1-10,10-100,100-1000四个种重要阶段.其中,0-1是原型验证性的:1 ...
- 项目开发中的git简单使用
原文地址: https://www.zhuyilong.fun/tech/the-blog-git.html 示例远程仓库地址: https://github.com/zhu-longge/gitWo ...
- MyBatis 项目开发中是基于 XML 还是注解?
只要你对 MyBatis 有所认识和了解,想必知道 MyBatis 有两种 SQL 语句映射模式,一种是基于注解,一种是基于XML. 基于 XML <mapper namespace=" ...
- Java项目开发中实现分页的三种方式一篇包会
前言 Java项目开发中经常要用到分页功能,现在普遍使用SpringBoot进行快速开发,而数据层主要整合SpringDataJPA和MyBatis两种框架,这两种框架都提供了相应的分页工具,使用 ...
随机推荐
- vagrant 同时设置多个同步目录
修改Vagrantfile文件 如下所示 config.vm.synced_folder "./", "/var/www/pyxis2", owner: &qu ...
- spring-AOP之通知和顾问
通知和顾问都是切面的实现形式,其中通知可以完成对目标对象方法简单的织入功能. 而顾问包装了通知,可以让我们对通知实现更加精细化的管理,让我们可以指定具体的切入点. 通知分为前置通知,环绕通知及后置通知 ...
- linux中open函数使用
open函数用来打开一个设备,他返回的是一个整型变量,如果这个值等于-1,说明打开文件出现错误,如果为大于0的值 参考格式 if(fd=open("/dev/ttys0",O_RD ...
- h5-audio/video标签
音频/视频 基础用法 属性 事件 audio元素和video元素 <audio id="audio" src="./成都.mp3"></aud ...
- 史上最坑 idea 更改代码不生效
原来, 如果本地多次调整过系统时间,那么gradle 的缓存 会缓存 你的 上次编译时间再未来,那么你再怎么编译,都很难生效,即使删除了生成的字节码目录. 然后invalidate caches/re ...
- 学习日 day1
今天第一天开始写博客,希望以后能坚持,每天写,一是记录自己学习的历程,更重要的是复习每天学过的东西. 今天学习的内容:time模块的相关语法 导入方式 首行输入import time即可 time.t ...
- trap实现跳板机
第一节 跳板机实现原理(图例) 第2节 涉及到的知识点 命令:trap 拓展知识:进程与信号 trap 语法,作用,使用 [jeson@mage-jump-01 ~/]$ trap -l 1) S ...
- 关于深度学习中的batch_size
5.4.1 关于深度学习中的batch_size 举个例子: 例如,假设您有1050个训练样本,并且您希望设置batch_size等于100.该算法从训练数据集中获取前100个样本(从第1到第100个 ...
- gcc 与 g++的区别
原文: http://www.cnblogs.com/wb118115/p/5969775.html ------------------------------------------------- ...
- select2插件设置选中值并显示的问题
在select2中,要想设置指定值为选中状态并显示: $("#select2_Id").val("XXXXX").select2() 或者 var obj= $ ...