• a标签嵌套a标签在实际项目开发中遇到的坑


    大家都知道HTML的嵌套规范,其中一个规范是块元素嵌套行内元素,块元素嵌套块元素,行内元素嵌套行内元素,行内元素不能嵌套块元素 

    其中需要注意的是行内元素嵌套行内元素a标签虽然是行内元素,但a标签不能嵌套a标签,以前没注意,结果不小心用了a标签嵌套a标签以后出现了下面的问题

    我想把二级显示变成三级显示,如下图

    红色框部分是我增加三级显示的html代码

    审查元素发现:我新增加的那个div(上图红色框的部分)中莫名会增加一个a元素

    这始终另我百思不得其解,后来和另外一个同事讨论测试以后发现是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

     

  • 相关阅读:
    委托
    Ajax TreeView绑定数据库(一)
    递归算法算出1,1,2,3,5.........(二)
    Ajax技术之深入浅出
    javasript读写xml
    递归算法求阶乘(一)
    关于.Net中的实际开发
    ASP.NET Form表单验证
    js 实现自动合并相同的行
    递归快速排序
  • 原文地址:https://www.cnblogs.com/tu-0718/p/6635212.html
Copyright © 2020-2023  润新知