大家都知道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标签在实际项目开发中遇到的坑的更多相关文章

  1. IE浏览器下a标签嵌套img标签默认带有边框

    最近写在线主页时发现IE浏览器下a标签嵌套img标签默认带有边框: 解决办法:img{border:0 none;} 注意,严格意义上0和none都要加上!

  2. 团队项目开发中，常见的版本控制有svn，git

    团队项目开发中,常见的版本控制有svn,git

  3. 项目开发中的一些注意事项以及技巧总结 基于Repository模式设计项目架构—你可以参考的项目架构设计 Asp.Net Core中使用RSA加密 EF Core中的多对多映射如何实现？ asp.net core下的如何给网站做安全设置 获取服务端https证书 Js异常捕获

    项目开发中的一些注意事项以及技巧总结   1.jquery采用ajax向后端请求时,MVC框架并不能返回View的数据,也就是一般我们使用View().PartialView()等,只能返回json以 ...

  4. Angular 项目开发中父子组件传参

    在项目开发中经常会遇到 组件之间传参的问题.今天总结下在使用angular的项目中父子组件传参的问题: 1.父组件向子组件传参: 然后在父组件中 然后在父组件的html中 然后就可以在子组件中使用了 ...

  5. 《Maven在Java项目开发中的应用》论文笔记（十七）

    标题:Maven在Java项目开发中的应用 一.基本信息 时间:2019 来源:山西农业大学 关键词:Maven:Java Web:仓库:开发人员:极限编程; 二.研究内容 1.Maven 基本原理概 ...

  6. 炼金术(1): 识别项目开发中的ProtoType、Demo、MVP

    软件开发是很分裂的,只有不断使用原则和规律,才能带来质量. 只要不是玩具性质的项目,项目应该可以大概划分为0-1,1-10,10-100,100-1000四个种重要阶段.其中,0-1是原型验证性的:1 ...

  7. 项目开发中的git简单使用

    原文地址: https://www.zhuyilong.fun/tech/the-blog-git.html 示例远程仓库地址: https://github.com/zhu-longge/gitWo ...

  8. MyBatis 项目开发中是基于 XML 还是注解？

    只要你对 MyBatis 有所认识和了解,想必知道 MyBatis 有两种 SQL 语句映射模式,一种是基于注解,一种是基于XML. 基于 XML <mapper namespace=" ...

  9. Java项目开发中实现分页的三种方式一篇包会

    前言   Java项目开发中经常要用到分页功能,现在普遍使用SpringBoot进行快速开发,而数据层主要整合SpringDataJPA和MyBatis两种框架,这两种框架都提供了相应的分页工具,使用 ...

随机推荐

  1. MySQL中的sort_buffer_size参数大小的设置问题

    看到sort_buffer_size这个参数(connect级别的参数,MySQL5.7,默认值是1048576字节,也就是1MB)的默认值这么小,想着是不是可以调大一点,反正内存动不动几十个GB的, ...

  2. DML DDL DCL

    转自:https://blog.csdn.net/level_level/article/details/4248685

  3. java应用健康检查

    本文主要针对自己手写shell监控应用状态,有可系统解决方案的,比如K8S,可以略过 #!/bin/sh#health_check.sh count=`ps -ef | grep test.jar | ...

  4. Windows Server 2008中使用计划任务定时执行BAT bat进行PHP脚本的执行

    Windows Server 2008中使用计划任务定时执行BAT bat进行PHP脚本的执行 2016年01月03日 17:36:00 持之以恒 阅读数:5520 标签: windows定时任务.b ...

  5. 微信小程序--数据存储

    对本地缓存数据操作分为同步和异步两种.同步方法有成功回调函数,表示数 据处理成功后的操作.下面是小程序提供本地缓存操作接口: 以Sync结尾都是同步方法.同步方法和异步方法的区别是: 同步方法会堵塞当 ...

  6. 1. Go安装

    和任何语言一样,开始使用之前都要先安装好他的开发/编译环境. Go是由谷歌开发的一个开源的编译型的静态语言,编译型语言最大的优点就是效率高运行速度快. Go语言支持Linux,Windows,Mac等 ...

  7. [leetcode]77. Combinations组合

    Given two integers n and k, return all possible combinations of k numbers out of 1 ... n. Example: I ...

  8. 字符串转码中文乱码问题的进一步理解 UTF-8 GBK转码

    首先 要明确指出一点: 编码方式是针对字符串转换之后的字节数组的,字符串并没有编码方式的概念,因为字符串不管是在什么编码页面下他只是一个对象,他只有字符的概念,不管页面编码方式是什么,他始终都是那几个 ...

  9. js函数内未声明变量

    <script> function test(){ testd = "Hello"; } test(); alert(testd); </script> 当 ...

  10. java 远程debug

    在启动jar包添加如下参数16091是端口 java -Xdebug -Xrunjdwp:transport=dt_socket,address=16091,server=y,suspend=n -j ...