（非空）自动关闭标签在HTML5中有效吗？-Java 学习之路

582

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

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



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

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

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

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

7 回答

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

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

回复于 2024-05-01T01:55:05+08:00

7
HTML5基本上表现得好像没有尾随斜杠 . HTML5语法中没有自闭标签这样的东西 .
- 非空元素（如  ， <div/> ）上的自动关闭标签根本不起作用 . 尾部斜杠将被忽略，这些将被视为开始标记 . 这可能会导致嵌套问题 .
无论斜杠前面是否有空格，都是如此：  和 <div /> 也不会出于同样的原因 .
- 像或 <img src="" alt=""/> 这样的void元素上的自闭标签可以工作，但只是因为忽略了尾部斜杠，在这种情况下恰好会导致正确的行为 .
结果是，在您的旧“XHTML 1.0作为text / html”中起作用的任何东西将继续像以前那样工作：在那里不接受非void标记上的尾部斜杠，而void元素上的尾部斜杠工作 .

还有一点需要注意：可以将HTML5文档表示为XML，这有时被称为"XHTML 5.0" . 在这种情况下，应用XML规则并始终处理自闭合标记 . 它总是需要使用XML mime类型 .
回复于 2024-05-01T01:55:05+08:00
1

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

  和都很好 .

回复于 2024-05-01T01:55:05+08:00
0
- 在 HTML 4 中， <foo / （是的，完全没有 > ）意味着 <foo> （这导致表示  > （即  > ）和 <title/hello/ 表示 <title>hello</title> ） . 浏览器在支持这方面做得很差，并且the spec advises authors to avoid the syntax .
- 在 XHTML ，<foo /> means <foo></foo> . 这是一个适用于所有XML文档的 XML 规则 . 也就是说，XHTML通常用作 text/html （历史上至少）由浏览器使用与用作 application/xhtml+xml 的文档不同的解析器进行处理 . W3C提供compatibility guidelines以跟随XHTML为 text/html . （基本上：当元素定义为EMPTY时（仅在HTML规范中禁止结束标记），仅使用自动关闭标记语法） .
- 在 HTML5 中， <foo /> depends on the type of element的含义 .
- 在指定为void元素的HTML元素（基本上是"An element that existed before HTML5 and which was forbidden to have any content"）上，仅禁止结束标记 . 允许使用开始标记末尾的斜杠，但没有任何意义 . 它只是沉迷于XML的人（和语法高亮）的语法糖 .
- 在其他HTML元素上，斜杠是一个错误，但错误恢复将导致浏览器忽略它并将标记视为常规开始标记 . 这通常会导致缺少结束标记，导致后续元素成为子元素而不是兄弟元素 .
- 外部元素（从SVG等XML应用程序导入）将其视为自动关闭语法 .
回复于 2024-05-01T01:55:05+08:00
373
我会非常小心自闭项标签，如下例所示：
```
var a = '';
var d = document.createElement('div');
d.innerHTML = a
console.log(d.innerHTML) // ""
```
我的直觉本来就是 
回复于 2024-05-01T01:55:05+08:00
1161

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

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

HTML5规范明确区分了HTML作者和Web浏览器开发人员的正确性，第二组需要接受各种无效的"legacy"语法 . 在这种情况下，这意味着符合HTML5的浏览器将接受非法的自闭标签，如  ，并按照您的预期呈现它们 . 但对于作者来说，该页面不是有效的HTML5 . （更重要的是，使用这种非法语法得到的DOM树可以严重搞砸;例如，自闭式  标签往往会弄乱很多东西） .

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

回复于 2024-05-01T01:55:05+08:00
59
正如Nikita Skvortsov所指出的那样，一个自我关闭的div将无法验证 . 这是因为div是 normal element ，而不是 void element . 根据the HTML5 spec，不能包含任何内容的标签（称为 void elements ）可以自动关闭* . 这包括以下标记：
```
area, base, br, col, embed, hr, img, input, 
keygen, link, meta, param, source, track, wbr
```
"/"在上述标签上是完全可选的，因此 <img/> 与 <img> 没有区别，但 <img></img> 无效 .

*注意： foreign elements 也可以自动关闭，但我不会在这个答案范围内使用't think that' .
回复于 2024-05-01T01:55:05+08:00

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

7 回答

相关问题