奇怪的 HTML 行为

Question

<a href='#' style='display: block;  border: 1px solid black; width: 208px; height: 210px;'>
    <a href='#'>My link</a> 
</a>

为什么当我在浏览器中打开这个html时，它会在带有黑色边框（即另一个链接）元素的框外显示"我的链接"按钮？

Answer 1

HTML 无效。一个a元素不能包含另一个a元素。您看到浏览器错误恢复正在运行。

给定您的代码作为输入，Chrome 中生成的 DOM 看起来（序列化回 HTML 时）如下所示：

<a href="#" style="display: block;  border: 1px solid black; width: 208px; height: 210px;">
    </a><a href="#">My link</a> 

我没有时间编写测试来证明这一点，但我怀疑用于恢复的逻辑是：

1. 此处不允许使用第二个a元素
2. 过早关闭第一个a元素，以便允许第二个元素
3. 我的链接
4. a元素的结尾
5. 未打开a元素的结束标记：丢弃它

Answer 2

如果你这样做，看起来很好：

<div style="display: block;  border: 1px solid black; width: 208px; height: 210px;">
<a href="#">My link</a> 
</div>