HTML标签< div>之间的区别是什么？和< span&gt ;? [英] What is the difference between HTML tags <div> and <span>?

问题描述

我想问一些简单的例子，说明使用< div> 和< span> 。我见过他们都用 id 或 class 来标记页面的一部分，但我是有兴趣知道是否有次优先于其他人。

是块元素， span 是内联的。

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

例如：

 < div>这是一个很大的主分部，其中< span>一小部分< / span> spanned text！< / div> 
  

请注意，在嵌入元素中放置块级元素是非法的，所以：

 < div>一些< span>文字< div>我想要< / div>标记< / span>向上< / DIV> 
  

...是非法的。

---

编辑：从HTML5开始，一些块元素可以放置在某些内联元素中 - 特别是，上面现在是合法的。

< hr>

你问了一些具体的例子，所以我从我的保龄球网站 BowlSK ：

 < div id =header> 
< div id =userbar> 
您好，< span class =username> Chris Marasti-Georg< / span> | 
< a href =/ edit-profile.html>个人资料< / a> | 
< a href =http：//www.bowlsk.com/_ah/logout？...>退出< / a> 
< / div> 
< h1>< a href =/> Bowl< span class =sk> SK< / span>< / a>< / h1> 
< / div> 
  

好的，这是怎么回事？在我的页面顶部，我有一个逻辑部分，即标题。由于这是一个部分，我使用了一个div（使用适当的id）。其中，我有几个部分：用户栏和实际页面标题。标题使用适当的标签 h1 。用户栏是一个部分，被封装在 div 中。其中，用户名被封装在 span 中，以便我可以改变样式。正如你所看到的，我还在标题中包含了大约2个字母的 span - 这允许我在样式表中改变它们的颜色。

另请注意，HTML5包含一组广泛的定义常见页面结构的元素，例如文章，部分，导航等。 HTML 5 working draft 列出了它们，并给出了它们的用法提示。 HTML5仍然是一个工作规范，所以没有什么是最终的，但它是非常值得怀疑的是，这些元素都在任何地方。如果你想在IE的一些老版本中设置这些元素，你需要使用JavaScript hack - 你基本上需要使用 document.createElement 在你的源代码中指定了这些元素之前。有一大堆图书馆会为你处理这个问题 - 一个快速的Google搜索出现在 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 element, span is inline.

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 - notably, the above is now legal.

---

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="http://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 basically 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标签&lt; div&gt;之间的区别是什么？和&lt; span&gt ;?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！