HTML 中的 <img> 与 <image> 标签答案

【问题标题】：<img> vs <image> tag in HTMLHTML 中的 <img> 与 <image> 标签
【发布时间】：2012-08-13 05:24:12
【问题描述】：

我正在编写一个介绍性的 HTML 课程。我记得 9 年前我在学习 HTML 时发现 <img> 和 <image> 都可以用作显示图像的标签，至少在 IE 中是这样。事实上，<image> 仍然适用于 5 大热门浏览器的最新版本。

我意识到<image> 是不正确的，不会使用http://validator.w3.org 进行验证。但是，是否有人知道如果使用<image> 而不是<img>，浏览器将不会显示图像？

此外，我假设现代浏览器显示使用<image> 标签创建的图像仅仅是因为这是初学者常犯的错误。这个假设正确吗？

【问题讨论】：

不是因为它是“初学者的错误”，而是因为“损坏的网站使用它，现代浏览器需要帮助这些网站跛行”.. 因为您正在教授课程，所以您可以确保减少损坏网站是这样写的：only img 是有效/正确/可接受的。 :)
我注意到一些初学者在我的互动课程 (codeavengers.com) 中错误地使用 image 而不是 img，尽管我明确指出他们需要小心使用 img 而不是 image。许多用户写信给我，对错误消息表示他们应该使用 img 而不是 image 因为 image 是无效的......即使 image 似乎显示完美！
只需要 100% w3c 验证或证明所有作业的 [in] 有效性 - 所以如果他们可以证明 image，但如果他们不能.. :)

标签： html

【解决方案1】：

是和不是。正如您指出的那样，<image> 长期以来一直是<img> 的同义词。我相信是早期的 Netscape 浏览器首先这样做，可能是为了补偿用户错误，或者可能是因为当时存在争议该元素是否应该实际称为 <image> 或 <img>。

无论如何，正如 pst 指出的那样，一旦它在当时主导市场的浏览器中实现，网页就会依赖它。它的持久性然后归结为浏览器制造商的商业压力。如果所有主流浏览器都支持它，那么浏览器A决定虽然它在版本V中支持它，但它在版本V+1中不支持它，一旦版本V+1发布，他们就会收到很多消息说“ S站点在你最新的浏览器中坏了。你的浏览器很垃圾。我要切换到浏览器B"。

HTML5 解析规范要求<image> 标记在树构造阶段映射到img 元素，因此使用它永远没有任何理由。

与其他 HTML 消费者（例如鲜为人知的搜索引擎）相比，我不太关心浏览器。我相信image 与img 的同义词并不广为人知，因此许多此类工具无法将<image> 视为引用图像资源。

【讨论】：

我没有注意到 HTML5 解析规范要求将图像标签映射到 img。很高兴你提到了这一点，因为我在 codeavengers.com 的一堂课中假设如果学习者犯了这个错误，图像标签将出现在 DOM 树中。
“我不会像其他 HTML 消费者那样关心浏览器”的好点，果断地说服了我。
请注意，虽然 image 是 img 的同义词，但这只是因为它作为 img 被翻译到 DOM。 “图像”上的 CSS，例如image.blah {border: 1px solid red } 不适用于 img 或 image，但 img.blah {border: 1px solid red } 将适用于两者（在我见过的每种情况下）。

【解决方案2】：

它们在 SVG 中有不同的用法。 image 标签在 SVG 中创建一个特定的 element，并且不能被 img 标签替换。

Fiddle Example

【讨论】：

参考：w3.org/TR/1999/WD-SVG-19991203/struct.html#ImageElement - 使用画布时非常混乱 - .drawImage() 接受：CSSImageValue，HTMLImageElement，SVGImageElement，HTMLVideoElement，@987654331 @、ImageBitmap、OffscreenCanvas、然而 SVGImageElement 不是 <svg> ELEMENT！ - <svg> 实际上是 SVGSVGElement

【解决方案3】：

我刚刚完成了我正在提交的这个问题的调试，之前没有阅读过上述答案。

虽然不是成熟的浏览器，但电子邮件客户端通常被当作浏览器使用。

我发现，Android Gmail 客户端使用裸 HTML（具有默认的裸 DTD 规范）确实存在此问题。它只响应<img /> [即，不响应<image />]。 gmail.com 可以使用<image />，但不能使用 Android gmail 客户端。

虽然电子邮件客户端并不是真正的浏览器，但我想你还是会感兴趣的。

【讨论】：

欢迎来到 Stack Overflow！我已经修复了您帖子的格式，以便显示 HTML。为了将来参考，代码块可以通过用四个空格缩进来格式化，内联代码可以通过用反引号（`）包围来格式化。您还可以选择您的代码并单击编辑器中的 { } 按钮。

【解决方案4】：

确实如此。现代浏览器将显示无效的代码，以确保旧网站仍然正确显示，并且稍微无效的代码不会搞砸页面。

例如，在您打开一个新的 <tr> 之前忘记关闭它 - 所有现代浏览器都会简单地假设您关闭了它。

我不知道有一个使用良好的最新浏览器无法显示<image> 标记，但会显示<img> 标记。

【讨论】：

根据whatwg</tr>是可选的。如果您省略 </tr> 标记，您的页面仍将有效。所以我不确定<tr> 的例子是这个问题的最佳例子。