(非无效)自闭标签在HTML5中有效吗?

W3Cvalidation器不喜欢非空元素上的自闭标记(以“ /> ”结尾)。 (空元素是那些可能永远不会包含任何内容的元素。)它们在HTML5中仍然有效吗?

一些被接受的无效元素的例子:

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

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

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

注意: W3Cvalidation器实际上接受无效自闭标签:作者最初有一个问题,因为一个简单的错字 (而不是/> )。 但是,自我closures标签在HTML5中通常不是100%有效,而且这些答案详细讨论了各种HTML风格的自我closures标签的问题。

    6 Solutions collect form web for “(非无效)自闭标签在HTML5中有效吗?”

    • HTML 4中<foo / (yes,no > )意味着<foo> (这会导致<br />含义<br>> (即<br>&gt; )和<title/hello/含义<title>hello</title> )。 浏览器在支持这方面做得很差,规范build议作者避免使用这种语法 。

    • XHTML中<foo />意味着<foo></foo> ,但是由于这只能在XMLparsing模式下工作,并且大多数文档都以text / html的forms提供,所以遵循兼容性原则 。

    • HTML5中<foo />的含义取决于元素的types 。

      • 在被指定为空元素的 HTML元素(本质上是“HTML 5之前存在且被禁止有任何内容的元素”)时,简单地禁止结束标记。 开始标签末尾的斜线是允许的,但没有意义。 对于那些沉迷于XML的人来说,这只是语法糖(和语法荧光笔)。
      • 在其他HTML元素上,斜线是一个错误,但错误恢复将导致浏览器忽略它,并将标记视为常规的开始标记。 这通常会导致结尾标签丢失,导致后续元素成为孩子而不是兄弟姐妹。
      • 外部元素(从XML应用程序(如SVG导入))将其视为自闭句法。

    正如Nikita Skvortsov所指出的那样,一个自闭的div将不会被validation。 这是因为div是一个正常的元素 ,而不是一个无效的元素 。 根据HTML5规范 ,不能有任何内容的标签(被称为空元素 )可以是自闭的*。 这包括以下标签:

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

    在上面的标签中,“/”是完全可选的,所以<img/><img>没有区别,但是<img></img>是无效的。

    *注: 外国元素也可以自我closures,但我不认为这是在这个答案的范围。

    实际上,在HTML中使用自闭标签应该像你期望的那样工作。 但是如果您关心编写有效的 HTML5,您应该了解如何在这两种不同的语法forms中使用这些标签。 HTML5同时定义了一个HTML语法和一个XHTML语法,它们是相似但不相同的。 使用哪一个取决于Web服务器发送的媒体types。

    更可能的是,您的页面被作为text/html ,它遵循更宽松的HTML语法。 在这些情况下,HTML5允许某些开始标记在结束之前有一个可选的/。 在这些情况下,/是可选的并被忽略,所以<hr><hr />是相同的。 HTML规范调用了这些“void元素”,并给出了一个有效的列表。 严格来说,可选项/只在这些void元素的开始标记中有效; 例如, <br /><hr />是有效的HTML5,但<p />不是。

    HTML5规范明确区分了HTML作者和networking浏览器开发者的正确之处,第二个要求接受各种无效的“传统”语法。 在这种情况下,这意味着符合HTML5的浏览器将接受非法的自封闭标签,如<p /> ,并按照您的预期呈现它们。 但是对于作者来说,该页面将不是有效的HTML5。 (更重要的是,使用这种非法语法所得到的DOM树可能会被严重搞砸;例如,自封闭的<span />标签往往会让事情变得非常糟糕 )。

    (在您的服务器知道如何将XHTML文件作为XML MIMEtypes发送的exception情况下,页面需要符合XHTML DTD和XML语法,这意味着自定义标签对于这些定义的元素是必需的。

    基本上,HTML5的行为就像后面的斜杠不在那里一样。 HTML5语法中不存在自闭标签。

    • 非空元素(如<p/><div/>上的自闭标记根本不起作用。 尾部斜线将被忽略,这些将被视为开放标签。 这可能会导致嵌套问题。

      无论斜线前面是否有空格,情况都是如此: <p /><div />也不会出于同样的原因。

    • void或者<img src="" alt=""/>这样的void元素上的自动closures标签将会起作用,但仅仅是因为尾部的斜杠被忽略,并且在这种情况下会导致正确的行为。

    结果是,任何在你旧的“XHTML 1.0作为text / html”工作的东西将继续像以前一样工作:在非void标签上的尾部斜线不被接受,而在void元素上的尾部斜线起作用。

    还有一点需要注意:可以将HTML5文档表示为XML,有时也称为“XHTML 5.0”。 在这种情况下,XML应用规则和自闭标签将始终处理。 它总是需要以XML MIMEtypes来提供。

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

    <br><br />都很好。

    我将非常小心自我结束标签,如下例所示:

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

    我的直觉就是<span></span><span></span>