日期:2014-05-17  浏览次数:20594 次

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