HTML中div span 与label

1. 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是一个小容器，大容器当然可以放下一个小容器啦）

 

2.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通过for属性绑定了单选按钮yes和no，那么效果就是如果点击label上的文字时，那么所绑定的单选按钮就会被选中。

 

label注意：

　　1.accessKey属性所设置的快捷键不能与浏览器的快捷键冲突，否则将优先级或浏览器的快捷键。

　　2.如果用户单击 LABEL，则会先触发 LABEL 上的 onclick 事件，然后触发由 htmlFor 属性所指定的控件上的 onclick 事件。按下 LABEL 设定的快捷键将设置焦点但并不触发 onclick 事件。