（非空）自动关闭标签在HTML5中有效吗？

问题描述 投票：604回答：7

W3C validator不喜欢/>元素上的自闭标签（那些以“non-void”结尾的标签）。 （Void元素是那些可能不包含任何内容的元素。）它们在HTML5中仍然有效吗？

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

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

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

<div id="myDiv" />
<span id="mySpan" />
<textarea id="someTextMessage" />

注意：W3C验证器实际上接受无效的自动关闭标签：由于简单的拼写错误（\>而不是/>），作者最初遇到了问题。但是，自动关闭标签在HTML5中通常不是100％有效，并且答案详细说明了各种HTML风格的自闭标签问题。

html html5 syntax w3c-validation
7个回答
1197
投票
  • 在HTML 4中，<foo /（是的，完全没有>）意味着<foo>（导致<br />意思是<br>>（即<br>&gt;）和<title/hello/意思是<title>hello</title>）。这是一个SGML规则，浏览器支持和the spec advises authors to avoid the syntax做得很差。
  • 在XHTML中，<foo /> means <foo></foo>。这是适用于所有XML文档的XML规则。也就是说，XHT​​ML通常用作text/html（历史上至少）由浏览器使用不同的解析器处理，而不是作为application/xhtml+xml的文档。 W3C提供compatibility guidelines作为text/html遵循XHTML。 （基本上：当元素定义为EMPTY时，仅使用自动关闭标记语法（并且HTML规范中禁止结束标记））。
  • 在HTML5中，<foo /> depends on the type of element的含义。 在指定为void元素的HTML元素上（实质上是“在HTML5之前存在且禁止包含任何内容的元素”），仅禁止结束标记。允许使用开始标记末尾的斜杠，但没有任何意义。它只是沉迷于XML的人（和语法荧光笔）的语法糖。 在其他HTML元素上，斜杠是一个错误，但错误恢复将导致浏览器忽略它并将标记视为常规开始标记。这通常会导致缺少结束标记，导致后续元素成为子元素而不是兄弟元素。 外部元素（从SVG等XML应用程序导入）将其视为自动关闭语法。
389
投票

正如Nikita Skvortsov所指出的那样，一个自我关闭的div将无法验证。这是因为div是普通元素，而不是void元素。

根据the HTML5 spec，不能有任何内容的标签（称为空元素）可以自动关闭*。这包括以下标记：

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

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

*注意：外国元素也可以自我关闭，但我不认为这是答案的范围。

62
投票

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

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

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

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

10
投票

HTML5的行为基本上就像没有尾随斜杠一样。在HTML5语法中没有自闭标签这样的东西。

  • 像<p/>，<div/>这样的非空元素上的自闭标签根本不起作用。尾部斜杠将被忽略，这些将被视为开始标记。这可能会导致嵌套问题。 无论斜线前面是否有空格，都是如此：<p />和<div />也不会出于同样的原因。
  • 像<br/>或<img src="" alt=""/>这样的void元素上的自闭标签可以工作，但这只是因为忽略了尾部斜杠，在这种情况下恰好会导致正确的行为。

结果是，在旧的“XHTML 1.0作为text / html”中起作用的任何东西都将继续像以前一样工作：在非void标签上的尾部斜杠也不会被接受，而void元素上的尾部斜杠工作。

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

4
投票

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

<br>和<br />都很好。

2
投票

我会非常小心自闭项标签，如下例所示：

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

我的直觉本来就是<span></span><span></span>

-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"/>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.