我想要一些简单的例子来展示<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不仅不应该内联使用,而且它根本不会产生想要的效果。
其他回答
正如在其他回答中提到的,默认情况下div将被呈现为块元素,而span将在其上下文中内联呈现。但两者都没有任何语义价值;它们的存在允许您对任何给定的内容应用样式和标识。使用样式,可以使div像span一样,反之亦然。
div的一个有用的样式是内联块
例子:
http://dustwell.com/div-span-inline-block.html CSS显示:内联vs内联块
我曾在游戏网页项目中使用内联块取得了巨大的成功。
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.
记住,基本上,它们的自我也不执行任何函数。 它们不仅仅通过标记来确定功能。
它们只能在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>
根据您的需求,这两种方法都有使用的时间和情况。
希望我的答案很清楚。 谢谢你!
Div是一个块元素,span是一个内联元素,它的宽度取决于它自己的内容,而Div不是
我想说,如果你懂一点西班牙语,看看这一页,在那里有适当的解释。
然而,一个快速的定义是,div是用于划分部分,span是用于将某种样式应用到另一个块元素中的元素,如div。