我想要一些简单的例子来展示<div>和<span>的使用。我曾看到它们都被用来用id或类标记页面的一部分,但我感兴趣的是,是否有时会优先使用其中一种而不是另一种。
当前回答
为了完整起见,我建议你这样思考:
There are lots of block elements (linebreaks before and after) defined in HTML, and lots of inline tags (no linebreaks). But in modern HTML all elements are supposed to have meanings: a <p> is a paragraph, an <li> is a list item, etc., and we're supposed to use the right tag for the right purpose -- not like in the old days when we indented using <blockquote> whether the content was a quote or not. So, what do you do when there is no meaning to the thing you're trying to do? There's no meaning to a 400px-wide column, is there? You just want your column of text to be 400px wide because that suits your design. For this reason, they added two more elements to HTML: the generic, or meaningless elements <div> and <span>, because otherwise, people would go back to abusing the elements which do have meanings.
其他回答
语义
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。
为了完整起见,我建议你这样思考:
There are lots of block elements (linebreaks before and after) defined in HTML, and lots of inline tags (no linebreaks). But in modern HTML all elements are supposed to have meanings: a <p> is a paragraph, an <li> is a list item, etc., and we're supposed to use the right tag for the right purpose -- not like in the old days when we indented using <blockquote> whether the content was a quote or not. So, what do you do when there is no meaning to the thing you're trying to do? There's no meaning to a 400px-wide column, is there? You just want your column of text to be 400px wide because that suits your design. For this reason, they added two more elements to HTML: the generic, or meaningless elements <div> and <span>, because otherwise, people would go back to abusing the elements which do have meanings.
记住,基本上,它们的自我也不执行任何函数。 它们不仅仅通过标记来确定功能。
它们只能在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>只能包含其他内联元素。因此下面的代码是错误的:
<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>
推荐文章
- 使伸缩项目正确浮动
- 形式内联内的形式水平在twitter bootstrap?
- 自定义元素在HTML5中有效吗?
- 如何触发自动填充在谷歌Chrome?
- 创建圈div比使用图像更容易的方法?
- 为什么Chrome浏览器不正确地确定页面是在不同的语言,并提供翻译?
- 在网页上用鼠标模拟震颤(例如帕金森病)?
- Bootstrap抛出Uncaught错误:Bootstrap的JavaScript需要jQuery
- 如何改变文本区域的边框颜色:焦点
- 我如何设置背景颜色为文本的宽度,而不是整个元素的宽度,使用CSS?
- 如何删除和清除所有的本地存储数据
- 强制打开“另存为…”弹出打开文本链接点击PDF在HTML
- 如何修改标签文本?
- 在HTML中还有其他有用的空格码吗,比如半空格的 , em-spaces, en-spaces等等?
- 输入触发器按钮单击