问题
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.
回答1:
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.
回答2:
Two things:
<a/>may be interpreted as an attempt for a self-closing anchor tag, so in fact a new anchor- Nested anchors are illegal, so the browser closes the first one before opening the second.
However, I have no proof of that, it's pretty much a guess.
More speculations: It is probably a browser-dependent behavior and related to why browsers automatically create <tbody> tags in tables. They just already know, if there is no <thead>, the website author intends to use <tbody>.
So once the self-closing <a/> appeared, it ended the unclosed anchor and started a new one. Though since <a> is meant to be a container, it can't be self-terminating. The anchor would then end according to XHTML rules, i.e. closing the contained tags before the containers.
This would require a lot of inquiries on both the HTML specifications and individual browser behavior.
来源：https://stackoverflow.com/questions/19737837/browser-automatically-adds-a-tag-without-javascript