(非无效)自动关闭标记在HTML5中有效吗?

W3C验证不喜欢自闭合标签(那些一端与“ />上“)非空元素。(无效元素是可能永远不包含任何内容的元素。)它们在HTML5中仍然有效吗?

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

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

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

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

注意: W3C验证器实际上接受无效的自动关闭标签:最初由于简单的错字\>不是/>),作者遇到了问题但是,自关闭标签在HTML5中通常不是100%有效的,答案详细说明了各种HTML风格的自关闭标签。

Harry前端Itachi2020/03/18 10:07:45

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

<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"/>
番长Itachi2020/03/18 10:07:45

HTML5的行为基本上就像没有尾部斜杠一样。HTML5语法中没有自动关闭标记之类的东西。

  • 自动关闭的标签非空元素,比如<p/><div/>不会在所有的工作。尾部的斜杠将被忽略,这些将被视为开始标记。这很可能导致嵌套问题。

    不管斜杠前面是否有空格,这都是正确的:<p />并且<div />出于相同的原因也不会起作用。

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

结果是,在旧的“ XHTML 1.0用作text / html”中工作的所有内容都将像以前一样继续工作:非空标记的尾部斜杠在这里也不被接受,而void元素的尾部斜杠也可以工作。

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

猿EvaL2020/03/18 10:07:45

在实践中,在HTML中使用自动关闭标签应该可以按预期工作。但是,如果您担心编写有效的 HTML5,则应该了解此类标记的使用在两种可以使用的两种语法形式中的行为方式。HTML5定义了HTML语法和XHTML语法,它们相似但不相同。使用哪一种取决于Web服务器发送的媒体类型。

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

The HTML5 spec makes a clear distinction between what is correct for HTML authors and for web browser developers, with the second group being required to accept all kinds of invalid "legacy" syntax. In this case, it means that HTML5-compliant browsers will accept illegal self-closed tags, like <p />, and render them as you probably expect. But for an author, that page would not be valid HTML5. (More importantly, the DOM tree you get from using this kind of illegal syntax can be seriously screwed up; self-closed <span /> tags, for example, tend to mess things up a lot).

(在不寻常的情况下,您的服务器知道如何将XHTML文件作为XML MIME类型发送,该页面需要符合XHTML DTD和XML语法。这意味着对这样定义的元素需要使用自动关闭标签。)

阳光LEY2020/03/18 10:07:45

正如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>无效。

*注意:外部元素也可以自动关闭,但我认为此答案不在此范围内。

番长阳光2020/03/18 10:07:45

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

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

伽罗蛋蛋2020/03/18 10:07:44
  • HTML 4中<foo /(是,完全没有>)意味着<foo>(导致<br />含义<br>>(即<br>&gt;)和<title/hello/意义<title>hello</title>)。这是一条SGML规则,浏览器在支持方面做得很差,并且该规范建议作者避免使用语法

  • XHTML中<foo />是指<foo></foo>这是一条适用于所有XML文档XML规则。也就是说,XHT​​ML通常用作text/html(至少在历史上)由浏览器使用与用作文档的解析器不同的解析器来处理的HTML application/xhtml+xmlW3C提供了XHTML遵循的兼容性指南text/html(本质上:仅当元素定义为EMPTY时才使用自闭标签语法(并且HTML规范中禁止使用结束标签))。

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

    • 在被指定为void元素的 HTML元素上(本质上是“在HTML5之前存在并且被禁止包含任何内容的元素”),最终标签被简单地禁止了。在开始标记末尾的斜杠是允许的,但没有任何意义。对于仅沉迷于XML的人员(和语法突出显示)来说,它只是语法糖。
    • 在其他HTML元素上,斜杠是一个错误,但是错误恢复将导致浏览器将其忽略,并将该标记视为常规的开始标记。这通常会导致缺少结束标签,导致后续元素成为子元素而不是兄弟元素。
    • 外部元素(从SVG等XML应用程序导入)将其视为自动关闭语法。