CSS中的div,span跟label

div与span

大家在初学div+css布局时,有很多困惑,在div与span的使用过程没觉得有一定的”章法”,觉得两个区别不大,在w3c的关于div和span的定义:div作为分割文档结构自然使它最官方的语义，但是这样的官方语义太让人迷惑，大的结构还
好，但是小的地方到底是用div还是用span仍然让人迷惑。其实恰恰是《Microsoft MSDN Library》
里面的定义让人豁然开朗。
div：指定渲染 HTML 的容器。
span：指定内嵌文本容器。
说白了就是如果里面还有其他标签的时候就用div，如果里面只有文本的就应该用span。

?

span与label

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

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

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

?

div-span-label

<div id="divForm">
??? <div class="divFormItem">
??? ??? <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 class="divFormItem">
??? ??? <label accesskey="1" for="txtName">Your Name：</label>
??? ??? <input type="text" id="txtName" value="Press Alt + 1" />
??? </div>
</div>

?

?

Label的for属性与Accesskey属性

Label的for属性与其他元素的ID属性绑定，就像超链接锚点一样，点击Label标签焦点就会转移到绑定的元素上。

<Label for="input1">姓名</Label> ??? //点击Label文本“姓名”焦点就会转移到ID="input1"的input标签上

<input ID="input1" type="text"> ?????????

?

<Label for="InputBox" Accesskey＝"N">姓名</Label>

<input ID="InputBox" type="text">

AccessKey属性所设置的快捷键不能与浏览器的快捷键冲突。

?

?

?

?

SPAN元素和DIV元素有什么区别? (转自: http://zhangjf.blog.51cto.com/264589/49250 )

?

最明显的区别是：DIV(division)是一个块级元素，可以包含段落、标题、表格，乃至诸如章节、摘要和备注等。而SPAN 是行内元素，SPAN 的前后是不会换行的，它没有结构的意义，纯粹是应用样式，当其他行内元素都不合适时，可以使用SPAN。块元素相当于内嵌元素在前后各加一 个<br>换行。其实，块元素和行内元素也不是一成不变的，只要给块元素定义display:inline，块元素就成了内嵌元素，同样地， 给内嵌元素定义了display:block就成了块元素了。

具体步骤：
代码示例：

<style>
div,span{border:1px solid #000;margin:2}
</style>
<div>div1</div><div>div2</div>
<span>span1</span><span>span2</span>
<br>
<div style="display:inline">div3</div>
<div style="display:inline">div4</div>
<span style="display:block">span3</span>
<span style="display:block">span4</span>