为什么<a> inside </a> <ul> <a> inside </a> <a> behave so strangely?

Question

In the project I work on, I came across a <ul> tag which was nested inside an <a> tag (the click event was handled by JavaScript). I tried adding another <a> tag inside in the unnumbered list and something very strange happened.

Consider the following HTML code:

<a test="foo">
  <ul>
    <li>
      Before link
      <a>Link</a>
      After link
    </li>
  </ul>
</a>

When you inspect it browser tools, you will see that this is actually rendered by the browser like this:

<ul>实际上并未包含在<a>中。 <a test="foo">标签有三个副本，一个空副本位于<ul>之前，另一个空白副本作为<ul>的直接子项，另一个副本包含{{1}的内容元素，直到预期的<li>。

我在Chrome和Firefox中对此进行了测试，两种浏览器都出现了同样的情况。

这里发生了什么？

Answer 1

您的HTML无效。 Use a validator。锚不允许成为其他锚的后代。

浏览器正在尝试从您的错误中恢复。