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 风格的自闭合标签的问题。
(理论上)在HTML 4 中, <foo /
(是,根本没有>
)表示<foo>
(这导致<br />
表示<br>>
(即<br>>
)和<title/hello/
表示<title>hello</title>
)。我使用 “理论上” 一词,因为这是SGML规则,浏览器在支持方面做得很差。很少有人支持(我只在emacs-w3m 中看到过这种支持),因此该规范建议作者避免使用语法。
在XHTML 中, <foo />
表示<foo></foo>
。这是一条适用于所有 XML 文档的 XML 规则。就是说,XHTML 通常用作text/html
,至少在历史上,XHTML 是由浏览器使用与用作application/xhtml+xml
文档不同的解析器处理的。 W3C 提供了 XHTML 作为text/html
遵循的兼容性指南。 (本质上:仅当元素定义为 EMPTY 时才使用自闭标签语法(并且 HTML 规范中禁止使用结束标签))。
在HTML5 中<foo />
的含义取决于 element 的类型:
正如 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>
无效。
* 注意:外部元素也可以自动关闭,但我认为此答案不在此范围之内。
在实践中,在 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 语法。这意味着对于这样定义的元素,需要使用自动关闭标签。)