HTML代码无法正常运行出现报错标红 请帮忙排查代码存在的问题

存在的语法问题及报错原因 #

• 标签使用及引号错误：是audio、video、picture等媒体元素的专属子标签，不允许单独在页面中使用；同时两处的srcset属性末尾错用了中文右引号”，还附带了无效的/hr2字符，完全不符合标签语法规范，是编辑器标红的主要原因之一。
• 标题标签嵌套错误：

  是块级标题元素，规范不允许在内部嵌套另一个块级

  标签，违反HTML内容模型规则。

• 标签结构错误：超链接属性名写错为hret，正确应为href；同时标签没有补全结束的>符号，也没有对应的</a>闭合标签，标签结构断裂。
• 属性写法不规范：width =\"400\"中等号两侧存在多余空格，虽部分浏览器可兼容，但不符合HTML标准写法，容易触发语法检查告警。

修复后的完整代码 #

<p>
  Mary defeated Serena Williams in the U.S. 
  Open women's singles final and became 
  <strong>first Canadian to win a tennis Grand Slam title.</strong>
</p>
<br>
<hr />
<h2>Mary Wins U.S. Open</h2>
<br>
<p> Mary defeated Serena Williams in the U.S. 
    Open women's singles final and became <strong>first Canadian to win a tennis Grand Slam title.</strong>
</p>
<br>
<img src="Mary.jpg" alt="photo of Mary" width="400" height="300"/>
<br>
<p>Photo by  Elsa/Getty Images 
  <a href="https://www.cbc.ca/sports/tennis/us-open-tennis-final-women-andreescu-1.5274870">查看相关报道</a>
</p>
<hr>

如果不需要超链接显示文本，也可以删除<a>和</a>中间的内容。

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