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

Posted 2023-03-05

【中文标题】为啥 <img> 标签在 HTML 中没有关闭？

【英文标题】：Why is the <img> tag not closed in HTML?为什么 <img> 标签在 HTML 中没有关闭？

【发布时间】：2014-07-16 10:37:39

【问题描述】：

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

<img src="smiley.gif"   >

我还注意到 img> 标记在 XHTML 中显式关闭...

<img src="smiley.gif"   />

W3Schools： Image Tag

【问题讨论】：

因为没有内容？它通过属性完成所有事情，不可能有子元素或文本，里面没有什么可以进入的，它只有自我关闭才有意义，不幸的是，html 的标准化太松散，以至于它永远不需要一个显式的自闭合标签。

@scragar：不知道你说的最后一句话是什么意思 - HTML 的定义和标准化都非常好，并且已经存在很多年了。

@BoltClock 我的意思是标准非常宽容，不关闭标签完全没问题，浏览器应该根据语言的一般规则猜测标签关闭的位置。 <p>text1<p>text2<p>text3 应该创建 3 个段落，但大多数浏览器会假设每个 <p> 在下一个开始时关闭，尽管它有一个常用的结束标记。标准说这是很好且完全可以预期的行为。

@scragar：这是预期的行为，因为一个段落不能包含另一个段落（只有内联元素）。

@SecondRikudo 阅读我写的内容，我说根据 HTML 标准这是正确的行为，但根据 XML 标准，这不是正确的行为，这就是我们将 HTML 与此处进行比较的内容。 HTML 遵循一套不同的更宽容的规则。

【参考方案1】：

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

由于<img>元素不能有任何子节点，它被定义为EMPTY并且禁止结束标签（因为它没有任何作用）。

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

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

【讨论】：

另外值得补充的是，XHTML（顾名思义）旨在成为格式良好的 XML，因此是结束标签。

从历史上看，<img> 标记最初是以一种快速而肮脏的方式定义和实现的，后来正式（并且只是正式地）改装到 SGML 语法中。没有真正的 HTML 实现是基于 SGML 的。

“结束标签被禁止”？我试过<img src="http://www.mozilla.org/images/mozilla-banner.gif"></img>，没有错误？也许 chrome 只是忽略了 </img> ？

@TinaChen — 浏览器对格式错误的 HTML 执行很多的错误恢复。使用验证器来测试 HTML 错误。不要依赖浏览器来报告它们。

【参考方案2】：

<img> 标签表示所谓的 void 元素（参见 HTML5 spec），之所以这么称呼是因为它不能包含任何内容（不像 <a> 或 @987654324 @)。因此，没有语法上的理由需要在 HTML 中关闭它。

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

【参考方案3】：

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

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

因此没有真正的理由使用单个“/” (U+002F) 字符，但如果包含它不会破坏任何内容。

【讨论】：

请注意，快捷语法/ 只是为了方便而允许使用。 HTML5 规范明确禁止使用明确的结束标记，例如 </img>。

【参考方案4】：

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

为了您的理解：

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

而<img src="smiley.gif" alt="Smiley face" height="42" width="42"/>，此代码适用于 XHTML 版本。

【参考方案5】：

您不会像在h1 中那样在图像中添加任何内容，您会在图像中添加文本，但在图像中您不会在其上添加任何内容。

例子：

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