我想要一些简单的例子来展示<div>和<span>的使用。我曾看到它们都被用来用id或类标记页面的一部分,但我感兴趣的是,是否有时会优先使用其中一种而不是另一种。


当前回答

“块元素”的意义是隐含的,但从未明确说明。如果我们忽略所有的理论(理论是好的),那么下面是一个语用比较。以下几点:

<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不仅不应该内联使用,而且它根本不会产生想要的效果。

其他回答

“块元素”的意义是隐含的,但从未明确说明。如果我们忽略所有的理论(理论是好的),那么下面是一个语用比较。以下几点:

<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不仅不应该内联使用,而且它根本不会产生想要的效果。

正如在其他回答中提到的,默认情况下div将被呈现为块元素,而span将在其上下文中内联呈现。但两者都没有任何语义价值;它们的存在允许您对任何给定的内容应用样式和标识。使用样式,可以使div像span一样,反之亦然。

div的一个有用的样式是内联块

例子:

http://dustwell.com/div-span-inline-block.html CSS显示:内联vs内联块

我曾在游戏网页项目中使用内联块取得了巨大的成功。

真正重要的区别已经在克里斯的回答中提到了。然而,这并不是对每个人都有明显的影响。

作为一个内联元素,<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>

Div是一个块元素,span是一个内联元素,它的宽度取决于它自己的内容,而Div不是

记住,基本上,它们的自我也不执行任何函数。 它们不仅仅通过标记来确定功能。

它们只能在CSS的帮助下进行定制。

现在回到你的问题:

SPAN标签加上一些样式将是有用的,在一行中,比如在一个段落中,在html中。 这是HTML中的行级或语句级。

例子:

<p>Am writing<span class="time">this answer</span> in my free time of my day.</p>

DIV标签的功能就像上面说的那样,只能在样式的支持下可见,可以容纳大量的HTML代码。

DIV是块级

例子:

    <div class="large-time">
    <p>Am writing <span class="time"> this answer</span> in my free time of my day. 
    </p>
    </div>

根据您的需求,这两种方法都有使用的时间和情况。

希望我的答案很清楚。 谢谢你!