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

Question

笔记：

答案会是这样的..是的..有规则和方法..这取决于收养机构的算法等。你可以按照这些（链接）等和你的简短描述。我不是在寻找任何算法或更多..

例如，如果一个a标签嵌套一个a 标签。chrome 浏览器重组 html 。类似的button标签。两者都是无效的 html 结构

我知道a和button标签都是交互元素。交互元素（a、按钮、输入等）与用户的活动相关。

从评论：

这个问题太宽泛了。

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

我认为每个浏览器都应该从某个地方以相同的方式工作......这意味着应该遵循一些基本规则或方法。如果有人发现类似的东西，请提及。

为什么我要找这个？

当我为客户工作时。我发现许多无效的 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>

图片来自控制台 google chrome 浏览器

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