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. ここでは2 番目aの要素は使用できません
2. a最初の要素を途中で閉じて、2 番目の要素が許可されるようにする
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>