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

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

接受空元素的一些示例：

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

拒绝非无效元素的一些示例：

<div id="myDiv" />
<span id="mySpan" />
<textarea id="someTextMessage" />
备注：
W3C验证器实际上接受了无效的自关闭标签：作者最初遇到了一个问题，因为一个简单的错字（\>而不是/>）；然而，自关闭标签在HTML5中一般不是100%有效，答案详细阐述了各种超文本标记语言风格的自关闭标签问题。
315763 次浏览
小开
最佳答案

  • （理论上）在超文本标记语言4中，<foo /（是的，根本没有>）表示<foo>（这导致<br />表示<br>>（即<br>&gt;）和<title/hello/表示<title>hello</title>）。我使用“理论上”一词是因为这是一个SGML规则，浏览器支持得很差。支持很少（我只在>0中看到它起作用），以至于>1。

  • 在XHTML中，#EYZ0表示<foo></foo>。这是适用于所有XML文档的xml规则。也就是说，XHTML通常被用作text/html，浏览器使用与用作application/xhtml+xml的文档不同的解析器处理它（至少从历史上看）。W3C提供兼容性指南作为text/html跟随XHTML。（本质上：仅当元素定义为EMPTY时使用自关闭标记语法（并且在超文本标记语言规范中禁止使用结束标记））。

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

    • 在被指定为无效元素的超文本标记语言元素（本质上是“在HTML5之前存在的元素，并且被禁止具有任何内容”）上，结束标记被简单地禁止。开始标记末尾的斜杠是允许的，但没有任何意义。它只是对沉迷于XML的人（和语法荧光笔）的语法糖。
    • 在其他超文本标记语言元素上，斜杠是一个错误，但错误恢复会导致浏览器忽略它并将标记视为常规的开始标记。这通常会导致缺少结束标记，从而导致后续元素是子元素而不是兄弟元素。
    • 外部元素（从SVG等XML应用程序导入）将其视为自关闭语法。
小开

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

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

小开

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

更有可能的是，您的页面被用作text/html，它遵循更宽松的超文本标记语言语法。在这些情况下，HTML5允许某些开始标记在终止>之前有一个可选的/。在这些情况下，/是可选的并且被忽略，所以<hr>和<hr />是相同的。超文本标记语言规范调用这些“空元素”，并给出一个有效元素的列表。严格来说，可选的/仅在这些空元素的开始标记内有效；例如，<br />和<hr />是有效的HTML5，但<p />不是。

HTML5规范明确区分了超文本标记语言作者和Web浏览器开发人员的正确做法，第二组被要求接受各种无效的“遗留”语法。在这种情况下，这意味着符合HTML5的浏览器将接受非法的自封闭标签，如<p />，并按照您可能期望的方式呈现它们。但对于作者来说，该页面将没有有效HTML5。（更重要的是，使用这种非法语法获得的DOM树可能会被严重破坏；例如，自封闭的<span />标签往往会搞砸很多）。

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

小开

自关闭div不会验证。这是因为div是正常元素，而不是无效元素。

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

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

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

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

小开

HTML5基本上表现得好像尾部斜杠不存在。HTML5语法中没有自关闭标记这样的东西。

  • 在非无效元素（如<p/>、<div/>）上的自关闭标签根本不起作用。尾随的斜杠将被忽略，这些将被视为开始标签。这可能会导致嵌套问题。

    无论斜杠前面是否有空格，这都是正确的：出于同样的原因，<p />和<div />也不起作用。

  • 无效元素（如<br/>或<img src="" alt=""/>将）上的自关闭标记可以工作，但只是因为后面的斜杠被忽略了，在这种情况下，这恰好会导致正确的行为。

结果是，在旧的“XHTML 1.0用作text/html”中工作的任何内容都将继续像以前一样工作：非空标签上的尾随斜杠在那里也不被接受，而空元素上的尾随斜杠工作。

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

小开

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

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

我的直觉应该是<span></span><span></span>

小开

但是-只是为了记录-这是无效的：

<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"/>
小开

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

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

以自关闭标签<br>为例。

即使您编写<br/>或<br />，它们最终也会在浏览器中转换为<br>。

在以/>或 />结尾的自关闭标签中，/（斜杠）和空白将被简单地忽略。

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

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

The above code will look like the following image in the browser.

enter image description here

You can see all converted to <br>. So it's your choice to close the self-closing tag or not but they are completely valid.


提交答案