HTML 代码产生语法错误但仍然有效； “正确”的代码不答案

【问题标题】：HTML code generates syntax error but still works; "correct" code doesn'tHTML 代码产生语法错误但仍然有效； “正确”的代码不
【发布时间】：2018-10-31 01:34:45
【问题描述】：

一位朋友（和我一样，HTML 新手）分享了这段代码，用于在网页上嵌入来自摄像头的实时视频流：

<iframe scrolling="no" width="640" height="480"
<img src = http://10.0.0.172:8086/stream_simple.html"
stream=BoardOne" frameborder="0" allowfullscreen>
</iframe>

这对我来说显然是错误的（更不用说 URL 和“BoardOne”之前缺少的开放引号）。事实上，PHPStorm 会在“480”之后立即标记“标签开始未关闭”错误。未关闭的img 标签在iframe 属性的中间突然出现，不能工作，可以吗？

但我的朋友告诉我确实如此。更糟糕的是，当我尝试将其纠正为我认为正确的内容时，他告诉我它不起作用。这是我的版本：

<iframe scrolling="no" width="640" height="480"
stream="BoardOne" frameborder="0" allowfullscreen>
    <img src="http://10.0.0.172:8086/stream_simple.html"/>
</iframe>

再说一遍，我是新手：谁能解释一下我朋友的代码是如何工作的，而他却声称我的代码不行？

【问题讨论】：

标签： html image embedding

【解决方案1】：

它“有效”取决于您对“有效”的定义。

iframe 应该具有src 属性，并且该 URL 的内容将呈现到 <iframe> 元素中。 <iframe> 元素的内容只是在浏览器不理解 <iframe> 是什么时出现的后备内容。

在第一种情况下，HTML 几乎是垃圾，因此您取决于浏览器如何真正宽松地解释它。看起来它在很大程度上忽略了其中的部分 <img 标记，并将 src 属性与 iframe 相关联，因此它具有该属性并显示内容。

在第二种语法正确的情况下，<iframe> 被正确理解为 iframe，<img> 被正确理解为它的后备内容，因此它不会显示，因为您的浏览器可以理解 iframe。而且您已将src 属性移动为<img> 的属性，因此iframe 缺少src 并且不显示任何内容。

【讨论】：

鉴于此iframe 的来源应该是来自摄像机的实时视频，代码应该是什么？
<img 可能是多余的，最后是一个错字：<iframe scrolling="no" width="640" height="480" src="http://10.0.0.172:8086/stream_simple.html" stream="BoardOne" frameborder="0" allowfullscreen></iframe>
实际上，在第一个块中它确实有一个来源，因为iframe 标签没有正确关闭 iframe 的一个属性，然后图像的来源是什么实际上是 iframe 的来源。
@Knight 是的，正如我所说。 :o)
@deceze 在我打字时没有看到你的评论。

【解决方案2】：

您的代码绝对有效。您的朋友代码不起作用。未闭合的标签不可能不会导致语法错误

【讨论】：

【解决方案3】：

第一个代码示例显然是错误的。您可以使用w3c markup validation tool 之类的工具检查 HTML 验证。尝试进入工具输入

<!DOCTYPE html>
<html>
<head><title></title></head>
<body>
<iframe scrolling="no" width="640" height="480"
stream="BoardOne" frameborder="0" allowfullscreen>
    <img src="http://10.0.0.172:8086/stream_simple.html"/>
</iframe>
</body>
</html>

并阅读有关 iframe 标记的错误消息。

另外，如果您是 HTML 新手，并且依靠朋友来告诉您您的代码是否有效，那么您应该真正学习如何在自己的计算机上测试它，（在大多数情况下，您可以创建一个纯文本文件结尾.html 扩展名并在浏览器中打开），或使用codepen 或codesandbox 等在线工具来测试您的代码。

【讨论】：