浏览器自动添加没有JavaScript的< a>标签 [英] Browser automatically adds <a>-Tag without JavaScript
问题描述
我刚刚在一个比较大的网站上遇到了一个问题，这个问题比我在下面的例子中导致我调查了几个小时，直到找到错误的原因。我的问题是，浏览器自动产生了< a> -Tags。
'b
$ b
< a href =＃>链接< a />
<！ - 一些代码魔法;过了一段时间，你有类似的东西： - >
< div>不是链接< / div>
当然这个问题在这种情况下非常明显。但是，如果页面稍微复杂一些，并且您没有注意到上面的< a> - 标签的错误关闭，那么您的时间就会很糟糕。
为什么？那么，这很容易显示。您可能期望接下来的所有内容都是可点击的。事实确实如此。但是 - 这是我不知道的 - 浏览器在加载页面后添加< a> -Tags。这意味着，在检查员（在Chrome和Firefox中测试）中，您会发现如下所示：
< a href = ＃ > LINK< / A>
< a>
<！ - 一些代码魔法;过了一段时间，你有类似的东西： - >
< div>不是链接< / div>
< / a>
有意思，是吧？浏览器在第一行中正确关闭< a> -Tag，并在div周围打开一个新标签。你可能会猜测我已经开始调试页面上的所有JavaScript（有很多），因为我认为在从服务器获取页面之后，JavaScript是唯一改变代码的东西。
好吧，现在我知道，它不是唯一的东西。在试图调试这个问题时，我还没有在互联网上发现任何关于它的信息，所以我想我会和未来的人有完全相同的问题分享我的知识（我们都知道：他很快就会在那里）。
但是，还有一个未解答的问题：为什么？我无法看到浏览器应该自动修复此问题并创建新代码的原因。这对我来说没有意义。
实际的问题应该是，你为什么要故意为浏览器提供无效的HTML？
但回到主题。从历史上看，HTML一直是一种生涩的标记语言。没有DOM概念的人会写HTML，例如：
< B>< U> hi，< / B>我是否应加下划线？< / U>
以上显然无效的HTML。但是，如果您使用无效HTML提供浏览器，浏览器将不会呕吐。它会尝试以它认为的方式恢复文档。
DOM中的元素（这是检查员向您显示的内容）只能有一个父元素。因此，逻辑上，< U> 必须在< B> 关闭之前关闭。但是< U> 并没有被作者关闭，所以浏览器假定文本的其余部分也被下划线。因此，无效的HTML被恢复到大约下面的DOM结构：
< B>< U> hi，< / U>< / B>< U>我是否应加下划线？< / U>
在您的特定情况下，<$ c $
< a>< / code>标签不能在HTML中自行关闭，一个> ...< A />
< a> 元素而没有关闭第一个元素。它很可能在整个文档中产生锚元素，直到在恢复过程中遇到必要的关闭< / a> 的元素。
I just ran into a problem on a bit bigger site than in the example below which caused me to investigate for several hours until I found the cause of the bug. My problem was, that the Browser automatically spawned <a>-Tags for no reason.
Let's say I've some HTML code that looks like this:
<a href="#">Link<a/>
<!-- Some code-magic; after a while you have something like: -->
<div>Not a link</div>
Of course the problem is pretty obvious in this case. But if the page is a bit more complex and you don't notice the wrong close of the <a>-Tag above, you're gonna have a bad time.
Why? Well, that's easy to show. You might expect that everything that follows is clickable. That is by fact true. But - and that's a thing that I did not know - the browser adds <a>-Tags after the page is loaded. Which means, in the inspector (tested in Chrome and Firefox) you'll find something like this:
<a href="#">Link</a>
<a>
<!-- Some code-magic; after a while you have something like: -->
<div>Not a link</div>
</a>
Interesting, huh? The browser closes the <a>-Tag properly on the first line and opens a new one around the div. You might can guess that I've started debugging all JavaScripts on the page (an there were many) because I thought JavaScript is the only thing that changes the code after the page was fetched from the server.
Well, now I know, it's not the only thing. While trying to debug this problem I haven't found any information on the internet about it so I thought I'll share my knowledge with the guy having the exact same problem in the future (and we all know: He'll be there soon).
But, there is still one unanswered question: Why? I can't see a reason why the Browser should autofix this and create new tags. That doesn't make sense to me.
The actual question should be, why would you intentionally feed the browser with invalid HTML?
But back on-topic. Historically, HTML has been a jerky markup language. People without notion of DOM would write HTML such as:
<B><U>hi, </B> shall I be underlined or not?</U>
The above is clearly invalid HTML. However, the browser won't vomit if you feed it with invalid HTML. It will attempt to recover the document in the way it thinks the author intended.
Elements in the DOM (which is what the inspector shows you) can only have one parent element. So logically, the <U> must be closed before <B> is closed. But <U> hasn't been closed by the author, so the browser assumes the rest of the text shall too be underlined. Hence, the invalid HTML is recovered to approximately the following DOM structure:
<B><U>hi, </U></B><U> shall I be underlined or not?</U>
And in your specific case, <a> tags cannot be self-closed in HTML, so:
<a>...<a/>
The / is interpreted as syntactic sugar and the browser thinks you've opened a second <a> element without closing the first. It will most likely spawn the anchor element through the whole document until encountering the necessary closing </a>'s in the recover process.
这篇关于浏览器自动添加没有JavaScript的< a>标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
