How to close <img> tag properly?

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

Which one(s) of them is correct?

126866 次浏览
<img src='stackoverflow.png' />

工作良好,关闭标签正确。最好添加的 alt属性的人是视力障碍。

这个元素是 有效的 HTML5,不用关闭它就完全没问题,它是一个所谓的 void 元素:

<img src='stackoverflow.png'>

以下是有效的 XHTML 标签。它们必须被关闭。后者在 HTML5中也可以:

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

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

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

第二个属性更合适。

- 标记为 Empty,仅包含 Attribute。 - 标签没有’结束’标签。

那么,

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

两者在 HTML5中都是正确的。

标签的最佳使用方法:

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

你也可以在 HTML5中使用:

<img src="" alt="">

这两个在 HTML5中是完全有效的 随便挑一个,坚持下去。

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

<img src='stackoverflow.png'>

在 XHTML 中只有最后两个是有效的

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

(虽然不是严格要求,但也应该包含一个 alt属性。)

也就是说,您的 HTML5页面可能会按预期显示,因为浏览器将重写或解释您的 html,以它认为您的意思。例如,表示将标记从
或者它只是忽略了 <img ... />上的最后一个斜杠。
请参见2016: 将 HTML5作为 XHTML 5.0进行遗留验证。
参见: 2011年的讨论和附加链接在这里,虽然随着时间的推移,一些位可能已经改变

部分原因是浏览器非常努力地纠正错误。另外,还有很多关于自闭标记和 void 标记的混淆。最后,规范已经改变,或者并不总是很清楚,浏览器试图向后兼容。

所以,尽管你可以选择其中任何一种,
只有第一个符合 HTML5标准,并且保证能够通过 HTML5验证器。

一个合理的策略可能是:

  • 编写没有结束斜杠的新代码。
  • 当重构代码时,在运行附近的图像标记时更新它们。
  • 除非出现特殊需要,否则不必过分担心您不会触及的遗留文件中的标记。

下面是 在 HTML5中不应该关闭的标记的列表:

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

如果您曾经尝试用 XHTML 解析器读取结束标记,那么使用结束标记是很有帮助的。也许是个边缘案件,但我一直都这么做。使用它并没有什么坏处,这意味着我知道我们可以使用一组 XML 阅读器,它们在遇到未关闭的标记时不会崩溃。

如果您永远不会尝试解析内容,那么忽略结束。

不幸的是,上面的解决方案在我的例子中不起作用——可能是因为将按钮放在 form-tag 中。这个密码..。

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