HTML中的Div Span label的区别
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的区别的更多相关文章
- html中的div span和frameset框架标签
Div和span 1. div独占一层,由div九不允许有别的. 2. span标签不是独自占用一行,span一般用来设置字体. 框架标签: 什么是框架标签,就是把一个页面分成很多 ...
- (转)asp.net中Literal与label的区别
asp.net中Literal与label的区别 一.Literal Web 服务器控件概述(摘于MSDN) 可以使用 Literal Web 服务器控件作为页面上其他内容的容器.Literal 最常 ...
- div和span元素的区别
2个都是用来划分区间但是没有实际语义的标签,差别就在于div是块级元素,不会其他元素在同一行;span是内联元素,可以与其他元素位于同一行. DIV 和 SPAN 元素最大的特点是默认都没有对元素内的 ...
- 10-2 body标签中相关的标签(字体标签,排版标签(div,span),超链接,图片标签)
一 排版标签(div,span) 1块级标签 <!--div:把标签中的内容作为一个块儿来对待(division).必须单独占据一行.--> <!--div标签的属性:--> ...
- HTML中id、name、class 区别
参考:http://www.cnblogs.com/polk6/archive////.html http://blog.csdn.net/ithomer/article/details/ HTML ...
- CSS学习笔记--Div+Css布局(div+span以及盒模型)
1.DIV与SPAN 1.1简介 1.DIV和SPAN在整个HTML标记中,没有任何意义,他们的存在就是为了应用CSS样式 2.DIV和span的区别在与,span是内联元素,div是块级元素 内联元 ...
- 在ajax请求中,contentType 和 dataType 的区别?
一.在ajax请求中,contentType 和 dataType 的区别? 1.contentType 内容类型. 1.1默认是 "application/x-www-form-urlen ...
- input中id和name属性的区别。
input中id和name属性的区别. 做网站很久了,但到现在还没有搞明白input中name和id的区别,最近学习jquery,又遇到这个问题,就在网上搜集资料.看到这篇,就整理出来,以备后用. 可 ...
- HTML基础之HTML标签-html header(meta,title) html body(p,br,h,form,div,span,input,lable)
摘自:http://www.imdsx.cn/index.php/2017/07/27/html0/ 一.HTML标签 <!DOCTYPE html> <!--标准的html规则,类 ...
随机推荐
- ACM-ICPC2018 沈阳赛区网络预赛-E-The cake is a lie
You promised your girlfriend a rounded cake with at least SS strawberries. But something goes wrong, ...
- Linux type命令的用法
一般情况下,type命令被用于判断另外一个命令是否是内置命令,但是它实际上有更多的用法. 1.判断一个名字当前是否是alias.keyword.function.builtin.file或者什么都不是 ...
- 重构改善既有代码设计--重构手法10:Move Method (搬移函数)
你的程序中,有个函数与其所驻类之外的另一个类进行更多的交流:调用后者,或被后者调用.在该函数最常用引用的类中建立一个有着类似行为的新函数.将旧函数编程一个单纯的委托函数,或是将旧函数完全移除. 动机: ...
- MySQL异常总结
1.Packets larger than max_allowed_packet are not allowed MySQL的一个系统参数:max_allowed_packet,其默认值为104857 ...
- IO流-LineNumberReader
LineNumberReader继承自BufferedReader,比其多了两个方法,用于设置和获取当前行号, setLineNumber(); getLineNumber();
- Try finally的一个实验和为什么避免重载 finalize()方法--例子
public class TryFinallTest { public TryFinallTest(){ } public void runSomething(String str){ System. ...
- 你不知道的Static
Static静态字段,静态方法,静态代码块 壹 简介 一些场景下会要求一个类的多个实例共享一个成员变量:有时候想定义一些不和具体对象关联.不需要new就调用的方法 举例:Console类的Write ...
- mysql查询日期相关的
今天 select * from 表名 where to_days(时间字段名) = to_days(now()); 昨天 SELECT * FROM 表名 WHERE TO_DAYS( NOW( ) ...
- maven使用过程中遇到的问题总汇
1:web.xml is missing and <failOnMissingWebXml> is set to true 造成原因: 使用maven创建项目时有时在pom.xml的war ...
- layui结合mybatis的pagehelper插件的分页通用的方法
总体思路: 1.前台查询的时候将当前页和页大小传到后台 2.后台将当前页,页大小以及数据与数据总数返回前台,前台显示完表格完数据之后显示分页插件. 前台页面: 准备查询条件的表单,与数据表格,分页di ...