我想要一些简单的例子来展示<div>和<span>的使用。我曾看到它们都被用来用id或类标记页面的一部分,但我感兴趣的是,是否有时会优先使用其中一种而不是另一种。
当前回答
记住,基本上,它们的自我也不执行任何函数。 它们不仅仅通过标记来确定功能。
它们只能在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>
根据您的需求,这两种方法都有使用的时间和情况。
希望我的答案很清楚。 谢谢你!
其他回答
只是想添加一些历史背景关于span和div是如何产生的
跨度历史:
On July 3, 1995, Benjamin C. W. Sittler proposes a generic text container tag for applying styles to certain blocks of text. The rendering is neutral except if used in conjunction of a stylesheet. There is a debate around versus about readability, meaning. Bert Bos is mentioning the extensibility nature of the element through the class attribute (with values such as city, person, date, etc.). Paul Prescod is worried that both elements will be abused. He is opposed to text mentionning that "any new element should be on an old one" and adding "If we create a tag with no semantics it can be used anywehere without ever being wrong. We must force authors to properly tag the semantics of their document. We must force editor vendors to make that choice explicit in their interfaces."
-来源(w3 wiki)
在RFC草案中引入了span:
首先,一个普通的骗局 需要tainer来携带LANG和BIDI属性 在没有其他要素的情况下;《SPAN ele》 Ment就是为此目的而引入的。
-来源(IETF草案)
div的历史:
DIV元素可用于将HTML文档构造为划分的层次结构。 ... 的支持之前,Netscape就引入了CENTER HTML 3.0 DIV元素。它被保留在HTML 3.2中,因为它具有 广泛的部署。
HTML 3.2规格
In a nutshell, both elements arose out of a need for a more semantically-generic container. Span was proposed as a more generic replacement for a <text> element to style text. Div was proposed as a generic way to divide pages and had the added benefit of replacing the <center> tag for center-aligning content. Div has always been a block element because of its history as a page divider. Span has always been an inline element because its original purpose was text styling and today div and span have both arrived at being generic elements with default block and inline display properties respectively.
我想说,如果你懂一点西班牙语,看看这一页,在那里有适当的解释。
然而,一个快速的定义是,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>
这很简单。
span的使用不会影响布局,因为它是内联的(在行中(不应该混淆,因为东西可以被换行)) 使用div会影响布局,里面的内容会出现在新行(block element)中,当你想添加的元素没有特殊的语义,而你想让它出现在新行中时,使用<div>。