<img src='stackoverflow.png'>
<img src='stackoverflow.png'></img>
<img src='stackoverflow.png' />
哪一个是正确的？
【问题讨论】：
标签： html
这个是valid HTML5，不关闭它绝对没问题。就是所谓的void元素：
<img src='stackoverflow.png'>
以下是有效的 XHTML 标记。他们必须关闭。后者在 HTML 5 中也很好：
<img src='stackoverflow.png'></img>
<img src='stackoverflow.png' />
【讨论】：
<img src='stackoverflow.png'>（如果对您很重要）。
about:logo 页面中看到 <img src="about:logo" alt="about:logo"> 标记感到困惑！虽然document.body.innerHTML 显示<img src=\"about:logo\" alt=\"about:logo\">...很好的答案...
<img src='stackoverflow.png' />
工作正常并正确关闭标签。最好为视障人士添加alt 属性。
【讨论】：
<img /> 在 [X]HTML/XML 中有效是正确的，尽管如今 XHTML 的使用非常罕见，如果您的服务器将页面作为 text/html 提供服务，那么您只需担心的是编写有效的 HTML。必须将 HTML 应用程序迁移到 XHTML 的可能性几乎为零。
<img src='stackoverflow.png'>（如果对您很重要）。
其实HTML5中只有第一个是valid
<img src='stackoverflow.png'>
只有最后两个在 XHTML 中有效
<img src='stackoverflow.png'></img>
<img src='stackoverflow.png' />
（虽然不是严格要求，alt 属性_通常_也应该包括在内）。
也就是说，您的 HTML5 页面可能会按预期显示，因为浏览器会将您的 html 重写或解释为它认为您的意思。这可能意味着它将一个标签，例如，从<div /> 变成<div></div>。或者它可能只是忽略了<img ... /> 上的最后一个斜线。
see 2016: Serve HTML5 as XHTML 5.0 for legacy validation.
see: 2011 discussion and additional links here, though over time some bits may have changed
部分原因是浏览器非常努力地进行错误纠正。另外，因为自闭标签和无效标签有很多混淆。最后，规范已经改变，或者并不总是很清楚，并且浏览器试图向后兼容。
因此，虽然您可以选择这三个选项中的任何一个，但
只有第一个符合 HTML5 标准，并保证通过 HTML5 验证器。
一个合理的策略可能是：
这里是tags that should not be closed in HTML5的列表：
<br> <hr> <input>
<img> <link> <source>
<col> <area> <base>
<meta> <embed> <param>
<track> <wbr> <keygen> (HTML 5.2 Draft removed)
【讨论】：
<img src='stackoverflow.png' /> 在任何版本的 XHTML 和 HTML 5 中都有效。
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. img 在第 12.1.2 节中是一个空元素
Actually, only the first one is valid in HTML5 在技术上不正确。第二个在 HTML5 中也有效。不是必需的，但有效。没有人认为它是必需的。只有按照规范，使用标签的自闭合形式在所有当前形式的 XHTML 和 HTML 中都是有效的。
两个都是正确的答案。 HTML5 遵循严格的规则，在 HTML5 中我们可以关闭所有标签。因此，这取决于您使用 HTML5 还是 HTML 并遵循适当的答案。
<img src='stackoverflow.png'>
<img src='stackoverflow.png' />
第二个属性更合适。
【讨论】：
您应该使用的标签的最佳用途：
<img src="" alt=""/>
也可以在 HTML5 中使用：
<img src="" alt="">
这两个在 HTML5 中完全有效 选择其中一个并坚持下去。
【讨论】：
如果您尝试使用 XHTML 解析器来阅读结束标签，那么它会很有帮助。可能是一个边缘案例，但我一直这样做。拥有它并没有什么坏处，这意味着我知道我们可以使用一组 XML 阅读器，它们在遇到未闭合的标签时不会倒下。
如果您永远不会尝试解析内容，则忽略关闭。
【讨论】：
-标签是空的，它只包含属性。 -标签没有“关闭”标签。
所以，
<img src='stackoverflow.png'>
<img src='stackoverflow.png' />
两者在 HTML5 中也是正确的。
【讨论】：
不幸的是，上述解决方案在我的情况下不起作用 - 可能是因为将按钮放在表单标签内。这段代码...
<input class="button" type="submit" value=" ">
<img src="../assets/logo.png" alt="test" />
</input>
... 总是会导致错误（有或没有 img 标签的右斜杠）：
error Parsing error: x-invalid-end-tag vue/no-parsing-error
✖ 1 problem (1 error, 0 warnings)
一种可行的解决方法是通过以下方式将图像定义为背景图像
html sn-p 仅描述按钮。 value 属性包含一个空格，以抑制某些浏览器显示不需要的默认文本。
<input class="button" type="submit" value=" " />
CSS 定义了按钮的背景图片：
.button {
display: block;
width: 6em;
height: 6em;
color: white;
background-color: #639f59;
padding: 0.4em 1.2em;
box-shadow: inset 0 -0.6em 1em -0.35em rgba(5, 122, 11, 0.30),
inset 0 0.6em 2em -0.3em rgba(255, 255, 255, 0.30),
inset 0 0 0em 0.05em rgba(255, 255, 255, 0.30);
cursor: pointer;
background: url("../assets/logo.png") ;
background-repeat: no-repeat;
background-size: 6em;
background-position: center;
border: 0;
border-radius: 3em;
}
【讨论】：