HTML div 和 span 元素有什么区别? [英] What is the difference between HTML div and span elements?
问题描述
我想问一些简单的例子来说明
id 或 class 标记页面的一部分，但我很想知道是否有时间优先于另一个.这意味着要在语义上使用它们，应该使用 div 来包裹文档的各个部分，而应该使用跨度来包裹一小部分文本、图像等.
例如:
这是一个大的主除法，带有一个小位；跨文本！</div>请注意，将块级元素放置在内联元素中是非法的，因此:
一些我想要的文本标记</span>向上
...是非法的.
<小时>从 HTML5 开始，一些块元素可以放置在一些内联元素内.请参阅 MDN 参考此处以获得非常清晰的列表.以上仍然是非法的，因为
是流内容.<小时>你要求提供一些具体的例子，我的保龄球网站BowlSK:
<div id="用户栏">你好，<span class="username">Chris Marasti-Georg</span>|<a href="/edit-profile.html">个人资料</a>|<a href="https://www.bowlsk.com/_ah/logout?...">退出</a><h1><a href="/">Bowl<span class="sk">SK</span></a></h1>
好的，发生了什么?
在我的页面顶部，我有一个逻辑部分，即标题".由于这是一个部分，我使用一个 div(具有适当的 id).其中，我有几个部分:用户栏和实际页面标题.标题使用适当的标签 h1.作为一个部分的用户栏被包裹在一个 div 中.其中，用户名包含在 span 中，以便我可以更改样式.如您所见，我还在标题中用 2 个字母包裹了 span - 这允许我在样式表中更改它们的颜色.另请注意，HTML5 包含一组广泛的新元素，用于定义常见的页面结构，例如文章、部分、导航等.
HTML 5 工作草案的第 4.4 节列出了它们并给出了提示到他们的用法.HTML5 仍然是一个有效的规范，所以还没有什么是最终的"，但是这些元素中的任何一个都非常值得怀疑.如果您想在某些旧版本的 IE 中设置这些元素的样式，则需要使用 javascript hack - 您需要在任何这些元素之前使用 document.createElement 创建每个元素中的一个在您的来源中指定.有很多库可以为您处理这个问题 - 一个快速的谷歌搜索出现 html5shiv.
I would like to ask for some simple examples showing the uses of <div> and <span>. I've seen them both used to mark a section of a page with an id or class, but I'm interested in knowing if there are times when one is preferred over the other.
解决方案
div is a block elementspan is an inline element.
This means that to use them semantically, divs should be used to wrap sections of a document, while spans should be used to wrap small portions of text, images, etc.
For example:
<div>This a large main division, with <span>a small bit</span> of spanned text!</div>
Note that it is illegal to place a block-level element within an inline element, so:
<div>Some <span>text that <div>I want</div> to mark</span> up</div>
...is illegal.
EDIT: As of HTML5, some block elements can be placed inside of some inline elements. See the MDN reference here for a pretty clear listing. The above is still illegal, as <span> only accepts phrasing content, and <div> is flow content.
You asked for some concrete examples, so is one taken from my bowling website, 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="https://www.bowlsk.com/_ah/logout?...">Sign out</a>
</div>
<h1><a href="/">Bowl<span class="sk">SK</span></a></h1>
</div>
Ok, what's going on?
At the top of my page, I have a logical section, the "header". Since this is a section, I use a div (with an appropriate id). Within that, I have a couple of sections: the user bar and the actual page title. The title uses the appropriate tag, h1. The userbar, being a section, is wrapped in a div. Within that, the username is wrapped in a span, so that I can change the style. As you can see, I have also wrapped a span around 2 letters in the title - this allows me to change their color in my stylesheet.
Also note that HTML5 includes a broad new set of elements that define common page structures, such as article, section, nav, etc.
Section 4.4 of the HTML 5 working draft lists them and gives hints as to their usage. HTML5 is still a working spec, so nothing is "final" yet, but it is highly doubtful that any of these elements are going anywhere. There is a javascript hack that you will need to use if you want to style these elements in some older version of IE - You need to create one of each element using document.createElement before any of those elements are specified in your source. There are a bunch of libraries that will take care of this for you - a quick Google search turned up html5shiv.
这篇关于HTML div 和 span 元素有什么区别?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
