Question

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

他们中的哪一个是正确的？

Answer 1

这个是valid HTML5，如果不关闭它就绝对没问题。这是一个所谓的虚空元素：

<img src='stackoverflow.png'>

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

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

Answer 2

<img src='stackoverflow.png' />

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

Answer 3

实际上，只有第一个是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)

Answer 4

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

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

Answer 5

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

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

第二个属性更合适。

Answer 6

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

所以

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

在HTML5中都是正确的。

Answer 7

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

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

也可以在HTML5中使用：

<img src="" alt="">

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

Answer 8

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

<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代码段仅描述了该按钮。值属性包含一个空格，以禁止某些浏览器显示不需要的默认文本。

<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;
}

Answer 9

您不需要在元标记中使用<img>标记来显示图片正是你需要的是展示路径和搜索引擎＆amp; facebook将从路径中获取图像。

<meta name= 'image' content "http://your image path />

如何正确关闭<img/>标记？

9 个答案: