HTML中的<img>标签和<image>标签有什么区别？

Question

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

我意识到<image>是不正确的，而且无法通过http://validator.w3.org的验证。但是，是否有任何人知道如果使用<image>代替<img>是否会导致某些浏览器无法显示图像？

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

- Mike

---

并不是因为这是“初学者的错误”，而是因为“有一些问题站点在使用它，现代浏览器需要帮助这些站点艰难地继续运行”。由于你正在教授课程，你可以确保编写的站点更少出现问题：只有 img 标签是有效/正确/可接受的。 :) - user166390

我注意到许多初学者在我的互动课程（http://codeavengers.com）中错误地使用了image而不是img，尽管我明确说明他们需要小心使用img而不是image。许多用户写信给我，对错误消息感到困惑，因为它说他们应该使用img而不是image，因为image是无效的...尽管image似乎显示得很完美！ - Mike

只需要100%的W3C验证 或 对所有作业的[无]效性进行证明 -- 所以如果他们可以证明image，但如果他们不能.. :) - user166390

Answer 1

是和否都可以。正如你所指出的那样，<image> 长期以来一直是 <img> 的同义词。我认为最早这是由一个网景浏览器实现的，可能是为了弥补用户错误，或者可能是因为当时存在这个元素实际上应该被称为<image>还是<img>的争议。

无论如何，如pst所指出的那样，一旦它被实现在占据市场主导地位的浏览器中，Web页面便依赖于它。它的持久性取决于对浏览器制造商的商业压力。如果所有主要浏览器都支持它，那么浏览器A就会决定，虽然它在版本V中支持它，但在版本V+1中不再支持它，一旦版本V+1发布，他们会收到很多消息，说“站点S在你们最新的浏览器中已经出故障了。你们的浏览器是垃圾。我要换成浏览器B”。

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

我对浏览器不是很担心，而是其他HTML消费者，比如较少人知道的搜索引擎。我认为<image>代表img的同义词并不广为人知，因此许多这样的工具将无法识别<image>作为引用图像资源的标签。

- Alohci

---

我之前没有注意到HTML5解析规范要求将图像标签映射到img。很高兴你提到了这一点，因为在我在http://codeavengers.com上的某个课程中，我假设如果学习者犯了这个错误，图像标签会出现在DOM树中。 - Mike

“我会更关注其他HTML消费者，而不是浏览器”，这是一个很好的观点，让我坚定地信服了。 - InfernalRapture

请注意，尽管 image 是 img 的同义词，但这只是因为它被翻译为 DOM 中的 img。在 "image" 上使用 CSS，例如 image.blah { border: 1px solid red }，不会对 img 或 image 生效，但是 img.blah {border: 1px solid red } 可以同时生效（至少在我看到的每种情况下都是如此）。 - John Churchill

Answer 2

它们在SVG中的用途不同。 image标签在SVG中创建一个特定的元素，无法用img标签替代。

示例链接

- jgrumps

---

参考链接：https://www.w3.org/TR/1999/WD-SVG-19991203/struct.html#ImageElement。在使用画布时，这段内容非常令人困惑——`.drawImage()`支持以下类型的参数：`CSSImageValue`、`HTMLImageElement`、`SVGImageElement`、`HTMLVideoElement`、`HTMLCanvasElement`、`ImageBitmap`、`OffscreenCanvas`。然而，`SVGImageElement`并不是 <svg> 元素！实际上，<svg> 是 SVGSVGElement。 - jave.web

Answer 3

我刚刚完成了这个问题的调试，之前没有阅读上面的答案。

虽然不是完整的浏览器，但电子邮件客户端通常被用作浏览器一样的工具。

我发现，通过裸露的HTML（使用默认的裸露DTD规范），Android Gmail客户端确实存在这个问题。它只响应于<img /> [即不支持<image />]。gmail.com可以接受<image />，但Android Gmail客户端不行。

虽然电子邮件客户端并非真正的浏览器，但我认为您可能会感兴趣。

- user3642643

---

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

Answer 4

确实。现代浏览器会显示无效的代码，以确保旧网站仍能正确显示，并且略有错误的代码不会破坏页面。

例如，在打开新的之前忘记关闭一个 - 所有现代浏览器都会假定您已经关闭了它。

我不知道有哪个广泛使用、最新的浏览器会无法显示标签，但会显示标签。

- Andreas Christodoulou

---

根据[whatwg]（http://www.whatwg.org/specs/web-apps/current-work/multipage/syntax.html#syntax-tag-omission）的说法，`</tr>是可选的。如果省略</tr>标签，您的页面仍将通过验证。因此，我不确定<tr>`示例是否是这个问题的最佳示例。 - Mike

Answer 5

图片被DOM使用，因此在HTML中映射到img标签。请注意，在CSS中使用background-image或在JavaScript中使用drawImage时，它是完全打字的。

Img被识别为引用图像的HTML标记。一个副注是，现在可以在HTML中使用<picture>标记，而不仅仅是<img>标记。

HTML5中的<picture>标记具有/使用<audio>和<video>标记具有的属性。它有助于消除移动设备大小和今天的高分辨率图像问题。

在桌面上运行良好的内容在应用于手机或平板尺寸屏幕时仍然正确呈现。

请参见~://图片与img的快速概述

- goofyfoot