html中<a>标签不能嵌套的问题

        今天是周一,上周末双休,好像有节后综合症,一整天没精神,身体没劲!发誓以后不要向上周一样过周末了!言归正传,刚毕业从事前端工程师一枚,每天在项目中总会遇到很多很多的问题!遇到小的问题,我能轻松解决,很有成就感,但是遇到自己不能解决的问题,再加上今天什么都不想做的丧情绪,一个小时也没能解决问题!

        今天遇到的问题是移动端整个的<div>是一个<a>标签,就是说点击整个div就会发生跳转,直接上源代码!
            <div class="main">
                <a href="introduction.html" target="_blank">
                    <dl>
                        <dt>
                            <img src="../images/01.jpg">
                        </dt>
                        <dd>
                            <object><a href="#" target="_blank" class="main-title">网红软木拖鞋海边沙滩度假本命年蝴蝶结拖鞋女平底外传夏</a></object>
                            <object><a href="#" target="_blank" class="main-shop"><i class="am-icon-gift am-icon-fw"></i>斑马科技发布</a></object>
                            <p class="main-num">已参团:<span>0件</span></p>
                            <div class="main-price"><span class="main-tuan">¥69</span><span><del>¥79</del></span></div>
                            <object><a href="introduction.html" target="_blank" class="main-can">去参团&nbsp;></a></object>
                        </dd>
                    </dl>
                </a>
            <div class="clear"></div>
         </div>

最外层的div嵌套着<a>标签,但是浏览器解析时结构却乱了。多出了很多的  <a href="introduction.html" target="_blank"></a>并且最外层的<a>标签也没有嵌套进去东西,所以 也没能实现点击整个div跳转的需求,于是网上查了一下,找到了问题及解决方法!最根本的原因是因为<a>标签不能嵌套<a>标签,解决方法是在里层的<a>标签外面添加一个<object></object>标签。

参考博客网址:https://www.cnblogs.com/tu-0718/p/6635212.htmlhttps://www.cnblogs.com/tu-0718/p/6635212.html

还有一些需要注意的嵌套:

1.<a>标签最好不要嵌套块级元素,可以嵌套内联元素。但是不能嵌套<a>标签和<input>之类的标签!

2.ul和ol的子元素不能是别的元素,只能是li,不能是别的元素,比如<div>,但是li中可以是div,要不然在ie6和7下回把非li解析到li的内部。这个切记没有办法修复!

3.p标签不能嵌套块级元素甚至不能嵌套p元素,只能嵌套内联元素,不然对p嵌套的块级元素设置css不起作用。

4..button里面不要嵌套a标签,不然在js里面会有两个事件,还有就是button里面放img要记得给图片添加alt属性.

5.dt标签里面不能嵌套块级元素,只能嵌套内联元素。但是dd可以嵌套块级元素。

总结:一直以为html是最简单的语言了,却没想到还是会掉坑!也会觉得为什么总是自己会遇到这么多的问题呢?但是后来知道遇到的问题越多,进步就会越大!那就让暴风雨来得更猛烈些吧!学无止境,简单的东西也有深刻的道理!加油!

扫描二维码关注公众号,回复: 2751149 查看本文章

猜你喜欢

转载自blog.csdn.net/jyluwen/article/details/81633663
今日推荐