如何正确关闭<img>标签？

122

<img src='stackoverflow.png'>
<img src='stackoverflow.png'></img>
<img src='stackoverflow.png' />

其中哪一个是正确的？

html

— 在此处插入用户名
source

6

问题是“如何正确关闭<img>标签？” 这是一个真正的问题，答案很有用。这个问题不应该被解决。

3

目前，这个问题很好。它不是模棱两可，含糊不清，不完整，过于宽泛或流于形式。下面也有一个很好的答案。

— David J.

我不知道以下哪个答案是正确的，但是有趣的是，Firefox的Code Inspector如果没有在标签的末尾添加</ img>。IE没有。这在我的宇宙中意义重大。

— Chiwda

PS Dreamweaver插入/> XHTML标记。

— Chiwda

50

<img src='stackoverflow.png' />

工作正常，并正确关闭标签。最好为alt视障人士添加属性。

— 埃德·赫尔
source

4

<img />在[X] HTML / XML中有效是正确的，尽管如今很少使用XHTML，并且如果您的服务器正在提供页面，则text/html您所要做的就是编写有效的HTML。将HTML应用程序迁移到XHTML的可能性几乎为零。

— 法布里西奥磨砂

1

如果目标是4.01 Transitional和更高版本，则以上答案将无法通过W3C的HTML检查器进行验证。另请参见W3C标记验证服务。我相信以上答案需要HTML5或XHTML。为避免验证失败，您需要使用一个<img src='stackoverflow.png'>（如果对您而言很重要）。

— jww

1

@FabrícioMatté您严重低估了xhtml的实际用法。公司规模越大，他们越有可能使用xhtml而不是html或类似xhtml格式的html5（以便轻松/快速地解析），或者使用诸如微数据之类的其他东西，或使用诸如ixbrl之类的增强标记。

— 罗伯特·麦基

“正常工作”与“指定”之间有很大的区别，您将永远找不到任何HTML规范来指出在该标签上使用斜杠。正如其他人提到的那样，允许不破坏最初使用XHTML / XML编写的网站，但是您在任何地方都找不到任何措辞或示例说明其用法。实际上，您会发现措辞表明它没有任何意义，并且指示浏览器忽略它！

— 罗布

Rob-6年前出现了问题。这确实解决了。现在猜猜浏览器会更好

— Ed Heal

163

这是有效的HTML5，无需关闭它就可以了。这是所谓的void元素：

<img src='stackoverflow.png'>

以下是有效的XHTML标记。他们必须关闭。后一种在HTML 5中也可以：

<img src='stackoverflow.png'></img>
<img src='stackoverflow.png' />

— 马文·拉贝（Marvin Rabe）
source

5

它不仅是有效的HTML5，而且在HTML4中也有效。HTML不需要您所说的自动关闭的“ void”元素。+1为连贯的答案。

— 法布里西奥磨砂

2

如果定位到4.01 Transitional和更高版本，则HTML5或XHTML将无法通过W3C的HTML检查器进行验证。另请参见W3C标记验证服务。您需要使用一个<img src='stackoverflow.png'>（如果对您而言很重要）。

— jww

多年后发表评论... <img src="about:logo" alt="about:logo">在Firefox 76的about:logo页面上看到标签感到困惑！虽然document.body.innerHTML显示<img src=\"about:logo\" alt=\"about:logo\">...很好的答案...

— S.Goswami

4

实际上，只有第一个在HTML5中有效

<img src='stackoverflow.png'>

在XHTML中只有最后两个有效

<img src='stackoverflow.png'></img>  
<img src='stackoverflow.png' />

（尽管不是很严格要求，alt但还应包括“通常”属性）。

就是说，您的HTML5页面可能会按预期显示，因为浏览器会按照您的意图重写或解释您的html。例如，这可能意味着它将标签从
<div />变成<div></div>。或者，也许它只是忽略了最后的斜线<img ... />。
请参阅2016：将HTML5作为XHTML 5.0进行旧版验证。
请参阅：2011年讨论和此处的其他链接，但随着时间的流逝，某些位可能已更改

部分原因是因为浏览器非常努力地进行错误纠正。另外，由于自封闭标签和无效标签存在很多混淆。最终，规范发生了变化，或者并非一直很清晰，浏览器试图向后兼容。

