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是一个小容器,大容器当然可以放下一个小容器啦)

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 accesskey="1" for="textName">Your Name:</label>
<input type="text" id="txtName" value="Press Alt+1"/>
</div>
</div>

运行结果:

有一个问题是:

accesskey这个属性不是设置快捷键的么?可是按键1和alt+1都没有反应,不知道什么情况,很是郁闷,希望高手可以给以解答label标签accesskey的用法。

附:label标签的具体用法:

label标记为标注标记,该标记支持与其他用户交互式控件进行绑定,并代替被绑定控件触发相应的事件,绑定的方法是:将for属性值指定为目的控件(绑定控件)的ID。一般情况下,在使用单选框和复选框时用label绑定比较常见。
Label中两个属性非常有用,一个是for,一个就是accesskey
For属性:
功能:表示Label标签要绑定的HTML元素,你点击这个标签的时候,所绑定的元素将获取焦点
用法:
<label for="inputBox">姓名</label>
<input id="inputBox" type="text">
Accesskey属性:
功能:表示访问label标签所绑定的元素的热键,当您按下热键,所绑定的元素将获取焦点。
用法:<label for="inputBox" accesskey="N">姓名</label>
     <input id="inputBox" type="text">
局限性:accessKey属性所设置的快捷键不能与浏览器的快捷键冲突,否则将优先级或浏览器的快捷键。

注释 :
要将 LABEL 绑定到其它的控件,请将 LABEL 元素的 FOR 属性设置为与该控件的 ID 相同。将 LABEL 绑定到控件的 NAME 属性毫无用处。但是,要提交表单,你必须为 LABEL 元素所绑定到的控件指定 NAME。

有两种方法给所指定的快捷键添加下划线。LABEL 元素的 rich text 支持可以在 ACCESSKEY 属性所指定的快捷键字符两侧加上 U 元素。如果你更愿意使用样式表(CSS)来应用样式,可以将该字符包含在 SPAN 中,并设置样式为“text-decoration: underline”。

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

标签不允许嵌套。

此元素在 Internet Explorer 4.0 及以上版本的 HTML 和脚本中可用。

此元素是内嵌元素。

此元素需要关闭标签。

HTML中Div、span、label标签的区别的更多相关文章

  1. html中object和embed标签的区别

    ♦object定义一个嵌入的对象.请使用此元素向您的 XHTML 页面添加多媒体.此元素允许您规定插入 HTML 文档中的对象的数据和参数,以及可用来显示和操作数据的代码. ♦<object&g ...

  2. HTML中的Div Span label的区别

    div与span 大家在初学div+css布局时,有很多困惑,在div与span的使用过程没觉得有一定的”章法”,觉得两个区别不大,在w3c的关于div和span的定义:div作为分割文档结构自然使它 ...

  3. React中 checkbox 与 label 标签的搭配

    用<label>标签替代checkbox的点击样子,点击<label>实际上就是点击checkbox checkbox的checked值会跟着一起变 <input typ ...

  4. Laravel模板引擎Blade中section的一些标签的区别介绍

    Laravel 框架中的 Blade 模板引擎,很好用,但是在官方文档中有关 Blade 的介绍并不详细,有些东西没有写出来,而有些则是没有说清楚.比如,使用中可能会遇到这样的问题: 1.@yield ...

  5. FreeMarker中<#include>和<#import>标签的区别

    在使用freemarker作为前端页面模板的应用中,会有很多的freemarker模板页面,这些ftl会在不同的页面中重复使用,一是为了简化布局的管理,二是可以重复使用一些代码. 在freemarke ...

  6. div,span等标签支持focus/blur事件

    <div tabindex="0" hidefocus="true" onfocus='alert("得到焦点");' onblur= ...

  7. 判断input或者div.span等标签是否存在

    //用jQuery检查某个元素在网页上是否存在时,应该根据获取元素的长度来判断,代码如下 if($("#email"+i).length > 0){//判断input是否存在 ...

  8. html form <label>标签基础语法结构与使用案例教程(转载)

    在表单布局中会遇到label标签的使用,label没有任何样式效果,有触发对应表单控件功能.比如我们点击单选按钮或多选框前文字对应选项就能被选中,这个就是对文字加了<label>标签实现. ...

  9. 前端 HTML body标签相关内容 常用标签 表单标签 form里面的 label标签介绍

    定义:<label> 标签为 input 元素定义标注(标记). label标签功能:关联input标签文本与表达元素,点击input标签文本时,如同点击表单元素一样. label标签是行 ...

随机推荐

  1. Hive架构

    Hive组织数据包含四种层次:DataBase --> Table --> Partition --> Bucket,对应在HDFS上都是文件夹形式. 数据库和数据仓库的区别: 1) ...

  2. Nagios监控mysql主从复制

    因为公司的nagios用了很久监控项目很多,也在zabbix迁移中,也就先临时用nagios监控mysql主从了 mysql> show slave status\G 查看其输出,即可判定主从复 ...

  3. brpc编译运行

    自百度开源brpc后就一直在关注,看了下brpc都源码,感觉大牛写的果然不一样,由于之前我做c++游戏服务器开发,所以主要看了下网络底层代码,收益颇多,果然一天不学习就要落伍. 现在主要和大家说下我编 ...

  4. Python学习札记(十八) 高级特性4 生成器

    参考:生成器 Note 1.通过列表生成式,我们可以直接创建一个列表.但是,受到内存限制,列表容量肯定是有限的,且容易造成空间浪费.所以,如果列表元素可以按照某种算法推算出来,那我们可以在循环的过程中 ...

  5. asp.net core开发注意事项

    1.类库的创建尽量选择.net standard. 如果选择.net core 则.net framework不能调用该类库, .net core和.net framework都可以调用.net st ...

  6. SVN 与Eclipse 关联 || 安装beyond 插件

    1.让本地svn代码与库建立联系   右击项目名称,Team -  share project 2.本地svn版本一般与Eaclipse svn插件 版本一致!http://subclipse.tig ...

  7. webstorm自动换行

    1.文件 — — 设置 2. 编辑器 — — 编辑器 — — 在编辑窗口使用软换行(勾选)

  8. arm中的几个公式的比较

    串口 UART0.UBRDIVO=0X4d; 设置波特率 12000000/9600/16 -1=77化为16进制就是4dADC AD converter freq =50MHZ/(49+1) =1M ...

  9. Enumerable的判断是否包含某个元素

    // 通过使用默认的相等比较器(即纯粹的对象比较)确定序列是否包含指定的元素. public static bool Contains<TSource>(this IEnumerable& ...

  10. CAJ2PDF

    该项目不成熟,很容易遇到转换失败的例子. https://github.com/JeziL/caj2pdf https://github.com/JeziL/caj2pdf/wiki caj2pdf ...