Answers:
这意味着要在语义上使用它们,应将div用于包装文档的各个部分,而应将spans用于包装文本,图像等的一小部分。
<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="header">
<div id="userbar">
Hi there, <span class="username">Chris Marasti-Georg</span> |
<a href="/edit-profile.html">Profile</a> |
<a href="https://www.bowlsk.com/_ah/logout?...">Sign out</a>
</div>
<h1><a href="/">Bowl<span class="sk">SK</span></a></h1>
</div>
h1
。用户栏是一个节,用包裹div
。其中,用户名包裹在中span
,以便我可以更改样式。如您所见,span
标题中还包裹了大约2个字母-这使我可以在样式表中更改其颜色。
另请注意,HTML5包含一组广泛的新元素,这些元素定义了常见的页面结构,例如文章,栏目,导航等。
HTML 5工作草案的 4.4节列出了它们并给出了用法的提示。HTML5仍然是一个有效的规范,因此还没有“最终的”,但是,这些元素中的任何一个都在任何地方都令人怀疑。如果要在IE的某些较旧版本中设置这些元素的样式,则需要使用一个JavaScript hack-您需要使用以下命令创建每个元素之一document.createElement
然后在源中指定任何这些元素。有很多库将为您解决这个问题-快速的Google搜索打开了html5shiv。
div
和span
语义,因为它们没有任何意义。div
是无意义的通用块级元素,span
而是无意义的通用内联元素。
为了完整起见,我邀请您这样考虑:
<p>
是一个段落,an <li>
是一个列表项,等等,我们应该将正确的标签用于正确的目的-与过去的时代不同使用<blockquote>
内容是否为引号来缩进。<div>
和<span>
,因为否则,人们会回到滥用确实具有意义的元素。这里已经有很好的详细答案,但是没有直观的示例,因此这里有一个简单的例子:
<div>This is a div.</div>
<div>This is a div.</div>
<div>This is a div.</div>
<span>This is a span.</span>
<span>This is a span.</span>
<span>This is a span.</span>
<div>
是一个块标签,<span>
而是一个内联标签。
<div>
是一个块级元素,<span>
是一个内联元素。
如果您想对某些内联文本执行某些操作,<span>
则应该这样做,因为它不会引入a <div>
会导致的换行符。
正如其他人所指出的,每种语义中都隐含着一些语义,最重要的事实是,a <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>
只能包含其他内联元素。因此,以下代码是错误的:
<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
像a一样做出行为span
,反之亦然。
有用的样式之一div
是inline-block
例子:
inline-block
在游戏网站项目中,我曾经取得过巨大的成功。
Div是一个块元素,而span是一个内联元素,其宽度取决于其自身的内容,而div不
我想说的是,如果您知道西班牙语,可以在此页面中找到适当的说明。
但是,一个快速的定义div
是用于划分部分,并且span
将某种样式应用于另一个块元素(例如)中的元素div
。
只是想为span
vs的出现添加一些历史背景div
历史span
:
1995年7月3日,Benjamin CW Sittler 提出了一个通用的文本容器。标签,用于将样式应用于某些文本块。除非与样式表一起使用,否则呈现为中性。关于可读性,即意义,存在着争论。Bert Bos通过class属性提到了元素的可扩展性(带有诸如city,person,date等的值)。保罗·普雷斯科德(Paul Prescod)担心这两个因素都会被滥用。他反对在文本中提到“任何新元素都应该在旧元素上”,并添加“如果我们创建一个没有语义的标签,则可以在任何地方使用它而不会出错。我们必须强迫作者正确标记其文档的语义。我们必须强迫编辑器供应商在其界面中明确表明这一选择。”
从RFC草案中引入span
:
首先,在没有其他元素合适的情况下,需要一个通用容器来携带LANG和BIDI属性。为此引入了SPAN元素。
历史div
:
DIV元素可用于将HTML文档构造为分区层次结构。
...
Netscape引入了CENTER,之后他们才添加了对HTML 3.0 DIV元素的支持。由于其广泛部署,因此保留在HTML 3.2中。
简而言之,这两个元素都是出于对语义上更通用的容器的需求。提议将Span用作<text>
样式元素的通用替代。提出Div是一种用于划分页面的通用方法,它具有替换<center>
标签以使内容居中对齐的其他好处。由于Div作为页分隔符的历史,它一直是一个块元素。Span一直是内联元素,因为其最初的目的是文本样式,而今天div和span都已成为具有默认block和inline display属性的通用元素。
记住,基本上他们自己也不执行任何功能。他们没有具体说明的功能只是通过他们的标签。
它们只能在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>
根据您的要求,两者都有使用的时间和情况。
希望答案清楚。谢谢。