< div>< / div> vs< div /> [英] <div></div> vs <div />
问题描述
我想了解为什么是浏览器显示< div>< / div> verses< div />？
I am trying to understand why is there a difference in how a browser displays <div></div> verses <div />?
这里是一个例子：snippet＃1的预期输出是并排的三个框：[black] ，[红色]。代码段＃2只显示[黑色]和[红色] - 不是片段2中呈现的[蓝色]框？
Here is an example: The expected output of snippet #1 is three boxes, side by side: [black], [blue], [red]. Snippet #2 only displays [black] and [red] - Why isn't the [blue] box rendered in snippet #2?
<div style="float:left; width:50px; height:50px; background:black;"></div>
<div style="float:left; width:50px; height:50px; background:blue;"></div>
<div style="float:left; width:50px; height:50px; background:red;"></div>
2：
2:
<div style="float:left; width:50px; height:50px; background:black;"></div>
<div style="float:left; width:50px; height:50px; background:blue;" />
<div style="float:left; width:50px; height:50px; background:red;"></div>
编辑：我使用的是Chrome 12& html5：<！doctype html>
I am using Chrome 12 & html5: <!doctype html>
推荐答案
主要是因为 div /> 是无效的HTML。
Mainly because <div /> is not valid HTML.
如果你看看不同的doctypes，你会注意到div不能自我关闭
If you have a look through the different doctypes you'll notice that div cannot be self closing.
根据W3C：
div元素必须开始标记和结束标记。
A div element must have both a start tag and an end tag.
资料来源： http://www.w3.org/TR/html-markup/div.html
包含Chucks评论在这里，HTML中的尾部斜杠不是一个自我关闭的标签。使用尾部斜杠的自动结束标记是XHTML的功能，而不是HTML。
To include Chucks comment here also, a trailing slash in HTML does not a self closing tag make. Self closing tags using a trailing slash are a feature of XHTML, not HTML.
这篇关于< div>< / div> vs< div />的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
