[html] a标签可以再嵌套a标签吗？为什么？如果不行，那又想要嵌套效果怎么解决呢？

a标签不能嵌套a标签<a href="https://www.baidu.com/" class="parent">点击父级标签<a href="https://www.baidu.com/" target="_blank" class="child">点击子级标签</a>
</a>结果在浏览器上解析为,嵌套失败：<a href="https://www.baidu.com/" class="parent">点击父级标签</a>
<a href="https://www.baidu.com/" target="_blank" class="child">点击子级标签</a>那么实现嵌套效果（点击子标签时跳转，点击父标签时跳转）：1.和上面的布局一样,样式改变如下，给父元素加绝对定位：.parent {display: block;position: absolute;width: 200px;height: 100px;border: 1px solid blue;text-align: center;line-height: 100px;
}
.child {color: red;
}2.中间加一层object标签如下(大部分浏览器支持，但是还是存在兼容性)：<a href="https://www.baidu.com/" class="parent">点击父级标签<object data="" type=""><a href="https://www.baidu.com/" target="_blank" class="child">点击子级标签</a></object>
</a>3.还可以不用a标签（随便用什么标签，实现嵌套和跳转功能），加js如下：<div class="parent" id="parent">点击父级标签<a href="https://www.baidu.com/" target="_blank" rel="noopener noreferrer" class="child" id="child">点击子级标签</a>
</div>
<script>window.onload = () => {let parent = document.getElementById('parent');let child = document.getElementById('child');parent.onclick = () => {alert("在本页跳转到百度");window.location.href = 'https://www.baidu.com/';};child.onclick = (e) => {// 阻止事件默认的向上冒泡行为e.stopPropagation();alert("打开新页面跳转到百度");};};
</script>

个人简介

我是歌谣，欢迎和大家一起交流前后端知识。放弃很容易，
但坚持一定很酷。欢迎大家一起讨论

主目录

与歌谣一起通关前端面试题

[html] a标签可以再嵌套a标签吗？为什么？如果不行，那又想要嵌套效果怎么解决呢？相关推荐

【Groovy】xml 序列化 ( 使用 MarkupBuilder 生成 xml 数据 | 标签闭包下创建子标签 | 使用 MarkupBuilderHelper 添加 xml 注释 )
文章目录一.标签闭包下创建子标签二.使用 MarkupBuilderHelper 添加 xml 注释三.完整代码示例一.标签闭包下创建子标签在上一篇博客 [Groovy]xml 序列化 ( ...
网页解析：如何获得网页源码中嵌套的标签。
一:前言:网页源码中有很多嵌套的标签例如div标签嵌套如:bUTP<DIV>finally<div>aurora</div>@126.com</div> ...
[html] html中p标签内为何不能嵌套div标签？
[html] html中p标签内为何不能嵌套div标签? p 是行内 div 是块级个人简介我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持一定很酷.欢迎大家一起讨论主目录与歌谣一 ...
[html] p标签里面嵌套img标签会出现向上高3像素是什么原因？如何处理？
[html] p标签里面嵌套img标签会出现向上高3像素是什么原因?如何处理? 图片是内联元素,内联元素的对齐方式是按照文字基线对齐的,而不是文字底线对齐,所以会出现空隙.方法一:在 img 标签中使 ...
iframe标签中写html,html页面中嵌套iframe标签，我们可以用html中的iframe标签搞定
iframe嵌入网页的用法 iframe并不是很常用的,在标准的网页中非常少用.但是有朋友经常问到,下面我简单地介绍一下它的用法,你只要熟练掌握这些参数足矣. 也应该是框架的一种形式,它与不 ...
文本处理去除html标签,删除html标签得到纯文本可处理嵌套的标签
方法基本上来自THinkphp中的源码,但是被我修改了一下 /* *@Description:删除HTML标签,得到纯文本.可以处理嵌套的标签 * */ class deleteHtmlTags{ p ...
a标签嵌套img标签，结果a标签不能被img标签撑开
在控制台中可以看出img的宽度是22*22,a标签的宽度是22*16. (1)那么为什么a标签嵌套img标签,结果a标签不能被img标签撑开?? 答案1:img标签放在了a标签(inline模型)内部 ...
html中写几个li标签,ul标签和li标签 li标签里面能嵌套UL标签吗?
html中的li和ul是什么标签 ul li 是一个组合:是无序列表标签,在实际中用的非常多, 与之对应的是有序列表:ol li 一个无序列表: 咖啡茶牛奶咖啡牛奶茶咖啡牛奶茶 htm ...
java c标签 if有值_c标签 if else c标签总结
[b]STL标签用法关键字:JSTL标签........ 原来一直没有看过,我说过我是新手,但是好多资料上似乎也不重视 JSTL .我看项目源代码发现其中使用到了这个标签库,感觉其还真是方便,页面看 ...

[html] a标签可以再嵌套a标签吗？为什么？如果不行，那又想要嵌套效果怎么解决呢？

[html] a标签可以再嵌套a标签吗？为什么？如果不行，那又想要嵌套效果怎么解决呢？

个人简介

主目录

[html] a标签可以再嵌套a标签吗？为什么？如果不行，那又想要嵌套效果怎么解决呢？相关推荐

最新文章

热门文章