你真的懂标签如何嵌套？

前言

有类似掘金首页菜单栏这样一个需求：hover之后出来一个标签列表，你的前同事是使用js脚本去实现页面跳转的，但是现在要求直接使用链接实现跳转；之前的旧的html是这样的：

<ul>
    <li>
        后端
        <div>
            <span>后端</span>
            <span>Java</span>
            <span>算法</span>
        </div>
    </li>
</ul>

a标签替换脚本

首先将所有的路由跳转脚本改为a标签实现跳转，然后会发现根据我们现在这样的hmtl结构，会出现a标签嵌套a标签的情况，然后浏览器会解析为并列的两个a标签；例如：

<a href="#a1">
    yyyyyy
   <a href="#a2">xxxxxxx</a>
</a>

会被解析为：

<a href="#a1">
    yyyyyy
</a>
<a href="#a2">xxxxxxx</a>

这显然就需要修改html结构了，那么样式也随之需要更改；而产品经理这边催的很紧，需要马上改好，当天发布

怎么办呢？

显然只能硬着头皮将a标签嵌套a标签，怎么做呢？

解决方案：使用object嵌套

<a href="#a1">
    yyyyyy
    <object>
        <a href="#a2">xxxxxxx</a>
    </object>
</a>

由这个问题引出了我们今天要讲的主题：标签嵌套问题

标签嵌套问题

html有一套标签嵌套规则：

• 一般情况下a标签不能嵌套a标签
• p标签不能嵌套块元素，我们看一下下面这个例子：

<p>
  before
  <div>123123</div>
  after
</p>

请你猜一猜页面会解析成什么样子呢？

答案是：解析成了两个p标签+一个div

<p>
  before
</p>
<div>123123</div>
after
<p></p>

同上，如果p标签包含一个p标签则会解析成3个p标签了，所以我们需要注意p标签里面只放文本和行内元素

• ul里面要放li，那么放div可以吗？是可以的，放div没有任何解析问题，但是不建议这样做，因为它破坏了ul的语义
• table里面也只能放置和表格有关的标签
  总结一下：不按照规则嵌套标签可能会导致以下三种情况：

1. 可以正常显示但语义混乱，例如ul里面放置div子元素
2. 嵌套标签解析为兄弟节点，例如a标签嵌套a标签
3. 嵌套标签解析为兄弟节点之后节点还增加了额外标签，例如p嵌套div的情况
   我们在编码的时候需要牢记这些规则，尽量写出可扩张性强的html结构，像上面解决a标签嵌套a标签就是一个反面案例

原文链接：https://juejin.cn/post/7100341722692976648/