HTML标签<div>和<span>之间有什么区别？
我想问一些简单的例子，显示<div>和<span>的用法。 我见过他们都用id或class来标记页面的一部分，但是我有兴趣知道是否有次优先于另一个。
div是一个块元素， span是内联的。
这意味着为了在语义上使用它们，应该使用div来包装文档的各个部分，而跨度应该用于包装文本，图像等的小部分。
例如：
<div>This a large main division, with <span>a small bit</span> of spanned text!</div>
请注意，在embedded元素中放置块级元素是非法的，因此：
<div>Some <span>text that <div>I want</div> to mark</span> up</div>
…是非法的。
编辑：截至HTML5，一些块元素可以放在一些内联元素 – 特别是，上述现在是合法的。
你问了一些具体的例子，从我的保龄球网站BowlSK拿走了一个 ：
<div id="header"> <div id="userbar"> Hi there, <span class="username">Chris Marasti-Georg</span> | <a href="/edit-profile.html">Profile</a> | <a href="http://www.bowlsk.com/_ah/logout?...">Sign out</a> </div> <h1><a href="/">Bowl<span class="sk">SK</span></a></h1> </div>
好的，怎么回事？ 在我的页面顶部，我有一个逻辑部分，“标题”。 由于这是一个部分，我使用一个div（与一个适当的ID）。 其中，我有几个部分：用户栏和实际的页面标题。 标题使用适当的标签h1 。 用户栏是一个部分，被封装在一个div 。 在那里，用户名被包裹在一个span ，以便我可以改变风格。 正如你所看到的，我还在标题中包围了两个字母的span – 这使我可以在我的样式表中改变它们的颜色。
还要注意的是，HTML5包含了一组定义常见页面结构的广泛的新元素，例如文章，部分，导航等.HTML5 工作草案的第4.4节列出了它们，并给出了它们的用法提示。 HTML5仍然是一个工作规范，所以没有什么是“最终的”，但它是任何地方的任何地方是非常值得怀疑的。 有一个JavaScript hack，如果你想在IE的一些老版本中设置这些元素，你将需要使用 – 你基本上需要在源document.createElement中指定任何元素之前使用document.createElement创build一个元素。 有一堆图书馆会为你处理这个问题 – 一个快速的Googlesearch出现了html5shiv 。
为了完整起见，我邀请你这样想：
- 在HTML中定义了大量的块元素（之前和之后的换行符），以及大量的行内标签（没有换行符）。
- 但是在现代HTML中，所有元素都应该具有含义 ：一个
<p>是一个段落，一个<li>是一个列表项目等，我们应该使用正确的标签来达到正确的目的 – 不像在过去我们使用<blockquote>缩进是否内容是一个报价或不。 - 那么，当你想要做的事情没有意义时，你会做什么？ 对于一个400像素宽的专栏没有意义 ，是吗？ 你只是希望你的文字列宽度为400px，因为它适合你的devise。
- 出于这个原因，他们在HTML中增加了两个元素：通用的或无意义的元素
<div>和<span>，否则，人们会回头滥用那些有意义的元素。
这里已经有了很好的，详细的答案，但没有可视化的例子，所以这里有一个快速的例子：
<div>是一个块标记，而<span>是一个内联标记。
<div>是块级元素， <span>是内联元素。
如果你想用一些内联文本来做一些事情，那么<span>就是要走的路，因为它不会引入一个<div>换行符。
正如其他人所指出的那样，每一种语义都暗含着一些语义，最重要的是，一个<div>意味着文档中的逻辑划分，类似于文档的某个部分或者某个事物，la：
<div id="Chapter1"> <p>Lorem ipsum dolor sit amet, <span id="SomeSpecialText1">consectetuer adipiscing</span> elit. Duis congue vehicula purus.</p> <p>Nam <span id="SomeSpecialText2">eget magna nec</span> sapien fringilla euismod. Donec hendrerit.</p> </div>
Chris的回答中已经提到了真正的重要区别。 但是，这对每个人都不是显而易见的。
作为内联元素， <span>只能包含其他内联元素。 因此下面的代码是错误的：
<span><p>This is a paragraph</p></span>
以上代码无效。 要包装块级元素，必须使用另一个块级元素（如<div> ）。 另一方面， <div>只能用于块级元素合法的地方。
而且，这些规则在（X）HTML中是固定的，它们不会被CSS规则的存在所改变！ 所以下面的代码也是错的！
<span style="display: block"><p>Still wrong</p></span> <span><p style="display: inline">Just as wrong</p></span>
暗含“块元素”的意义，但从未明确说明。 如果我们忽略所有的理论（理论是好的），那么下面是一个实用的比较。 下列：
<p>This paragraph <span>has</span> a span.</p> <p>This paragraph <div>has</div> a div.</p>
生产：
This paragraph has a span. This paragraph has a div.
这表明，不应该 不使用内联，它不会产生所需的影响。
正如其他答案中所提到的那样，默认情况下， div将被渲染为一个块元素，而span将在其上下文内embedded。 但是既没有语义价值， 它们的存在允许您将样式和标识应用于任何给定的内容位。 使用样式，你可以使一个div像一个span ，反之亦然。
div的有用样式之一是inline-block
例子：
-
CSS显示：内嵌与内嵌块
我已经在游戏网站项目中使用了inline-block来获得巨大成功。
DIV标签：
以下是特点：
- 正如名称所示，div标签在网页中定义了一个“部门”。
- div是一个块元素; 其默认显示值是“block”。
- div标签通常用于在html中创build基于CSS的布局。
- 默认情况下，在此元素之前和之后放置一个换行符。
跨度标签：
以下是特点：
- span标签在页面中没有视觉差异，除非使用style属性进行定制。
- 跨度是一个内联元素。
- 跨度通常用于风格化文本。 在线function可以轻松使用自定义样式，而无需更改布局。
- 默认没有换行符，但是如果通过在style属性中指定'display：block'来改变它的内联属性，就可以实现这个function。
Div是一个块元素，span是一个内联元素，其宽度取决于div所在的内容
我会说，如果你知道一点西class牙语来看看这个网页 ，在哪里正确解释。
然而，一个快速的定义是， div是用于分割的部分， span用于将某种样式应用于div等另一个块元素中的元素。
在HTML中有标签添加结构或语义的内容。 例如<p>标签用于标识一个段落。 另一个例子是有序列表的<ol>标签。
如上所示，当HTML中没有合适的标签时，通常使用<div>和<span>标签。
<div>标记用于标识在文件之前和之后都有换行符的文档的块级/部分。
可以使用div标签的示例是页眉，页脚，导航等。但是，在HTML 5中，这些标签已经被提供。
<span>标记用于标识文档的内联部分/部分。
例如，可以使用span标签将内联象形图添加到元素。
