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

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值