<div /> 和 <div></div> 有区别吗？答案

【问题标题】：Is there a difference between <div /> and <div></div>?<div /> 和 <div></div> 有区别吗？
【发布时间】：2010-11-27 12:37:16
【问题描述】：

在我的网页上遇到了一个问题，即母版页中的页脚在某个特定页面上没有正确显示。在那个页面上，我有一个

<div style="clear:both" /> 在底部。

在我头疼了一会儿之后，我发现我需要更改以使页脚正确显示，只需将该行更改为：

<div style="clear:both"></div>

我不明白为什么这样写会产生不同的结果。它们在语义上不是等价的吗？我检查并再次检查这是我所做的唯一更改。在两者之间来回切换会改变页脚的行为。

所以我的问题是……那些不相等吗？它们有什么区别？

编辑：奇怪的是，他们都按照我想要的方式处理页面中的内容。我的意思是，在自动关闭的 div 标签的情况下，如果我完全删除它，页面肯定会做出反应，所以它必须对它做一些事情，而不是完全忽略它。

【问题讨论】：

到目前为止，我注意到这个是没用的，并且不放这个 / 在所有情况下显然都具有相同的效果。有正文的标签需要它的
所以基本上第一个示例被视为未封闭的 div？这很有意义。谢谢大家！
既然你已经接受了一个答案，你可能不会再看这个了，所以在评论中总结我的答案：
在 XHTML 下是合法的，而不是严格的 HTML 4.01。 DOCTYPE（如果存在）告诉您的浏览器使用哪个，如果没有 DOCTYPE，则允许浏览器做任何事情。
不，仍在阅读，并为您点赞。感谢大家的回复。
@Sterno - 请注意 David Dorward 对 kdgregory 回答的评论。这与 DOCTYPE 或有效性几乎无关。重要的是内容类型以及浏览器如何根据该内容类型解析标记。
仅当浏览器将标记处理为 XML 时才会像您想象的那样工作，而 FF、Opera、Chrome 和 Safari 只有在内容类型是 application/xhtml+xml 或 application/xml 时才会这样做。无论任何内容类型，IE 都不会这样做。

标签： html xhtml

【解决方案1】：

<div /> 不是有效标记。不允许使用自闭合标签。

您需要使用完整版<div></div>。

一个自闭合的 div 标签是没有意义的，因为它会导致一个空的 div。大多数浏览器通常不会呈现一个空的 div。

【讨论】：

显然，这似乎是正确的答案。但是，我不明白，如果
无效，为什么它仍然会像我希望的那样影响页面上的内容。我在 FF3、FF2、IE6 和 IE7 中看到了这一点。如果我完全删除自动关闭的 div，页面的行为肯定会有所不同。
仅在 HTML 4.01 下无效。在没有 DOCTYPE 的情况下，允许浏览器更宽松地接受它们。
因为
被浏览器错误地视为尚未关闭的
标签。因此，在它之后的所有东西都被认为是在它里面。由于标记在文档的其余部分中从未完成，因此文档本身格式错误并导致呈现差异。
@Sterno，我想这取决于每个浏览器的渲染引擎如何处理无效的文档类型标记。
是有效的（在 XHTML 中），但如果您的 XHTML 被处理为 HTML（即使用 text/html 内容类型而不是正确的 application/xhtml+xml 提供服务）然后它将被处理为标签汤并被视为开始标签而不是自闭合标签。

【解决方案2】：

根据HTML 4.01 spec，第 7.5.4 节（“分组元素：DIV 和 SPAN 元素）：

开始标签：必需，结束标签：必需

所以一个自动关闭的<div> 标记（如您指定的第一个示例：<div />）是无效。

【讨论】：

【解决方案3】：

如果我没记错的话 - <div /> 无效。如果您希望它在任何地方都可以使用，请使用 <div></div>。结束标签是必需的，所以像<div class="Clear" /> 这样的操作将不起作用。

所有分组元素的行为方式都相同。您会看到 DIV 和 SPAN 的行为相同。

编辑：在查看@Donut 发布的答案中的链接时发现this link - 它是一个矩阵，显示哪些元素具有可选的结束标记要求（除其他外）。看起来很有趣，所以我想我会把它贴在这里与其他人分享。

【讨论】：

+ 1 表示正确答案。我编辑了这个答案只是为了显示 html 标签。（标记为代码）
或者，您可以使用 <和>在答案中（当然这是评论，规则不同）
是的 - 回答这个问题时完全没有考虑 - 感谢您为我修复它:)
我认为 span 是一个内联元素。
...不是说 span 的结束标签不是必需的。只是在前一句的上下文中令人困惑。

【解决方案4】：

这取决于您使用的 DOCTYPE。

对于XHTML，即XML，这两个标签是等价的。您可以通过将以下 DOCTYPE 之一作为页面的第一行来向浏览器发出信号：

<!DOCTYPE html 
     PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<!DOCTYPE html 
     PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<!DOCTYPE html 
     PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

对于HTML 4.01，这是所有 (?) 浏览器在没有 DOCTYPE 时所假设的，某些标签必须表示为开闭。大多数块级标签都需要这个，包括像<SCRIPT>这样的非标记标签。如果您查看WDG HTML documentation，您会看到特定标签是否需要打开-关闭或可以通过“语法”项表示为空标签：

Syntax      <DIV>...</DIV>

【讨论】：

浏览器基于内容类型而不是文档类型在 XML 解析和标签汤解析之间切换。 Doctype 在 Quirks 和 Standards 模式之间切换，这对如何解析标记影响不大（但对如何处理 CSS 和 JS 影响很大）。

【解决方案5】：

自终止标签在 XML 中有效，但在这种情况下对于 HTML 无效

【讨论】：

【解决方案6】：

第一个选项是无效的html；第二个是。 <div /> 真的让 IE 很困惑，所以总是选择<div><div/>。

【讨论】：

固定html标签，句子结构。

【解决方案7】：

您无法将内容放入“<div />”。

【讨论】：

【解决方案8】：

<div /> 是否有效取决于您的 DOCTYPE 它是有效的 XHTML 过渡和 XHTML 严格

演示：http://wecodesign.com/demos/stackoverflow-1411182.htm

验证：http://validator.w3.org/check?uri=http%3A%2F%2Fwecodesign.com%2Fdemos%2Fstackoverflow-1411182.htm&charset=%28detect+automatically%29&doctype=Inline&group=0

如果您想使用单个标签并且页面上没有无用的空<div>，请尝试使用<br /> 进行清除。

<style type="text/css">
.clear-fix {
    float: none !important;
    height: 0 !important;
    overflow: hidden !important;
    clear: both !important;
    display: block !important;
    line-height: 0 !important;
    font-size: 0 !important;
}
</style>

<br class="clear-fix" />

有些人可能会质疑我在这里对!important 的使用；然而，这就是它存在的原因！我们知道，当我们清除某些东西时，我们希望它无论如何执行特定任务。

举个例子：

<style type="text/css">
    .hidden {display: none;}
    #foo {display: block;}
</style>

<p id="foo" class="hidden">You can still see me</p>

在这种特殊情况下，您可以将!important 添加到您的隐藏类中，因为很明显它应该隐藏东西无论如何

【讨论】：