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的Accesskey属性一般与for属性组合使用，当用户键盘按下Accesskey指定的键，Label所绑定的元素将获得焦点。

<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>

＜span＞SPAN标记有一个重要而实用的特性，即它什么事也不会做，它的唯一目的就是围绕你的HTML代码中的其它元素，这样你就可以为它们指定样式了。在此例中，＜span＞标识符允许你将一个段落分成不同的部分。

　　 还有一个标识符具有类似的功能，＜div＞DIV也被用来在HTML文件中建立逻辑部分。但与＜div＞SPAN不同，＜div＞工作于文本块一级，它在它所包含的HTML元素的前面及后面都引入了行分隔。

技 巧：有些朋友会说DIV是层标签，其实HTML里是没有层这个说法的，只不过是为了易于理解，Dreamweaver里才这样写的，每个对象都可以成为 “层”，只需要给对象定义position属性(值为absolute或relavite)。例如，要让图片成为“层”，可以这样写代码：

<img src="demo.gif" style="posibion:absolute;left:20;top:20">