javascript - 浏览器如何重构无效的html结构，有什么规则或方法吗？

Question

注:
答案将是这样的..是的..有规则和方法..这取决于采用代理算法等。您可以按照这些(链接)等以及您的简短描述进行操作。我不是在寻找任何算法或更多..
来自示例 如果 a标签嵌套 a标签。 chrome 浏览器重构 html 。类似的 button标签 。两者都是无效的 html 结构
我知道a和 button标签都是交互元素。交互元素(a、按钮、输入等)与用户的事件有关。
来自评论:
这个问题太笼统了。

仅回答以下示例代码或场景。

我认为每个浏览器都应该从某个地方以相同的方式工作......这意味着应该遵循一些基本规则或方法。如果有人发现类似的东西，请提及。
我为什么要找这个？
当我为客户工作时。我发现许多无效的 html 结构。许多类型的html结构。有时我需要重新设计无效的 html 结构。我想我需要了解浏览器重组的概念以进行进一步的 Web 开发..
关注这些问题 Q1和 Q2

 let aTag = document.querySelectorAll('a')
    let buttonTag = document.querySelectorAll('button')
   
 console.log('===a tag===')
    aTag.forEach(function(item){
         console.log(item)
    })
     console.log('===button tag===')

      buttonTag.forEach(function(item){
         console.log(item)
    })

 .card{
      display: flex;
      flex-direction: column;
      padding: 10px;
      border: 1px solid slateblue;
       width: 200px;
      text-align: center;
 }

<a href="" class="parent a-tag">
    <div class="card">
        <h4>Title</h4>
        <p>Paragraph</p>
        <button>Add to Cart</button> 
        <a href="" class="child a-tag">Compare Product</a>
        
    </div>
</a>


<button>
    <a href="">A Tag</a>
   <button>Button</button>
</button>

图片来自控制台谷歌浏览器

Answer 1

首先，您可以阅读规范并尝试找到您感兴趣的案例:
https://html.spec.whatwg.org/multipage/parsing.html#parsing-main-inbody
在理想世界中，所有浏览器都应该实现规范算法中描述的如何处理不同的情况。 但是规范不能涵盖所有情况，因为我们所有人都可能犯错误/误解等，所以我建议查看 Chromium 源代码，您可以在其中找到规范未涵盖但特定浏览引擎可能涵盖的一些怪异情况的解决方案:
https://source.chromium.org/chromium/chromium/src/+/master:third_party/blink/renderer/core/html/parser/html_tree_builder.cc;l=688;drc=fb051a0f9d7f7b5695e9ba33c30d174702eae7d0;bpv=0;bpt=1