为什么 <img> 标签在 HTML 中没有关闭？

Question

出于好奇，为什么 <HTML 中的 img> 标签没有关闭？

<img src="smiley.gif" alt="Smiley face" height="42" width="42">

我还注意到 <img> 标签在 XHTML...

中显式关闭

<img src="smiley.gif" alt="Smiley face" height="42" width="42"/>

W3Schools： 图像标签

Answer 1

从历史上看，HTML 一直基于 SGML，允许在某些条件下省略标签。

由于

<img>

元素不能有任何子节点，因此它被定义为 EMPTY 并且禁止使用结束标记（因为它没有任何作用）。

XHTML 是用 XML 表达的 HTML，XML 不支持可选或禁止标签（尽管它允许自闭合标签代替开始+结束标签对），因此必须在那里显式关闭。

HTML 5 向后兼容基于 SGML 的 HTML 版本。

Answer 2

<img>

标签代表所谓的void元素（参见HTML5规范），之所以这么称呼是因为它不能有任何内容（与

<a>

或

<div>

不同）。因此，没有任何语法原因需要在 HTML 中关闭它。

XHTML 然而，基于 XML，其中每个标签都需要关闭。

Answer 3

这就是所谓的 void 元素，这意味着该元素不能有任何内容（但可以有属性。）HTML5 规范对 void 元素有这样的规定：

如果该元素是 void 元素之一，或者该元素是外来元素，则可能是单个“/”（U+002F）字符。 该字符对空元素没有影响

因此没有真正的理由需要使用单个“/”（U+002F）字符，但如果包含它也不会破坏任何东西。

Answer 4

<img>

标签基本上是一个Void元素。

请您理解：

图片没有任何内容。图像标签将仅给出通过 src 属性加载资源的路径。因此，它不需要任何结束元素。

而

<img src="smiley.gif" alt="Smiley face" height="42" width="42"/>

，此代码适用于XHTML版本。

Answer 5

您不会在图像中放置任何内容，就像在

h1

中一样，您可以放置文本，但在图像中您不会在上面放置任何内容。

示例：

<h1>hi</h1>
<img src=blblb alt=blbl/>

Answer 6

如果有人发现自己需要使用 GitHub markdown，似乎关闭

img

元素的方法实际上确实会改变它们的渲染方式（截至 2024 年 8 月）。以下面的示例为例，两张图像并排放置，且没有结束标签。这两个图像的大小适当，适合两列布局：

## Assets

<img src="./img-1.png" style="max-width: 100%; width: 410px">
<img src="./img-2.png" style="max-width: 100%; width: 410px">

但它们在 GitHub 网站上的堆积方式如下：

当明确添加关闭

</img>

标签时，如下所示：

<img src="./img-1.png" style="max-width: 100%; width: 410px"></img>
<img src="./img-2.png" style="max-width: 100%; width: 410px"></img>

现在，图像是水平渲染的，并且没有 GitHub 注入的附加边距：

如果您发现自己处于类似情况，添加结束

</img>

标签可能会有所帮助。如果这解决了您遇到的问题，我会感受到您的痛苦，并希望您的日子会变得更好。