我想要一些简单的例子来展示<div>和<span>的使用。我曾看到它们都被用来用id或类标记页面的一部分,但我感兴趣的是,是否有时会优先使用其中一种而不是另一种。
当前回答
我想说,如果你懂一点西班牙语,看看这一页,在那里有适当的解释。
然而,一个快速的定义是,div是用于划分部分,span是用于将某种样式应用到另一个块元素中的元素,如div。
其他回答
我想说,如果你懂一点西班牙语,看看这一页,在那里有适当的解释。
然而,一个快速的定义是,div是用于划分部分,span是用于将某种样式应用到另一个块元素中的元素,如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.
这表明div不仅不应该内联使用,而且它根本不会产生想要的效果。
语义
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。(当然,前提是没有合适的语义元素)。
在HTML中,有一些标记为内容添加结构或语义。例如,<p>标记用于标识一个段落。另一个例子是有序列表的<ol>标记。
如上面所示,当HTML中没有合适的标记时,通常会使用<div>和<span>标记。
<div>标记用于标识文档的块级节/除法,该节/除法前后都有换行符。
可以使用div标签的例子有页眉、页脚、导航等。然而在HTML 5中,这些标记已经提供了。
<span>标记用于标识文档的内联节/分。
例如,span标记可用于向元素添加内联象形文字。
记住,基本上,它们的自我也不执行任何函数。 它们不仅仅通过标记来确定功能。
它们只能在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>
根据您的需求,这两种方法都有使用的时间和情况。
希望我的答案很清楚。 谢谢你!
推荐文章
- 使伸缩项目正确浮动
- 形式内联内的形式水平在twitter bootstrap?
- 自定义元素在HTML5中有效吗?
- 如何触发自动填充在谷歌Chrome?
- 创建圈div比使用图像更容易的方法?
- 为什么Chrome浏览器不正确地确定页面是在不同的语言,并提供翻译?
- 在网页上用鼠标模拟震颤(例如帕金森病)?
- Bootstrap抛出Uncaught错误:Bootstrap的JavaScript需要jQuery
- 如何改变文本区域的边框颜色:焦点
- 我如何设置背景颜色为文本的宽度,而不是整个元素的宽度,使用CSS?
- 如何删除和清除所有的本地存储数据
- 强制打开“另存为…”弹出打开文本链接点击PDF在HTML
- 如何修改标签文本?
- 在HTML中还有其他有用的空格码吗,比如半空格的 , em-spaces, en-spaces等等?
- 输入触发器按钮单击