731

W3C 验证器（维基百科）不喜欢非空元素上的自闭合标签（以“<code>/>”结尾的标签）。（void 元素是那些可能不包含任何内容的元素。）它们在 HTML5 中仍然有效吗？

可接受的void 元素的一些示例：

<br />
<img src="" />
<input type="text" name="username" />

被拒绝的非空元素的一些示例：

<div id="myDiv" />
<span id="mySpan" />
<textarea id="someTextMessage" />
注意：
W3C 验证器实际上接受 void 自闭合标签：作者最初遇到问题是因为一个简单的拼写错误（\>而不是/>）；但是，一般来说，自闭合标签在 HTML5 中并不是 100% 有效，并且答案详细说明了各种 HTML 风格的自闭合标签的问题。
4

8 回答 8

1299

  • （理论上）在HTML 4中，<foo /（是的，根本没有>）意味着<foo>（这导致了<br />意义<br>>（即<br>&gt;）和<title/hello/意义<title>hello</title>）。我使用“理论上”这个词是因为这是一个SGML规则，浏览器在支持方面做得很差。支持太少了（我只见过它在emacs-w3m中工作），规范建议作者避免使用 syntax。

  • 在XHTML中，<foo />表示<foo></foo>. 这是适用于所有 XML 文档的XML规则。也就是说，XHT​​ML 通常被用作text/html（至少在历史上）由浏览器使用与用作application/xhtml+xml. W3C为XHTML作为text/html. （本质上：仅当元素被定义为 EMPTY（并且 HTML 规范中禁止结束标记）时才使用自闭合标记语法）。

  • 在HTML5中， 的含义<foo /> 取决于元素的类型：

    • 在被指定为void 元素的 HTML 元素上（本质上是“在 HTML5 之前存在且被禁止包含任何内容的元素”），简单地禁止结束标记。开始标签末尾的斜线是允许的，但没有意义。对于沉迷于 XML 的人（和语法高亮者）来说，它只是语法糖。
    • 在其他 HTML 元素上，斜杠是一个错误，但错误恢复会导致浏览器忽略它并将该标记视为常规开始标记。这通常会以缺少结束标记而告终，从而导致后续元素成为子元素而不是兄弟元素。
    • 外部元素（从 SVG 等 XML 应用程序导入）将其视为自闭合语法。
于 2010-08-24T15:37:41.560 回答
427

正如 Nikita Skvortsov 指出的那样，自动关闭的 div 不会验证。这是因为 div 是普通元素，而不是void 元素。

根据HTML5 规范，不能包含任何内容的标签（称为void 元素）可以是自闭合的*。这包括以下标签：

area, base, br, col, embed, hr, img, input, 
keygen, link, meta, param, source, track, wbr

但是，“/”在上述标签上是完全可选的，因此<img/>与 没有区别<img>，但<img></img>无效。

*注意：外来元素也可以自动关闭，但我认为这不在此答案的范围内。

于 2011-10-21T20:36:00.663 回答
64

在实践中，在 HTML 中使用自闭合标签应该会像您期望的那样工作。但是，如果您关心编写有效的 HTML5，您应该了解这些标签的使用在您可以使用的两种不同的两种语法形式中是如何表现的。HTML5 定义了 HTML 语法和 XHTML 语法，它们相似但不相同。使用哪一种取决于 Web 服务器发送的媒体类型。

您的页面很可能被用作text/html，它遵循更宽松的 HTML 语法。在这些情况下，HTML5 允许某些开始标签在终止 > 之前有一个可选的 /。在这些情况下， / 是可选的并且被忽略，因此<hr>和<hr />是相同的。HTML 规范称这些“无效元素”为有效元素的列表。严格来说，可选的 / 只在这些 void 元素的开始标签内有效；例如，<br />并且<hr />是有效的 HTML5，但<p />不是。

HTML5 规范明确区分了 HTML 作者和 Web 浏览器开发人员的正确性，第二组被要求接受各种无效的“遗留”语法。在这种情况下，这意味着兼容 HTML5 的浏览器将接受非法的自闭合标签，例如<p />，并按照您的预期呈现它们。但对于作者而言，该页面将不是有效的 HTML5。（更重要的是，使用这种非法语法得到的 DOM 树可能会被严重搞砸；<span />例如，自封闭标签往往会把事情搞得一团糟）。

（在您的服务器知道如何将 XHTML 文件作为 XML MIME 类型发送的特殊情况下，页面需要符合 XHTML DTD 和 XML 语法。这意味着这些定义的元素需要自闭合标签。）

于 2011-02-18T22:11:56.613 回答
18

HTML5 基本上表现得好像尾部斜杠不存在一样。HTML5 语法中不存在自闭标签之类的东西。

  • 像,这样的非空元素上的自闭合标签根本不起作用。尾部的斜杠将被忽略，这些将被视为开始标签。这很可能导致嵌套问题。<p/><div/>

    无论斜杠前面是否有空格都是如此：<p />并且<div />出于同样的原因也不会起作用。

  • void元素上的自闭合标签类似于<br/>or<img src="" alt=""/> 将起作用，但只是因为尾部斜杠被忽略了，在这种情况下，这恰好会导致正确的行为。

结果是，在旧的“XHTML 1.0 作为文本/html”中工作的任何内容都将像以前一样继续工作：非 void 标记上的尾部斜杠也不被接受，而 void 元素上的尾部斜杠工作。

还有一点需要注意：可以将 HTML5 文档表示为 XML，这有时被称为“XHTML 5.0”。在这种情况下，将始终处理 XML 应用和自闭合标签的规则。它总是需要使用 XML mime 类型。

于 2016-06-28T06:15:19.520 回答
6

自闭合标签在 HTML5 中有效，但不是必需的。

<br>并且<br />都很好。

于 2010-08-24T16:16:03.903 回答
5

如本例所示，我会非常小心地使用自闭合标签：

var a = '<span/><span/>';
var d = document.createElement('div');
d.innerHTML = a
console.log(d.innerHTML) // "<span><span></span></span>"

我的直觉会<span></span><span></span>是

于 2017-05-20T19:09:10.040 回答
2

（非无效）自闭合标签在 HTML5 中有效吗？

当然，它们是有效的，但几乎没有修改。

以自闭标签为例<br>。

即使你写了<br/>，<br />它们最终还是会<br>在浏览器中转换。

/>在以or结尾的自闭合标签中 />，/（斜线）和空格将被忽略。

举个例子，让我们看看它在浏览器中的样子。

<p>This is paragraph with &lt;br&gt;<br> and &lt;br/&gt;<br/> and then &lt;br /&gt;<br />.</p>

上面的代码在浏览器中将如下图所示。

在此处输入图像描述

可以看到全部转换为<br>. 因此，您可以选择是否关闭自关闭标签，但它们是完全有效的。

于 2021-07-19T02:40:16.627 回答
1

但是-仅作记录-这是无效的：

<address class="vcard">
  <svg viewBox="0 0 800 400">
    <rect width="800" height="400" fill="#000">
  </svg>
</address>

此处的斜线将使其再次有效：

    <rect width="800" height="400" fill="#000"/>
于 2018-12-12T00:39:55.073 回答