问题描述
我想问一些简单的例子来说明
的用法.我已经看到它们都用于用 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 元素有什么区别?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!
07-31 06:23