双引号的浏览器编码问题：两段HTML代码行为差异解析

我正在学习字符编码，目前遇到了一个困惑。在Chrome和Firefox中观察到两种截然不同的行为：

第一段代码的表现 #

第一段HTML代码片段在页面加载完成后立即弹出it works：

<button onclick="myFunction("hello&quot;)&quot></button><script>alert('it works')</script><!-- &quot;)>click2</button>

第二段代码的表现 #

然而，第二段代码在页面加载时无任何输出，点击按钮时会抛出错误：SyntaxError: Unexpected end of input：

<button onclick="myFunction(&quot;hello&quot;)&quot></button><script>alert('it does not work')</script><!-- &quot;)>click1</button>

我无法理解为何两段仅myFunction输入字符串存在差异的代码，表现出截然不同的行为。具体来说，第一段代码中初始引号未编码（"hello"），而第二段中初始引号已编码（"hello"），恳请对此进行解释。

内容的提问来源于stack exchange，提问作者mrang