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

其中哪一个是正确的？

4

8 回答 8

187

这是一个有效的 HTML5，不关闭它绝对没问题。它是一个所谓的 void 元素：

<img src='stackoverflow.png'>

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

<img src='stackoverflow.png'></img>
<img src='stackoverflow.png' />
于 2013-02-13T18:37:10.930 回答
66 
<img src='stackoverflow.png' />

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

于 2013-02-13T18:33:55.747 回答
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)
于 2019-01-29T00:26:13.773 回答
3

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

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

第二个属性更合适。

于 2018-11-15T16:39:36.857 回答
2

您应该使用的标签的最佳用途：

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

您也可以在 HTML5 中使用：

<img src="" alt="">

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

于 2018-11-15T17:56:40.287 回答
2

如果您尝试使用 XHTML 解析器读取结束标记，那么使用结束标记会很有帮助。可能是一个边缘案例，但我一直这样做。拥有它并没有什么坏处，这意味着我知道我们可以使用一组 XML 阅读器，当它们碰到未闭合的标签时它们不会倒下。

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

于 2020-05-29T15:41:41.287 回答
1

-标签是空的，它只包含属性。-标签没有“关闭”标签。

所以，

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

两者在 HTML5 中也是正确的。

于 2018-11-15T16:43:15.410 回答
0

不幸的是，上述解决方案在我的情况下不起作用 - 可能是因为将按钮放在了表单标签中。这段代码...

<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)

一种可行的解决方法是通过 css 将图像定义为背景图像。

html 片段仅描述按钮。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;
}
于 2020-11-17T18:56:29.517 回答