我想问一些简单的例子,展示 <div> 和 <span> 的用法 . 我已经看到它们都用来标记 id 或 class 的页面的一部分,但是我有兴趣知道是否有时候一个优先于另一个 .
<div>
<span>
id
class
div 是块元素, span 是内联的 .
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参考here . 以上仍然是非法的,因为 <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="http://www.bowlsk.com/_ah/logout?...">Sign out</a> </div> <h1><a href="/">Bowl<span class="sk">SK</span></a></h1> </div>
好的,发生了什么?在我的页面顶部,我有一个逻辑部分,"header" . 由于这是一个部分,我使用div(具有适当的id) . 在其中,我有几个部分:用户栏和实际页面 Headers . Headers 使用适当的标记 h1 . 用户栏是一个部分,包含在 div 中 . 在其中,用户名包含在 span 中,以便我可以更改样式 . 正如你所看到的,我还在 Headers 中包含了一个大约2个字母的 span - 这允许我在样式表中更改它们的颜色 .
h1
另请注意,HTML5包含一组广泛的新元素,用于定义常见的页面结构,例如文章,部分,导航等 . HTML 5 working draft的第4.4节列出了它们,并提供了有关其用法的提示 . HTML5仍然是一个工作规范,所以没有什么是"final",但是这些元素中的任何一个都在任何地方都是非常值得怀疑的 . 如果你想在一些旧版本的IE中设置这些元素的样式,你需要使用javascript hack - 在你的源代码中指定任何元素之前,你基本上需要使用 document.createElement 创建每个元素之一 . 有很多库会为你解决这个问题 - 快速谷歌搜索出现了html5shiv .
document.createElement
在HTML中,有一些标签可以为内容添加结构或语义 . 例如, <p> 标记用于标识段落 . 另一个例子是有序列表的 <ol> 标签 .
<p>
<ol>
如上所示,当HTML中没有合适的标签时,通常会使用 <div> 和 <span> 标签 .
<div> 标记用于标识文档的块级别部分/分区,该文档在其之前和之后都有换行符 .
可以使用div标签的示例是页眉,页脚,导航等 . 但是在HTML 5中已经提供了这些标签 .
<span> 标记用于标识文档的内联部分/分区 .
例如,span标签可用于向元素添加内联象形图 .
为了完整起见,我邀请你这样思考:
HTML中定义了许多块元素(前后换行符),以及许多内联标记(没有换行符) .
但是在现代HTML中,所有元素都应该具有含义: <p> 是一个段落, <li> 是一个列表项,等等,我们应该使用正确的标记用于正确的目的 - 不像旧的我们使用 <blockquote> 缩进是否内容是引用的日子 .
<li>
<blockquote>
那么,如果对于400px宽的色谱柱没有任何意义,那么你做什么呢?是吗?您只希望您的文本列宽400像素,因为这适合您的设计 .
出于这个原因,他们又向HTML添加了两个元素:泛型或无意义的元素 <div> 和 <span> ,因为否则,人们会回到滥用具有含义的元素 .
只想添加一些历史背景来了解如何成为 span vs div
span 的历史:
1995年7月3日,Benjamin C. W. Sittler提出了一种通用文本容器标签,用于将样式应用于某些文本块 . 除非与样式表结合使用,否则渲染是中性的 . 关于可读性的意义与辩论有关 . Bert Bos通过class属性(使用诸如city,person,date等值)提到元素的可扩展性 . 保罗·普雷斯科德担心这两个因素都会被滥用 . 他反对文本中提到“任何新元素应该是旧元素”并添加“如果我们创建一个没有语义的标记,它可以在任何地方使用而不会出错 . 我们必须强迫作者正确地标记他们的语义我们必须迫使编辑器供应商在他们的界面中明确做出这个选择 . “
- Source (w3 wiki)
来自引入 span 的RFC草案:
首先,在没有其他元素合适的情况下,需要一个通用的容器来携带LANG和BIDI属性;为此目的引入了SPAN元素 .
- Source (IETF Draft)
div 的历史:
DIV元素可用于将HTML文档构造为分区的层次结构 . ...中心是在Netscape添加对HTML 3.0 DIV元素的支持之前引入的 . 由于其广泛部署,它保留在HTML 3.2中 .
HTML 3.2 Spec
简而言之,这两个元素都源于对更具语义通用的容器的需求 . Span被提议作为样式文本的 <text> 元素的更通用替代 . Div被提议作为划分页面的通用方式,并且具有替换中心对齐内容的 <center> 标记的额外好处 . Div一直是一个块元素,因为它作为页面分隔符的历史 . Span一直是内联元素,因为它的最初目的是文本样式,而今天div和span都分别是默认块和内联显示属性的通用元素 .
<text>
<center>
我会说,如果你知道一点西班牙语来看this page,哪里得到了适当的解释 .
但是,快速定义是 div 用于划分部分, span 用于将某种样式应用于另一个块元素(如 div )中的元素 .
<div> 是一个块元素 . 正如div中所有段落或任何内容一样,我们可以将css应用于div中的所有元素 . 只用div中的风格 .
<span> 是一个内联元素 .
所有CSS更改的内容仅反映该元素 .
<div style="color:green;"> <h1>Example of div and span</h1> <p> This is a paragraph within a div <span style="color: red;"> Paragraph with in span. </span> </p> </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.
这表明,不仅 should 一个div not 被内联使用,它根本不会产生所需的效果 .
记住,基本上,他们自己也不执行任何功能 . 它们是 not 具体的功能 just by their tags .
它们只能在CSS的帮助下进行定制 .
现在提出你的问题:
SPAN标记和一些样式对于在html中的段落中保持一行很有用 . 这是HTML中的行级别或语句级别 .
例:
<p>Am writing<span class="time">this answer</span> in my free time of my day.</p>
所说的DIV标签功能只能通过样式来支持,可以容纳大量的HTML代码 .
DIV是Block级别
<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不是
Chris的答案中已经提到了真正重要的区别 . 但是,对每个人来说,影响并不明显 .
作为内联元素, <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> 是块级元素, <span> 是内联元素 .
如果你想用一些内联文本做某事, <span> 是要走的路,因为它不会引入 <div> 的换行符 .
正如其他人所指出的那样,每一个都隐含着一些语义,最重要的是, <div> 意味着文档中的逻辑划分,类似于文档的某个部分或某些内容,la:
<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 将在其上下文中呈现为内联 . 但是没有任何语义 Value ;它们的存在允许您将样式和标识应用于任何给定的内容 . 使用样式,您可以使 div 行为像 span ,反之亦然 .
div 的一个有用的样式是 inline-block
inline-block
例子:
http://dustwell.com/div-span-inline-block.html
CSS display: inline vs inline-block
我在游戏网络项目中使用 inline-block 取得了巨大的成功 .
13 回答
div
是块元素,span
是内联的 .这意味着要在语义上使用它们,div应该用于包装文档的各个部分,而 Span 应该用于包装文本,图像等的一小部分 .
例如:
请注意,将块级元素放在内联元素中是违法的,因此:
......是非法的 .
编辑:从HTML5开始,一些块元素可以放在一些内联元素中 . 有关非常清晰的列表,请参阅MDN参考here . 以上仍然是非法的,因为
<span>
只接受短语内容,<div>
是流内容 .你问了一些具体的例子,所以从我的保龄球网站上拿出一个例子,BowlSK:
好的,发生了什么?在我的页面顶部,我有一个逻辑部分,"header" . 由于这是一个部分,我使用div(具有适当的id) . 在其中,我有几个部分:用户栏和实际页面 Headers . Headers 使用适当的标记
h1
. 用户栏是一个部分,包含在div
中 . 在其中,用户名包含在span
中,以便我可以更改样式 . 正如你所看到的,我还在 Headers 中包含了一个大约2个字母的span
- 这允许我在样式表中更改它们的颜色 .另请注意,HTML5包含一组广泛的新元素,用于定义常见的页面结构,例如文章,部分,导航等 . HTML 5 working draft的第4.4节列出了它们,并提供了有关其用法的提示 . HTML5仍然是一个工作规范,所以没有什么是"final",但是这些元素中的任何一个都在任何地方都是非常值得怀疑的 . 如果你想在一些旧版本的IE中设置这些元素的样式,你需要使用javascript hack - 在你的源代码中指定任何元素之前,你基本上需要使用
document.createElement
创建每个元素之一 . 有很多库会为你解决这个问题 - 快速谷歌搜索出现了html5shiv .在HTML中,有一些标签可以为内容添加结构或语义 . 例如,
<p>
标记用于标识段落 . 另一个例子是有序列表的<ol>
标签 .如上所示,当HTML中没有合适的标签时,通常会使用
<div>
和<span>
标签 .<div>
标记用于标识文档的块级别部分/分区,该文档在其之前和之后都有换行符 .可以使用div标签的示例是页眉,页脚,导航等 . 但是在HTML 5中已经提供了这些标签 .
<span>
标记用于标识文档的内联部分/分区 .例如,span标签可用于向元素添加内联象形图 .
为了完整起见,我邀请你这样思考:
HTML中定义了许多块元素(前后换行符),以及许多内联标记(没有换行符) .
但是在现代HTML中,所有元素都应该具有含义:
<p>
是一个段落,<li>
是一个列表项,等等,我们应该使用正确的标记用于正确的目的 - 不像旧的我们使用<blockquote>
缩进是否内容是引用的日子 .那么,如果对于400px宽的色谱柱没有任何意义,那么你做什么呢?是吗?您只希望您的文本列宽400像素,因为这适合您的设计 .
出于这个原因,他们又向HTML添加了两个元素:泛型或无意义的元素
<div>
和<span>
,因为否则,人们会回到滥用具有含义的元素 .只想添加一些历史背景来了解如何成为
span
vsdiv
span
的历史:- Source (w3 wiki)
来自引入
span
的RFC草案:- Source (IETF Draft)
div
的历史:HTML 3.2 Spec
简而言之,这两个元素都源于对更具语义通用的容器的需求 . Span被提议作为样式文本的
<text>
元素的更通用替代 . Div被提议作为划分页面的通用方式,并且具有替换中心对齐内容的<center>
标记的额外好处 . Div一直是一个块元素,因为它作为页面分隔符的历史 . Span一直是内联元素,因为它的最初目的是文本样式,而今天div和span都分别是默认块和内联显示属性的通用元素 .我会说,如果你知道一点西班牙语来看this page,哪里得到了适当的解释 .
但是,快速定义是
div
用于划分部分,span
用于将某种样式应用于另一个块元素(如div
)中的元素 .<div>
是一个块元素 . 正如div中所有段落或任何内容一样,我们可以将css应用于div中的所有元素 . 只用div中的风格 .<span>
是一个内联元素 .所有CSS更改的内容仅反映该元素 .
隐含“块元素”的意义,但从未明确说明 . 如果我们忽略所有理论(理论是好的),那么以下是一个实用的比较 . 下列:
生产环境 :
这表明,不仅 should 一个div not 被内联使用,它根本不会产生所需的效果 .
记住,基本上,他们自己也不执行任何功能 . 它们是 not 具体的功能 just by their tags .
它们只能在CSS的帮助下进行定制 .
现在提出你的问题:
SPAN标记和一些样式对于在html中的段落中保持一行很有用 . 这是HTML中的行级别或语句级别 .
例:
所说的DIV标签功能只能通过样式来支持,可以容纳大量的HTML代码 .
DIV是Block级别
例:
根据您的要求,两者都有时间和时间使用 .
希望我的回答清楚 . 谢谢 .
Div是一个块元素,span是一个内联元素,它的宽度取决于div的内容,而div不是
Chris的答案中已经提到了真正重要的区别 . 但是,对每个人来说,影响并不明显 .
作为内联元素,
<span>
可能只包含其他内联元素 . 因此,以下代码是错误的:以上代码无效 . 要包装块级元素,必须使用另一个块级元素(例如
<div>
) . 另一方面,<div>
只能用于块级元素合法的地方 .此外,这些规则在(X)HTML中修复,并且不会因CSS规则的存在而改变!所以下面的代码也错了!
这里已有很好的详细解答,但没有可视化的例子,所以这里有一个简单的例子:
<div>
是块标记,而<span>
是内联标记 .<div>
是块级元素,<span>
是内联元素 .如果你想用一些内联文本做某事,
<span>
是要走的路,因为它不会引入<div>
的换行符 .正如其他人所指出的那样,每一个都隐含着一些语义,最重要的是,
<div>
意味着文档中的逻辑划分,类似于文档的某个部分或某些内容,la:正如其他答案中所提到的,默认情况下
div
将呈现为块元素,而span
将在其上下文中呈现为内联 . 但是没有任何语义 Value ;它们的存在允许您将样式和标识应用于任何给定的内容 . 使用样式,您可以使div
行为像span
,反之亦然 .div
的一个有用的样式是inline-block
例子:
http://dustwell.com/div-span-inline-block.html
CSS display: inline vs inline-block
我在游戏网络项目中使用
inline-block
取得了巨大的成功 .