时间戳

首页 > 解决方案 > HTML 代码产生语法错误但仍然有效；“正确”的代码不

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

问题描述

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

再说一次，我是新手：有人能解释一下我朋友的代码是如何工作的，但他声称我的代码不行吗？

标签： htmlimageembedding

解决方案

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

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

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

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

推荐阅读