HTML 未按书面形式呈现：锚标记在父级之外重复 [重复]答案

【问题标题】：HTML not rendering as written: Anchor tag being duplicated outside parent [duplicate]HTML 未按书面形式呈现：锚标记在父级之外重复 [重复]
【发布时间】：2021-10-25 01:52:11
【问题描述】：

我遇到了无法解释的渲染问题。我希望有人能解释一下。

在其最简化的形式中，我有以下 HTML：

<html>  
    <body>
        <a id="anchor1" href="#">
            <div>
                <a id="anchor2" href="#">Edit</a>
            </div>
        </a>
    </body>
</html>

当它在浏览器中实际呈现时，结果是这样的：

<html>  
    <body>
        <a id="anchor1" href="#"> </a>
            <div>
                <a id="anchor1" href="#"> </a>
                <a id="anchor2" href="#">Edit</a>
            </div>
        </a>
    </body>
</html>

注意#anchor1 调整：

它已在原来的位置关闭，不再环绕 div 标签。
它已被复制为 div 标签内的独立元素。

如果我删除最里面的锚标记 (#anchor2)，则不会出现渲染问题。

有人可以解释一下这里发生了什么吗？我之前已经能够将 div 标签包装在锚标签中，但由于某种原因，HTML 的这种但有意想不到的结果。我已经在 Chrome、Safari、Firefox、Edge 中进行了审查...我什至尝试过 Codepen。

【问题讨论】：

将您的标记转储到validator.w3.org/nu/#textarea：错误：开始标记可见但已打开相同类型的元素。从第 5 行第 17 列开始；到第 5 行第 41 列 //// 错误：结束标记 a 违反嵌套规则。从第 5 行第 17 列开始；到第 5 行第 41 列编辑。在简单的英语中，<a><a>foobar</a></a> 是非法的，希望有明显的原因。如果我点击那里，这有什么意义？点击了哪个<a>？浏览器会努力修复无效的 HTML 解析，因此这些浏览器正在做正确的事情。

标签： html

【解决方案1】：

您不能在另一个 <a> 标记中包含 <a> 标记。它不是有效的 HTML。浏览器会尽其所能，但可能不是您想要的。

解决方案：不要那样做。

【讨论】：

【解决方案2】：

不幸的是，您不能在另一个锚点 <a> 标记内有一个锚点 <a> 标记。

当用户点击浏览器时，浏览器不知道点击的是哪个，因此浏览器会尝试纠正您的错误实现并关闭第一个锚点<a> 标记，进而对html 造成破坏。

【讨论】：