HTML中Div、span、label标签的区别

div与span

大家在初学div+css布局时，有很多困惑，在div与span的使用过程没觉得有一定的”章法”，觉得两个区别不大，在w3c关于div和span的定义：div作为分割文档结构，自然是它最官方的语义，但是这样的官方语义太让人迷惑，大的结构还好，但是小的地方到底是用div还是用span仍然让人迷惑。其实恰恰是《Microsoft MSDN Library》里面的定义让人豁然开朗。

• div：指定渲染HTML的容器

• span：指定内嵌文本容器

通俗地讲就是如果里面还有其他标签的时候就用div，如果里面只有文本就应该用span

div是一个块级元素，用来为HTML文档内大块的内容提供结构和背景，

span是行内元素，在行内定义一个区域（也就是一行内可以被<span>划分好几个区域）

div标签中可以镶嵌span标签，（div可以看做是一个大容器，span是一个小容器，大容器当然可以放下一个小容器啦）

span与label

由于有了以上关于span的说法，那么我们就可以对文本进行span的容器操作了，可以定义css样式什么的,但是label好像也可以?但是两者区别有时什么呢?

• label标签主要用于绑定一个表单元素, 当点击label标签的时候, 被绑定的表单元素就会获得输入焦点

• span则是对普通的文本的一种容器。

例子：

<div id="divForm">
	<div>
		<span>Did you visited my blog</span>
		<input type="radio" id="radYes" name="visitedblog" checked="checked"/>
		<label for="radYes">Yes</label>
		<input type="radio" id="radNo" name="visitedblog"/>
		<span>
		<label for="radNo">NO</label>
		(Press the text "Yes" or "No" not the radio)</span>
		</div>
		<div>
		<label accesskey="1" for="textName">Your Name:</label>
		<input type="text" id="txtName" value="Press Alt+1"/>
	</div>
</div>