html中元素与标记的区别是什么,HTML标记<div>和<span>之间有什么区别？-优快云博客

Chris Marast..

551

div是一个块元素,span是内联的.

这意味着要在语义上使用它们,div应该用于包装文档的各个部分,而跨度应该用于包装文本,图像等的一小部分.

例如:

This a large main division, with a small bit of spanned text!

请注意,将块级元素放在内联元素中是违法的,因此:

Some text that

I want

to mark up

......是非法的.

编辑:从HTML5开始,一些块元素可以放在一些内联元素中.有关非常清晰的列表,请参阅此处的MDN参考.以上仍然是非法的,因为只接受措辞内容,并且

是流内容.

你问了一些具体的例子,所以从我的保龄球网站BowlSK中取出一个:

好的,发生了什么？在我的页面顶部,我有一个逻辑部分,"标题".由于这是一个部分,我使用div(具有适当的id).在其中,我有几个部分:用户栏和实际页面标题.标题使用适当的标签h1.用户栏是一个部分,包含在一个部分中div.在其中,用户名包含在a中span,以便我可以更改样式.正如你所看到的,我还在span标题中包含了大约2个字母 - 这允许我在样式表中更改它们的颜色.

另请注意,HTML5包含一组广泛的新元素,用于定义常见的页面结构,例如文章,部分,导航等.HTML 5工作草案的第4.4节列出了它们,并提供了有关其用法的提示.HTML5仍然是一个工作规范,所以没有什么是"最终的",但是任何这些元素都在任何地方都是非常值得怀疑的.如果你想在一些旧版本的IE中设置这些元素的样式,你需要使用javascript hack - 你基本上需要document.createElement在源中指定任何元素之前创建每个元素之一.有很多库会为你解决这个问题 - 快速谷歌搜索出现了html5shiv.

"语义学(来自希腊语sēmantiká,中性复数sēmantikós)[1] [2]是对意义的研究.它侧重于能指之间的关系,如词,短语,符号和符号,以及它们代表什么,它们的指示词".能指"div"和"span"肯定代表某种东西.HTML规范很好地分析了块和内联元素的含义.http://www.w3.org/TR/html401/struct/global.html#h-7.5.3.HTML5草案甚至将它们放在不同的组中 - 分组内容和文本级语义.http://dev.w3.org/html5/spec/Overview.html (19认同)

你让我在"div是一个块元素,span是内联的.":) (15认同)

@apnerve他们仍然在该块中具有语义,而内联元素对于文档流来说意味着不同的东西,无论是从解析角度还是从"阅读此源来弄清楚正在发生的事情"的角度来看. (9认同)

你不能在语义上使用`div`和`span`,因为它们没有任何意义.`div`是无意义的通用块级元素,而`span`是无意义的通用内联元素. (7认同)

Chris,你的文本中有一个错误:即使你将span的样式设置为"block",将它包装在块级元素周围仍然是*非法的! (5认同)

如果您提供aria标准非抽象角色之一作为值的`role`属性，则绝对可以在语义上使用div和span。通常首选使用适当的语义HTML元素，但是有些角色(至今)还没有相应的HTML元素，例如“工具栏”。还有一些HTML语义没有相应的角色(例如`<dl>`)。HTML5中出现的许多语义元素都是从角色属性开始的，因此从语义上讲，您可能会争辩说使用诸如<div role =“ toolbar”>`之类的东西已经领先于游戏。 (2认同)