因此，尽管您可能可以逃避这三个选项中的任何一个，但
只有第一个符合HTML5标准，并且可以保证通过HTML5验证程序。

合理的策略可能是：

编写没有斜杠的新代码。
重构代码时，请在它们附近运行时更新附近的图像标签。
除非有特殊需要，否则不必过分担心您不会接触的旧文件中的标签。

以下是HTML5中不应关闭的标签列表：

 <br>    <hr>    <input>       
 <img>  <link>   <source>  
 <col>  <area>   <base>
 <meta> <embed>  <param>  
<track>  <wbr>   <keygen> (HTML 5.2 Draft removed)

— 雪莉·霍曼（SherylHohman）
source

1

从技术上讲这是不正确的。的自闭空元素是HTML完全有效5.见html.spec.whatwg.org/#start-tags这将使<img src='stackoverflow.png' />有效的XHTML和HTML 5的任何版本

— 罗伯特·麦基

1

@RobertMcKee不，从技术上讲是正确的。虽然使用斜杠是允许的，并且不会将其标记为错误，但是在任何HTML规范中，您都不会看到它被指定为要使用的斜杠。允许不破坏基于XHTML / XML的较旧的网站，但您永远找不到任何HTML规范，以文字或示例的方式在由W3C指定的标记上使用斜杠或WHATWG。

— 罗布

@Rob根据我上面在12.1.2.1.6节中链接的WHATWG文档，-img

Then, if the element is one of the void elements, or if the element is a foreign element, then there may be a single U+002F SOLIDUS character (/). This character has no effect on void elements, but on foreign elements it marks the start tag as self-closing.

是第12.1.2节中的void元素

— Robert McKee

1

@RobertMcKee是的。这是规范的一部分（概述了为什么允许使用斜线）（出于我在之前的评论中给出的原因）。但是，您应该查看该元素的实际规范（在这种情况下为img），该规范通过文字和示例清楚地表明不需要或不指定斜杠。实际上，如果不进行查找，则对该部分的进一步阅读将指出，斜杠没有任何意义，没有任何作用，并且浏览器必须忽略它。因此，它毫无用处且毫无意义，使我们回到了我最初的评论：不使用斜杠。

— 罗布

1

@Rob是的，它是可选的，但完全有效。这使得该语句在Actually, only the first one is valid in HTML5技术上不正确。第二个在HTML5中也有效。不需要，但有效。没有人争辩说这是必需的。仅根据规范，使用标签的自动关闭形式在所有当前XHTML和HTML形式中均有效。

— 罗伯特·麦基

2

最好使用标签：

<img src="" alt=""/>

您也可以在HTML5中使用：

<img src="" alt="">

这两个在HTML5中完全有效。选择其中一个并坚持下去。

— 巴里克博士
source

第一个不是最好的，因为它没有在任何 HTML标准中指定，而第二个则没有。第一个只允许出于历史原因！（与较旧网站中的XHTML / XML使用情况的兼容性，如果浏览器不允许，则可能会中断。）

— Rob

不知道Rob在这里想说什么，但是html规范确实指定了第一个有效。

— 罗伯特·麦基

2

两者都是正确的答案。HTML5遵循严格的规则，在HTML5中，我们可以关闭所有标签。因此，取决于您使用HTML5或HTML并遵循适当的答案。

<img src='stackoverflow.png'>
<img src='stackoverflow.png' />

第二个属性更合适。

— 公共小巴
source

不正确第一个是任何 HTML规范中指定的唯一一个。仅出于历史原因才允许使用第二个，但同样，在任何地方都未按要求指定第二个。

— 罗布

1

-标签为空，并且仅包含属性。-标签没有'Closing'标签。

所以，

<img src='stackoverflow.png'>
<img src='stackoverflow.png' />

两者在HTML5中都是正确的。

— 公共小巴
source

在第一个是正确的！仅出于历史原因才允许使用第二个。（与较旧网站中XHTML / XML的使用兼容性会在浏览器不允许的情况下中断。）

— Rob

1

如果您尝试使用XHTML解析器读取结束标记，则很有用。可能会是一个极端案例，但我一直都这样做。拥有它没有什么害处，并且意味着我知道我们可以使用一系列XML阅读器，当它们遇到未封闭的标签时它们不会倾斜。

如果您永远不会尝试解析内容，请忽略结尾。

— 业余D
source