javascript - 浏览器自动添加 <a>-标签，无需 JavaScript

Question

我刚刚在比下面的示例更大的网站上遇到了一个问题，这导致我调查了几个小时，直到找到错误的原因。我的问题是，浏览器自动生成 <a> -无缘无故的标签。

假设我有一些如下所示的 HTML 代码:

<a href="#">Link<a/>
<!-- Some code-magic; after a while you have something like: -->
<div>Not a link</div>

当然，在这种情况下问题非常明显。但是，如果页面稍微复杂一点，并且您没有注意到 <a> 的错误关闭， -上面的标签，你会过得很糟糕的。

为什么？嗯，这很容易展示。您可能期望接下来的所有内容都是可点击的。这确实是事实。但是 - 这是我不知道的事情 - 浏览器添加 <a> - 页面加载后的标签。这意味着，在检查器(在 Chrome 和 Firefox 中测试)中，您会发现如下内容:

<a href="#">Link</a>
<a>
    <!-- Some code-magic; after a while you have something like: -->
    <div>Not a link</div>
</a>

有趣吧？浏览器关闭<a> - 在第一行正确标记并在 div 周围打开一个新行。您可能会猜到我已经开始调试页面上的所有 JavaScript(有很多)，因为我认为 JavaScript 是从服务器获取页面后唯一更改代码的东西。

好吧，现在我知道，这不是唯一的事情。在尝试调试这个问题时，我没有在互联网上找到任何有关它的信息，所以我想我会与将来遇到完全相同问题的人分享我的知识(我们都知道:他很快就会到达那里) )。

但是，仍然有一个问题没有得到解答:为什么？我看不出浏览器应该自动修复此问题并创建新标签的原因。这对我来说没有意义。

Answer 1

真正的问题应该是，为什么你要故意向浏览器提供无效的 HTML？

回到主题。从历史上看，HTML 一直是一种不稳定的标记语言。没有 DOM 概念的人会编写 HTML，例如:

<B><U>hi, </B> shall I be underlined or not?</U>

上面的内容显然是无效的 HTML。但是，如果您向浏览器提供无效的 HTML，浏览器不会抛出错误。它将尝试按照其认为作者意图的方式恢复文档。

DOM 中的元素(检查器向您显示的内容)只能有一个父元素。所以从逻辑上讲，<U>必须在 <B> 之前关闭关闭了。但是<U>作者尚未关闭，因此浏览器假定文本的其余部分也应带有下划线。因此，无效的 HTML 被恢复为大约以下 DOM 结构:

<B><U>hi, </U></B><U> shall I be underlined or not?</U>

<小时/>

在您的具体情况下，<a>标签在 HTML 中不能自闭合，因此:

<a>...<a/>

/被解释为语法糖，浏览器认为您已经打开了第二个 <a>元素而不关闭第一个。它很可能会在整个文档中生成 anchor 元素，直到遇到必要的结束 </a>正在恢复过程中。