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