Are (non-void) self-closing tags valid in HTML5?
W3C验证器不喜欢非void元素上的自闭标签(以"
可接受的void元素的一些示例：
1 2 3 | <br /> <img src="" /> <input type="text" name="username" /> |
被拒绝的非空元素的一些例子：
1 2 | <span id="mySpan" /> <textarea id="someTextMessage" /> |
注意：W3C验证器实际上接受无效的自动关闭标签：由于简单的拼写错误(
-
在HTML 4中，
(是的，完全没有 > )意味着> (即> )并且意味着<wyn>hello</wyn>)。这是一个SGML规则，浏览器的支持工作非常糟糕，规范建议作者避免使用语法。 </p> </li> <li> <p> 在XHTML中，<wyn><foo /></wyn>表示<wyn><foo></foo></wyn>。这是适用于所有XML文档的XML规则。也就是说，XHT??ML通常用作<wyn>text/html</wyn>(历史上至少)由浏览器使用与用作<wyn>application/xhtml+xml</wyn>的文档不同的解析器进行处理。 W3C为XHTML提供了遵循<wyn>text/html</wyn>的兼容性指南。 (基本上：当元素定义为EMPTY时，仅使用自动关闭标记语法(并且HTML规范中禁止结束标记))。 </p> </li> <li> <p> 在HTML5中，<wyn><foo /></wyn>的含义取决于元素的类型。 </p> <ul> <li> 在指定为void元素的HTML元素上(实质上是"在HTML5之前存在且禁止包含任何内容的元素")，仅禁止结束标记。允许使用开始标记末尾的斜杠，但没有任何意义。它只是沉迷于XML的人(和语法荧光笔)的语法糖。 </li> <li> 在其他HTML元素上，斜杠是一个错误，但错误恢复将导致浏览器忽略它并将标记视为常规开始标记。这通常会以缺少结束标记结束，导致后续元素成为子元素而不是兄弟元素。 </li> <li> 外部元素(从SVG等XML应用程序导入)将其视为自动关闭语法。 </li> </ul> </li> </ul> <div class="suo-content"><div style="text-align: right;"> <div class="xControl"><i class="fa fa-caret-right"></i> <span class="xTitle"></span> <a href="javascript:void(0)" class="collapseButton xButton">相关讨论</a> <div style="clear: both;"></div> </div> <div class="xContent" style="display: none;"></p> <ul> <li> @ mb21 - 不，<wyn>></wyn>没有丢失。 HTML 4的<wyn><foo /></wyn>大小写在该部分的括号中的句子中。 </li> <li> "......谁沉迷于XML。"您似乎认为XML合规性很差。然而，HTML5的最终结果似乎是我们仍然必须处理有角度的括号(即具有XML的大多数不便之处)，同时它使得使用基于XML的工具(例如模板工具或各种处理器)变得更加困难)。即使从生成的角度来看，似乎<wyn><object data="..." /></wyn>??和<wyn><img src="..."></src></wyn>都不正常，而<wyn><object data="..."></object></wyn>和<wyn><img src="..." /></wyn>，这使得工具一致性变得更难。这看起来像是双输局面。 </li> <li> @Bruno - HTML早于XML。让人们转向XHTML的努力失败了。使用<wyn>text/html</wyn>，浏览器不会对斜杠赋予任何特殊含义，因此包含它不具有实际意义。它只是让那些无法摆脱习惯的人看起来更像XML。 </li> <li> @Quentin我并不完全不同意。我觉得有点遗憾的是，有效的XML等价物不一定是有效的HTML5(例如<wyn><img ...></img></wyn>而不是<wyn><img ...></wyn>或<wyn><img ... /></wyn>)。由于HTML5通常不那么严格(可能是XHTML失败的原因)，因此很可能容忍像<wyn><img ...></img></wyn>这样的东西。不幸的是，它没有，所以基于XML的模板生成器需要知道如何区分void元素或自闭元素的生成：你甚至不能有一个规则来说所有空元素都写为<wyn><tag></tag></wyn>。 </li> <li> XHTML在HTML 5即将到来之前就失败了，你不能拥有长格式的空元素，因为早于XHTML的浏览器错误纠正会将<wyn></br></wyn>视为<wyn></wyn>，所以<wyn></br></wyn>将是一个双重换行符。 (向后兼容现实世界的坏标记(如<wyn></br></wyn>)是HTML 5)的设计目标之一。 </li> <li> FROM W3C：Void元素：area，base，br，col，embed，hr，img，input，keygen，link，meta，param，source，track，wbr"Void元素只有一个开始标记;不能指定结束标记对于虚空元素。" w3.org/TR/html5/syntax.html#void-elements </li> <li> @Triynko - 正如答案所说，这是有效的。毫无意义的膨胀，但有效毫无意义的臃肿。 </li> <li> 这个答案非常自以为是。 </li> <li> @Feuermurmel - 真的吗？我可以看到整个事情中有两个句子具有固执的倾向(我不认为很多人会不同意我的评估，浏览器对支持有限的SGML功能的支持很差，Emacs-W3是我遇到的唯一一个浏览器对他们有任何支持)，甚至他们大多都是事实。 </li> <li> @Quentin句子"这只是沉迷于XML的人们的语法糖。"让我觉得你没有写这个答案来呈现或解释事实，而是诱使人们以这样或那样的方式思考它。它类似于"加载的问题"，尽管不是问题的形式。 </li> <li> 这个答案绝对正确。我加入了我的意见，因为我无法自拔？虽然在HTML中不需要自动关闭的空标记，但我强烈认为它们应该被认为是最佳实践。令人遗憾的是，XHTML从未流行，因为XML增加了HTML所没有的额外功能，即模式验证和转换。现在授予这些新增功能实际上很少有用，但我认为没有理由不遵守该语法。在我看来，他们也使标记更清晰。</li> <li> 虽然在HTML5中被认为是多余的，但我发现自我关闭语法提供的边缘节点和叶节点之间的视觉区别足以提供易读性，因此它值得一致使用。它本身并非"毫无意义";我使用它的原因与明确关闭<wyn></p> <p> </wyn>＆amp; <wyn></p> <li> </wyn>。再说一次，我是一个毫不掩饰的XHTML 1.1 Strict瘾君子。 :-)(我内心的学生有点伤感，它从来没有流行起来。我曾经摇摇欲坠的一个相当歧视的个人页面，作为<wyn>application/xhtml+xml</wyn>，只能由Mozilla浏览器解析。它有一个"Too Cool for IE"角落里的徽章......有趣的时刻！) </li> <li> 天哪。我一直都错了，对这么多无辜的人都这么诅咒。 </li> <li> 总之，我们总能用<wyn>/></wyn>替换<wyn>/></wyn>吧？ </li> <li> @vanabel - 仅适用于void元素，仅适用于HTML 5。 </li> </ul> <p></div> </div></p></div> <hr> <p> 正如Nikita Skvortsov所指出的那样，一个自我关闭的div将无法验证。这是因为div是普通元素，而不是void元素。 </p> <p> 根据HTML5规范，不能包含任何内容的标签(称为void元素)可以自动关闭*。这包括以下标记： </p> <div class="codecolorer-container text dawn" style="overflow:auto;white-space:nowrap;width:100%;"><table cellspacing="0" cellpadding="0"><tbody><tr><td class="line-numbers"><div>1<br />2<br /></div></td><td><div class="text codecolorer">area, base, br, col, embed, hr, img, input, <br /> keygen, link, meta, param, source, track, wbr</div></td></tr></tbody></table></div> <p> 但是，"/"在上述标签上是完全可选的，因此<wyn><img/></wyn>与<wyn><img></wyn>没有区别，但<wyn><img></img></wyn>无效。 </p> <p> *注意：外国元素也可以自我关闭，但我不认为这是答案的范围。 </p> <div class="suo-content"><div style="text-align: right;"> <div class="xControl"><i class="fa fa-caret-right"></i> <span class="xTitle"></span> <a href="javascript:void(0)" class="collapseButton xButton">相关讨论</a> <div style="clear: both;"></div> </div> <div class="xContent" style="display: none;"></p> <ul> <li> IE10的开发者工具给了我"HTML1500：标签不能自动关闭。使用明确的结束标签。"在线<meta charset ="UTF-8"/>任何想法为什么会这样？ </li> <li> 好吧，我发现自闭标签不应该有斜线(删除它会修复我的错误)。引用：tiffanybbrown.com/2011/03/23/… </li> <li> 规格已经改变。现在，"void"或"self-closing"元素在作为HTML 5 doctype时不应包含斜杠。但是，如果它被用作XHTML，则可能需要结束斜杠(在这种情况下请检查文档)。在实际使用中，页面通常会按预期显示，即使已包含结束<wyn>/</wyn>，但这不是保证(它取决于浏览器有效地为您重写代码，并按照您的意图解释它。)此外，如果由于某种原因，您的页面需要通过HTML 5验证，如果您关闭void元素的标签，它可能无法通过。 </li> <li> 关于@ SherylHohman的评论，我不相信规范已经改变(或者如果已经改变，它已经改变了)。请参阅w3.org/TR/html5/syntax.html#start-tags(8.1.2.1.6) - void(或外部)元素可能仍包含斜杠。 </li> </ul> <p></div> </div></p></div> <p><center> <script src="/c1.js"></script></center></p> <hr> <p> 实际上，在HTML中使用自闭标签应该像您期望的那样工作。但是，如果您担心编写有效的HTML5，您应该了解这些标记的使用在您可以使用的两种不同的两种语法形式中的行为。 HTML5定义了HTML语法和XHTML语法，它们相似但不相同。使用哪一个取决于Web服务器发送的媒体类型。 </p> <p> 很可能，您的页面将作为<wyn>text/html</wyn>提供，它遵循更宽松的HTML语法。在这些情况下，HTML5允许某些开始标记在其终止之前具有可选/。在这些情况下，/是可选的并被忽略，因此<wyn></wyn>和<wyn></p> <hr /></wyn>是相同的。 HTML规范称这些"void elements"，并给出一个有效的列表。严格地说，可选/仅在这些void元素的开始标记内有效;例如，<wyn><br /></wyn>和<wyn></p> <hr /></wyn>是有效的HTML5，但<wyn></p> <p /></wyn>不是。 </p> <p> HTML5规范明确区分了HTML作者和Web浏览器开发人员的正确性，第二组需要接受各种无效的"遗留"语法。在这种情况下，这意味着符合HTML5的浏览器将接受非法的自闭标签，如<wyn></p> <p /></wyn>，并按照您的预期渲染它们。但对于作者来说，该页面不是有效的HTML5。 (更重要的是，使用这种非法语法得到的DOM树可能会被严重搞砸;例如，自闭的<wyn><span /></wyn>标签往往会搞砸了很多东西)。 </p> <p> (在不常见的情况下，您的服务器知道如何将XHTML文件作为XML MIME类型发送，该页面需要符合XHTML DTD和XML语法。这意味着对于那些定义的元素，需要自动关闭标记。) </p> <div class="suo-content"><div style="text-align: right;"> <div class="xControl"><i class="fa fa-caret-right"></i> <span class="xTitle"></span> <a href="javascript:void(0)" class="collapseButton xButton">相关讨论</a> <div style="clear: both;"></div> </div> <div class="xContent" style="display: none;"></p> <ul> <li> <p />将被视为开始标记，而不是自封闭标记。这意味着文档的整个剩余部分将被视为在P元素内。这不是我"可能期望的"，并且会在任何非平凡的页面上产生严重的混乱。 </li> </ul> <p></div> </div></p></div> <hr> <p> HTML5的行为基本上就像没有尾随斜杠一样。在HTML5语法中没有自闭标签这样的东西。 </p> <ul> <li> <p> 非空元素(如<wyn></p> <p/></wyn>，<wyn></wyn>)上的自闭标签根本不起作用。尾部斜杠将被忽略，这些将被视为开始标记。这可能会导致嵌套问题。 </p> <p> 无论斜杠前面是否有空格，都是如此：<wyn></p> <p /></wyn>和<wyn></wyn>也不会出于同样的原因。 </p> </li> <li> <p> 像<wyn><br /></wyn>或<wyn><img src="" alt=""/></wyn>这样的void元素上的自闭标签可以工作，但这只是因为忽略了尾部斜杠，在这种情况下恰好会导致正确的行为。 </p> </li> </ul> <p> 结果是，在旧的"XHTML 1.0作为text / html"中起作用的任何东西都将继续像以前一样工作：在非void标签上的尾部斜杠也不会被接受，而void元素上的尾部斜杠工作。 </p> <p> 还有一点需要注意：可以将HTML5文档表示为XML，这有时被称为"XHTML 5.0"。在这种情况下，XML的规则适用，并且将始终处理自动关闭标签。总是需要使用XML mime类型。 </p> <hr> <p> 自闭标签在HTML5中有效，但不是必需的。 </p> <p> <wyn></wyn>和<wyn><br /></wyn>都很好。 </p> <div class="suo-content"><div style="text-align: right;"> <div class="xControl"><i class="fa fa-caret-right"></i> <span class="xTitle"></span> <a href="javascript:void(0)" class="collapseButton xButton">相关讨论</a> <div style="clear: both;"></div> </div> <div class="xContent" style="display: none;"></p> <ul> <li> 根据HTML5规范，自关闭语法(<wyn>/></wyn>)不能用于非void HTML元素。 </li> <li> 问题是关于非空元素的自闭标签，如<wyn><p/></wyn>或<wyn></wyn>。 </li> <li> 最初的问题不是关于非空元素。更像是，您是否仍然可以像在XHTML中一样使用<wyn><... /></wyn>，或者您是否必须删除HTML5中的<wyn>/</wyn>。之后问题被多次改变了。 </li> <li> 无论哪种方式，答案是斜杠将被忽略，这将破坏未声明为void的元素，但将与void元素兼容。 </li> </ul> <p></div> </div></p></div> <hr> <p> 我会非常小心自闭项标签，如下例所示： </p> <div class="codecolorer-container text dawn" style="overflow:auto;white-space:nowrap;width:100%;"><table cellspacing="0" cellpadding="0"><tbody><tr><td class="line-numbers"><div>1<br />2<br />3<br />4<br /></div></td><td><div class="text codecolorer">var a = '<span/><span/>';<br /> var d = document.createElement('div');<br /> d.innerHTML = a<br /> console.log(d.innerHTML) //"<span><span></span></span>"</div></td></tr></tbody></table></div> <p> 我的直觉本来是<wyn><span></span><span></span></wyn> </p> <div class="suo-content"><div style="text-align: right;"> <div class="xControl"><i class="fa fa-caret-right"></i> <span class="xTitle"></span> <a href="javascript:void(0)" class="collapseButton xButton">相关讨论</a> <div style="clear: both;"></div> </div> <div class="xContent" style="display: none;"></p> <ul> <li> 这在接受的答案中描述：<wyn>On other [than void] HTML elements, the slash is an error, but error recovery will cause browsers to ignore it and treat the tag as a regular start tag. This will usually end up with a missing end tag causing subsequent elements to be children instead of siblings.</wyn></li> </ul> <p></div> </div></p></div> <p><center> <script src="/c2.js"></script></center></p> <hr> <p> 但是 - 只是为了记录 - 这是无效的： </p> <div class="codecolorer-container text dawn" style="overflow:auto;white-space:nowrap;width:100%;"><table cellspacing="0" cellpadding="0"><tbody><tr><td class="line-numbers"><div>1<br />2<br />3<br />4<br /></div></td><td><div class="text codecolorer"> <svg viewBox="0 0 800 400"><br /> <rect width="800" height="400" fill="#000"><br /> </svg><br /> </address></div></td></tr></tbody></table></div> <p> 这里的斜线会使它再次有效： </p> <div class="codecolorer-container text dawn" style="overflow:auto;white-space:nowrap;width:100%;"><table cellspacing="0" cellpadding="0"><tbody><tr><td class="line-numbers"><div>1<br /></div></td><td><div class="text codecolorer"> <rect width="800" height="400" fill="#000"/></div></td></tr></tbody></table></div> <hr></div> <div class="recommend-post mb30"> <ul class="widget-links"> <li><a href="/3090369/" target="_blank">禁用HTML5表单元素的验证</a></li> <li><a href="/10281962/" target="_blank">HTML5中是否有minlength验证属性？</a></li> </ul> </div> </div> <script src="/ce.js"></script> <div class="clear"></div> <div class="social-main"> <div class="clear"></div> </div> <div class="clear"></div> </div><!-- .entry-content --> </article><!-- #post --> <div class="ad-pc ad-site"> </div> </main><!-- .site-main --> </div><!-- .content-area --> <div id="sidebar" class="widget-area"> <div class="sidebar-roll"></div> <aside id="text-3" class="widget widget_text"> <div class="textwidget"><p><script src="/ce.js"></script></p> </div> <div class="clear"></div></aside> <div class="sidebar-roll"> <aside id="text-2" class="widget widget_text"> <div class="textwidget"><p><script src="/auto.js"></script></p> </div> <div class="clear"></div></aside> </div> </div> </div> <div class="clear"></div> </div><!-- .site-content --> <div id="footer" alog-group="log-footer"> <div class="foot"> <div class="ps"> <div class="p p2"> <div class="clear"></div> <div class="site-info"> Copyright © 码农家园 联系：ddyu2x@gmail.com </div> </div> </div> </div> </div> <div class="tools"> <a class="tools_top" title="返回顶部"></a> </div> <script type="text/javascript" src="https://www.codenong.com/wp-content/themes/Nana/js/superfish.js"></script> <script type='text/javascript' src='https://www.codenong.com/wp-includes/js/wp-embed.min.js?ver=4.9.15'></script> </body></html> <!-- Dynamic page generated in 0.145 seconds. --> <!-- Cached page generated by WP-Super-Cache on 2023-07-07 18:04:29 --> <!-- super cache -->