HTML标签之间有什么区别 div 和span?/span
我想问一些简单的例子,显示<div>
和<span>
的用法。 我已经看到它们都用来用id
或class
标记页面的一部分,但是我想知道是否有时候有一个优先于另一个。
#1楼
Div是一个块元素,而span是一个内联元素,其宽度取决于其自身的内容,而div不
#2楼
<div>
是块级元素, <span>
是内联元素。
如果您想对某些内联文本进行处理,则<span>
是<span>
的方法,因为它不会像<div>
那样引入换行符。
正如其他人所指出的,每种语义中都隐含着一些语义,最重要的事实是<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>
#3楼
div
是一个块元素span
是一个内联元素 。
这意味着要在语义上使用它们,应将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="http://www.bowlsk.com/_ah/logout?...">Sign out</a></div><h1><a href="/">Bowl<span class="sk">SK</span></a></h1>
</div>
好吧,这是怎么回事? 在页面顶部,我有一个逻辑部分,即“标题”。 由于这是一个部分,因此我使用了div(具有适当的ID)。 在其中,我有两个部分:用户栏和实际页面标题。 标题使用适当的标签h1
。 用户栏是一个部分,被包装在div
。 其中,用户名包裹在span
,以便我可以更改样式。 如您所见,我还在标题span
2个字母包裹了一个span
-这使我可以在样式表中更改其颜色。
还要注意,HTML5包括一组广泛的新元素,这些元素定义了常见的页面结构,例如文章,小节,导航等。HTML5 工作草案的 4.4节列出了它们,并给出了其用法的提示。 HTML5仍然是一个有效的规范,所以还没有什么“最终的”,但是,这些元素中的任何一个都在任何地方都令人怀疑。 如果要在IE的某些较旧版本中设置这些元素的样式,则需要使用一个JavaScript技巧-您基本上需要在源中指定任何这些元素之前,使用document.createElement
创建每个元素之一。 有很多库将为您解决这个问题-快速的Google搜索打开了html5shiv 。
#4楼
如其他答案中所述,默认情况下, div
将被呈现为块元素,而span
将在其上下文中内联呈现。 但是它们都没有任何语义价值。 它们的存在允许您将样式和标识应用于任何给定的内容。 使用样式,可以使div
像span
,反之亦然。
div
的有用样式之一是inline-block
例子:
http://dustwell.com/div-span-inline-block.html
CSS显示:内联与内联块
我在游戏Web项目中使用inline-block
取得了巨大的成功。
#5楼
克里斯的答案中已经提到了真正重要的区别。 但是,对于所有人来说,影响并不明显。
作为内联元素, <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>
#6楼
我想说的是,如果您知道西班牙语,可以在此页面中找到适当的说明。
但是,一个快速的定义是div
用于划分部分,而span
用于将某种样式应用于另一个块元素(例如div
元素。
#7楼
为了完整起见,我邀请您这样考虑:
- HTML中定义了很多块元素(前后都有换行符),还有很多内联标签(没有换行符)。
- 但是在现代HTML中,所有元素都应该具有含义 :
<p>
是段落,<li>
是列表项,依此类推,我们应该将正确的标签用于正确的目的-不像在过去,我们使用<blockquote>
缩进内容是否是引号。 - 所以,当没有意义,你正在试图做的事情你会怎么做? 400px宽的列没有意义 ,是吗? 您只希望文本列宽为400px,因为这适合您的设计。
- 因此,他们在HTML中又添加了两个元素:通用元素或无意义的元素
<div>
和<span>
,因为否则,人们会回到滥用具有意义的元素的位置。
#8楼
这里已经有很好的详细答案,但是没有直观的示例,因此这里有一个简单的例子:
<div>
是一个块标签,而<span>
是一个内联标签。
#9楼
在HTML中,有一些标签可以为内容添加结构或语义。 例如, <p>
标记用于标识段落。 另一个示例是有序列表的<ol>
标记。
如上所示,当HTML中没有合适的标记可用时,通常使用<div>
和<span>
标记。
<div>
标记用于标识文档的块级节/分区,该文档在其前后都有换行符。
可以使用div标签的示例包括页眉,页脚,导航等。但是,在HTML 5中已经提供了这些标签。
<span>
标记用于标识文档的内联部分。
例如,可以使用span标签将嵌入式象形文字添加到元素中。
#10楼
暗含“块元素”的含义,但未明确说明。 如果我们忽略所有理论(理论是好的),那么以下是实用的比较。 下列:
<p>This paragraph <span>has</span> a span.</p>
<p>This paragraph <div>has</div> a div.</p>
产生:
This paragraph has a span.This paragraphhas
a div.
这表明,不仅要一个div 不使用内联的,它根本不会产生预期的影响。
#11楼
只是想为span
和div
出现方式添加一些历史背景
span
历史:
1995年7月3日,Benjamin CW Sittler 提出了一个通用文本容器标签,用于将样式应用于某些文本块。 除非与样式表一起使用,否则呈现为中性。 关于可读性,即意义,存在着争论。 Bert Bos通过class属性提到了元素的可扩展性(带有诸如city,person,date等的值)。 保罗·普雷斯科德(Paul Prescod)担心这两个因素都会被滥用。 他反对在文本中提到“任何新元素都应该在旧元素上”,并添加“如果我们创建没有语义的标签,则可以在任何地方使用它而不会出错。我们必须强迫作者正确标记其语义。文档。我们必须强制编辑器供应商在其界面中明确表明这一选择。”
-来源(W3 Wiki)
从引入span
的RFC草案中:
首先,在没有其他元素合适的情况下,需要一个通用容器来携带LANG和BIDI属性。 为此引入了SPAN元素。
-来源(IETF草案)
div
历史:
DIV元素可用于将HTML文档构造为分区层次结构。
...
Netscape引入了CENTER,之后他们才添加了对HTML 3.0 DIV元素的支持。 由于其广泛部署,因此保留在HTML 3.2中。
HTML 3.2规范
简而言之,这两个元素都是出于对语义上更通用的容器的需求。 建议使用Span作为<text>
元素的通用替代品来设置<text>
样式。 提议使用Div作为划分页面的通用方法,它具有替换<center>
标记以使内容<center>
的附加好处。 由于Div作为页分隔符的历史,它一直是一个块元素。 Span一直是内联元素,因为其最初的目的是文本样式,而今天div和span都已成为具有默认块和内联显示属性的通用元素。
#12楼
记住,基本上他们自己也不执行任何功能。 他们不是具体的关于功能只是通过他们的标签 。
它们只能在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>
根据您的要求,两者都有使用的时间和情况。
希望答案清楚。 谢谢。
HTML标签之间有什么区别 div 和span?/span相关推荐
- html中的main标签,html中div标签、section标签和acticle标签三者有啥区别,main和div
html中div标签.section标签和acticle标签三者有啥区别什么是html中的div标签.section标签和acticle标签的区别, 线索: 本来我以为这三个标签的作用差不多.后来查了 ...
- DIV与SPAN之间有什么区别
DIV与SPAN之间有什么区别 解决思路: DIV 和 SPAN 元素最大的特点是默认都没有对元素内的对象进行任何格式化渲染.主要用于应用样式表.两者最明显的区别在于DIV是块元素,而SPAN是 ...
- Git GUI,Git Bash,Git CMD标签之间的区别
Git GUI,Git Bash,Git CMD标签之间的区别 本地安装完Git之后,右键会出现2个有关Git的标签,"Git GUI Here" 和 "Git Bash ...
- CSS定位布局display/float/position属性之间的关系/区别和如何使用取值行为机制
float: left|right; 可以自动排列自动折行, 但需要clear来配合清除浮动; display: inline-block; 有些时候可以替代float实现相同的效果. positio ...
- CSS中子选择器和后代选择器之间有什么区别
CSS子选择器和后代选择器之间有什么区别?下面本篇文章就来给大家对比一下子选择器和后代选择器,介绍子选择器和后代选择器之间的区别,希望对大家有所帮助. 子选择器 子选择器用于匹配指定元素的所有子元素: ...
- 如何做默认样式重置?RESETTING 和 NORMALIZING 之间有什么区别?
这里是修真院前端小课堂,每篇分享文从 [背景介绍][知识剖析][常见问题][解决方案][编码实战][扩展思考][更多讨论][参考文献] 八个方面深度解析前端知识/技能,本篇分享的是: [如何做默认样式 ...
- Docker映像和容器之间有什么区别?
本文翻译自:What is the difference between a Docker image and a container? When using Docker, we start wit ...
- 去除行块级标签之间的默认间距
当两个行块级标签之间有空格,或者换行时,行块级标签之间会有一个默认4px的间距.去除方法如下: 方法一: 将紧连的行块级都放在一行,如果行块级的内容比较少,这么做还是可以的:但内容比较多的时候,这么做 ...
- AAAI 2021 | 利用标签之间的混淆关系,提升文本分类效果
©PaperWeekly 原创 · 作者|张琨 学校|中国科学技术大学博士生 研究方向|自然语言处理 论文标题: Label Confusion Learning to Enhance Text Cl ...
最新文章
- 解决npm下载包失败的问题
- 自定义ConfigurationSection,创建多个嵌套的ConfigurationElementCollection节点
- 载波聚合或双连接的方式进行_处理载波聚合及双连接的装置及方法与流程
- 【笔试/面试】—— 网络
- 【IDM】IDM下载器安装
- 自由手写体字帖pdf_20款漂亮的手写字体,可供下载
- 修复谷歌浏览器翻译插件无法使用的问题
- B站 TOP10 Python视频教程
- 计算机格式字体颜色,电脑怎么设置不同的字体颜色样式
- word中字体大小(pt)和网页中css设置font-size时用的px大小对应关系
- 【图形设计】什么是组织架构图?如何画组织架构图
- 麒麟芯片配上鸿蒙系统有多快,麒麟芯片和鸿蒙系统靠边站,纯国产飞腾芯片和麒麟系统早已大规模使用...
- 北京车牌那么难摇为什么还能那么受欢迎?
- 音乐机器人特奥_机器人钢琴家特奥Teo全能挑战古典音乐大师经典作品音乐会
- c语言教程英文版讲义,c语言教程英文版讲义(四).pdf
- 基于matlab的数字信号发生器及简易电子琴设计,简易电子琴电路的设计仿真与实现课程设计...
- 用Microsoft Office Visio for Enterprise Architects生成数据库时出现“无法打开登录所请求的数据库masterDATABASE=master。登录失败”
- 计算机平面设计创意教案,平面设计教案1
- 结对编程总结+git使用与GitHub代码管理——by林玉俊唐宇涵
- 学计算机基础微课视频教程,大学计算机基础实践教程(Windows 10+Office 2016)(微课版)...