Question

一个朋友（和我一样，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>

我还是新手：有人可以解释我朋友的代码如何工作，但他声称我的代码不行吗？

Answer 1

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

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

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

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

Answer 2

您的代码肯定有效。您的朋友代码无效。未关闭的标签不会导致语法错误

Answer 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之类的在线工具来测试您的代码。

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

3 个答案: