>[danger]p标签内嵌一个p标签时浏览器显示的是同级的关系，且会出现3个p标签，a标签内嵌a标签时浏览器显示的是同级的关系，不再是父子级关系但是不会出现3个a标签 原理： >* 内联元素：可以嵌套内联元素，不可以嵌套块级元素 >* 块级元素：可以嵌套块级元素，或者是内联元素 >* 部分块级元素：不能嵌套块级元素，只能嵌套内联元素，如：p、h1~h6 ``` <a target="_self" href="www.xxx.com"> <a target="_blank" href="www.xxx.com"> ``` [a标签嵌套解决方案](https://www.xyhtml5.com/22932.html) ## 问题 在实际网页布局之中，我们有时候需要一整块点击区域中间还要有部分按钮点击，也就是需要a标签嵌套a标签，如下： ~~~ <!-- a标签进行嵌套的时候 --> <a href="#炫H5">outerA <a href="#炫H5inner">innerA</a> </a> ~~~ 但是我们会发现，这种嵌套，浏览器会直接错误解析，解析结果如下： ~~~ <!-- 而浏览器则会解析成 -- > <a href="#炫H5">outerA</a> <a href="#炫H5inner">innerA</a> ~~~ 那么针对这种情况如何解决呢？ ## 方案一：使用object标签进行嵌套 例如我么如下写，就不会错误解析了！ ~~~ <a href="#炫H5"> outerA <object><a href="#炫H5inner">innerA</a></object> </a> ~~~ 这种写法的典型应用最多的是列表整个需要点击，列表里面有电话号码需要单独点击拨打！ ~~~ <a href="https://www.xyhtml5.com/post/a_qiantaofangan/%E8%B7%B3%E8%BD%AC%E9%A1%B5%E9%9D%A2"> 列表内容 <object><a href="tel:694434565">拨打电话</a></object> </a> ~~~ ## 方案二：使用定位方式 这种方式是迫不得已的方式，思路就是我们不用嵌套。直接代码如下书写： ~~~ <a href="#炫H5">outerA</a> <a href="#炫H5inner">innerA</a> ~~~ 外层的炫H5通过设置display:inline-block，以及绝对定位，将其放在里层a标签的位置。然后通过调整里层a标签及外层a的z-index大小，使得鼠标能正确选中a标签； 这种方法的核心思想就是通过**定位**来模拟实现我们想要达到的效果！ ## 方案三：使用 HTML的 标签来实现 记得在学校学校网页制作的时候，用的是dreamweaver，dreamweaver中可以使用图片热区来实现图片的点击效果。没错，我们可以使用热区来实现a标签的嵌套效果啊！ area标签很久没有使用了，普及一下基础知识： area可以指定shape及coords。 > 如果 shape 属性设置为 “rect”，则该值规定矩形左上角和右下角的坐标。（x1,y1,x2,y2） > > 如果 shape 属性设置为 “circ”，则该值规定圆心的坐标和半径。（x,y,radius） > > 如果 shape 属性设置为 > “poly”，则该值规定多边形各顶点的值。如果第一个坐标和最后一个坐标不一致，那么为了关闭多边形，浏览器必须添加最后一对坐标。（x1,y1,x2,y2,..,xn,yn） area和map要配合使用，可以在图片上面指定部分热区，也可以在列表中指定热区。 假如我们运用area和map在列表中a标签内部指定热区，就可以实现类似我们上面a标签嵌套的效果了！ 还是上面的例子，我们可以如下书写： ~~~ <a href="#炫H5"> outerA <map> <area shape="rect" coords="0,0,200,21" href="https://www.xyhtml5.com/post/a_qiantaofangan/炫H5inner" > </map> </a> ~~~ ## 方案四：使用span等标签加js事件来代替a标签 当然我们也可以用span，标签等替代a标签，只不过要多写一些js跳转代码了，通过js来实现a标签所能实现的效果！