奇怪的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>