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


当前回答

我想说,如果你懂一点西班牙语,看看这一页,在那里有适当的解释。

然而,一个快速的定义是,div是用于划分部分,span是用于将某种样式应用到另一个块元素中的元素,如div。

其他回答

在HTML中,有一些标记为内容添加结构或语义。例如,<p>标记用于标识一个段落。另一个例子是有序列表的<ol>标记。

如上面所示,当HTML中没有合适的标记时,通常会使用<div>和<span>标记。

<div>标记用于标识文档的块级节/除法,该节/除法前后都有换行符。

可以使用div标签的例子有页眉、页脚、导航等。然而在HTML 5中,这些标记已经提供了。

<span>标记用于标识文档的内联节/分。

例如,span标记可用于向元素添加内联象形文字。

<div>是块级元素,<span>是行内元素。

如果你想对一些内联文本做一些事情,<span>是正确的选择,因为它不会像<div>那样引入换行符。


正如其他人所注意到的,这些都隐含着一些语义,最重要的事实是,<div>暗示了文档中的逻辑划分,类似于文档的一个部分或其他内容,例如:

<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>

Div是一个块元素 Span是一个内联元素。

这意味着要在语义上使用它们,div应该用于包装文档的各个部分,而span应该用于包装文本、图像等小部分。

例如:

<div>This a large main division, with <span>a small bit</span> of spanned text!</div>

注意,在内联元素中放置块级元素是非法的,因此:

<div>Some <span>text that <div>I want</div> to mark</span> up</div>

...是非法的。


编辑:从HTML5开始,一些块元素可以放在一些内联元素中。请参阅这里的MDN参考,以获得相当清晰的清单。以上仍然是非法的,因为<span>只接受短语内容,而<div>是流内容。


你要求一些具体的例子,所以这是一个从我的保龄球网站,BowlSK:

< div id = "头" > < div id = " userbar " > 嗨,大家好,<span class="username">Chris Marasti-Georg</span> | <a href="/edit-profile.html">Profile</a> | .html < a href = " https://www.bowlsk.com/_ah/logout?..。“>签署< / > < / div > < h1 > < a href = " / " >碗<跨类= >“sk sk < / span > < / > < / h1 > < / div >

Ok, what's going on? At the top of my page, I have a logical section, the "header". Since this is a section, I use a div (with an appropriate id). Within that, I have a couple of sections: the user bar and the actual page title. The title uses the appropriate tag, h1. The userbar, being a section, is wrapped in a div. Within that, the username is wrapped in a span, so that I can change the style. As you can see, I have also wrapped a span around 2 letters in the title - this allows me to change their color in my stylesheet.

还要注意的是,HTML5包含了一组广泛的新元素,这些元素定义了常见的页面结构,如article、section、nav等。

Section 4.4 of the HTML 5 working draft lists them and gives hints as to their usage. HTML5 is still a working spec, so nothing is "final" yet, but it is highly doubtful that any of these elements are going anywhere. There is a javascript hack that you will need to use if you want to style these elements in some older version of IE - You need to create one of each element using document.createElement before any of those elements are specified in your source. There are a bunch of libraries that will take care of this for you - a quick Google search turned up html5shiv.

语义

span和div都是没有关联语义的元素。当你需要一个元素(例如样式化或JavaScript目标),但HTML中没有适合内容的语义元素时,可以使用它们。

样式

这两个元素都不是浏览器内置样式表的主要样式。关键的区别在于display属性。Span元素默认显示为inline, div元素默认显示为block。

结构

span和div元素允许在HTML文档的不同位置。

你会在这里看到许多早期的答案,它们被称为“内联元素”和“块元素”。这是HTML 4做出的区分,现在已经过时了(尽管作为一般准则很有用)。(HTML 4定义为内联或块的元素与默认的CSS显示属性值之间有很强的相关性,但不是100%。)

HTML 5采用了一种更微妙的方法来定义哪些元素被允许放在哪里。

span元素可以用于“需要措辞内容的地方”,也可以包含“措辞内容”。

同时,div元素可以“在期望流内容的地方”(在这种情况下,它可以包含“流内容”)和“作为dl元素的子元素”,在这种情况下,它可以包含“一个或多个dt元素后面跟着一个或多个dd元素,可选地与脚本支持元素混合”)。

它比HTML 4的视图要复杂得多,但是规范有很好的超链接,并且有一个验证服务可用。

您可以使用块/内联的区别作为一般准则。如果你需要生成新的行,或者需要换行的内容(如段落、表格、文章和章节),你可能应该使用div。如果你有在一行中一起流动的内容(如单词),那么你可能应该使用span。(当然,前提是没有合适的语义元素)。

我想说,如果你懂一点西班牙语,看看这一页,在那里有适当的解释。

然而,一个快速的定义是,div是用于划分部分,span是用于将某种样式应用到另一个块元素中的元素,如div。