(非空)自动关闭标签在HTML5中有效吗？

Question

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

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

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

被拒绝的非虚元素的一些例子:

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

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

Answer 1

• 在HTML 4中,<foo /(是的,完全没有>)意味着<foo>(这导致<br />意义<br>>(即<br>&gt;)和<title/hello/含义<title>hello</title>).这是一个SGML规则,浏览器的支持工作非常糟糕,规范建议作者避免使用语法.

• 在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应用程序导入)将其视为自动关闭语法.

Answer 2

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

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

Answer 3

实际上,在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语法.这意味着对于那些定义的元素,需要自动关闭标记.)

Answer 4

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

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

  无论斜线前面是否有空格,都是如此:<p />并且<div />由于同样的原因也不起作用.

• void元素上的自闭合标记会起作用<br/>或者<img src="" alt=""/> 会起作用,但这只是因为忽略了尾部斜杠,并且在这种情况下恰好会导致正确的行为.

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

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

Answer 5

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

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

Answer 6

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

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

我的直觉会<span></span><span></span>改为