论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是行内元素,在行内定义一个区域(也就是一行内可以被划分好几个区域)

div标签中可以镶嵌span标签,(div可以看做是一个大容器,span是一个小容器,大容器当然可以放下一个小容器啦)

span与label

由于有了以上关于span的说法,那么我们就可以对文本进行span的容器操作了,可以定义css样式什么的,但是label好像也可以?但是两者区别有时什么呢?

label标签主要用于绑定一个表单元素, 当点击label标签的时候, 被绑定的表单元素就会获得输入焦点

span则是对普通的文本的一种容器。

例子:

What are you name?(Press choice "Yes" or "No")
Yes
NO

Your Name:

运行结果:

有一个问题是:

附:label标签的具体用法:

label标记为标注标记,该标记支持与其他用户交互式控件进行绑定,并代替被绑定控件触发相应的事件,绑定的方法是:将for属性值指定为目的控件(绑定控件)的ID。一般情况下,在使用单选框和复选框时用label绑定比较常见。

Label中两个属性非常有用,一个是for,一个就是accesskey

For属性:

功能:表示Label标签要绑定的HTML元素,你点击这个标签的时候,所绑定的元素将获取焦点

用法:

姓名

Accesskey属性:

功能:表示访问label标签所绑定的元素的热键,当您按下热键,所绑定的元素将获取焦点。

用法:姓名

局限性: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 事件。

引自:https://blog.csdn.net/cui_angel/article/details/7676395

原文地址:https://www.cnblogs.com/elion/p/8724140.html

时间: 2024-09-29 09:31:04

论HTML的div、span和label的区别的相关文章

HTML中Div、span、label标签的区别

div与span 大家在初学div+css布局时,有很多困惑,在div与span的使用过程没觉得有一定的”章法”,觉得两个区别不大,在w3c的关于div和span的定义:div作为分割文档结构自然使它最官方的语义,但是这样的官方语义太让人迷惑,大的结构还好,但是小的地方到底是用div还是用span仍然让人迷惑.其实恰恰是<Microsoft MSDN Library>里面的定义让人豁然开朗. div:指定渲染HTML的容器 span:指定内嵌文本容器 通俗地讲就是如果里面还有其他标签的时候就用

div/span等获取焦点问题(tabindex属性的简单理解)

1.先看问题 当我们要对一个div/span元素获取焦点的时候,直接对$("#div1").focus()是不能实现效果的,比如下图: 当点击输入框进行输入后,在点击区域弹出选择地段的时候,input输入框并没有失去焦点(或者说区域的div没有获得焦点),就出现了键盘显示在弹层的上面导致无法选择的bug 解决办法有两个: a:循环所有的input等可以获取焦点的元素,让他们失去焦点(blur); b:点击区域选择地段的时候让div获取焦点,从而解决input不失焦的问题: 在这里对于普

Div Span

网上看到的说明div span的例子,有助于理解,span是行级样式定义元素,div是块级样式定义元素 1 <head> 2 <meta http-equiv="Content-Style-Type" content="text/css"> 3 <title>HTML示例</title> 4 <style type="text/css"> 5 .myspan1 { color: #FFF

DIV/SPAN通用子窗口展现、关闭JS接口

子窗口通用接口,基于jQuery支持使用.目前设计时,使用的是1.7.2版.FF默认焦点未失去问题存在. HTML & JS: <html>     <head>         <title></title>         <script charset="GB2312" type="text/javascript" src="js/jquery-1.7.2.js"><

div、span、label标签的区别

1.div <div> 可定义文档中的分区或节(division/section). <div> 标签可以把文档分割为独立的.不同的部分.它可以用作严格的组织工具,并且不使用任何格式与其关联. 如果用 id 或 class 来标记 <div>,那么该标签的作用会变得更加有效. div是一个块级元素,用来为HTML文档内大块的内容提供结构和背景 2.span <span> 标签被用来组合文档中的行内元素.(也就是一行内可以被<span>划分好几个区

div span ul ol 区别

一不小心跑偏了qwq 1.ol和ul <ol> <li> </li> <li> </li> <ul> <ul> <li> </li> <li> </li> </ul> 上面那两块的区别在于ul块中的行有小圆点,<li>是行的意思: 2.div和span div和span都是块,但是div是自动分行的:

下拉按钮控制下面菜单 Div || span显示的内容

1.效果 2.前太js //预算数标题及数据 function initTxet() { var servercall = new CallServer(webserviceurl.FMBudget, "initTxet", { "budgettype": CurrentCardType }); var result = servercall.Call(function (arg) { var dl = jQuery("#callvisittext&quo

jquery给div,Span,赋值取值

jquery给div的innerHTML赋值 $("#id").html()="test"; //或者 $("#id").html("test"); jquery 给span 赋值 $('#hiddenNote').text(‘getSpanValues’); span取值 $('#hiddenNote').text(); 原文地址:https://www.cnblogs.com/zhongzhipeng/p/11375213

asp.net c#过滤html代码,净化DIV SPAN等

public static string GetSafeHtml(string val) { if (string.IsNullOrEmpty(val)) { return string.Empty; } var v1 = Sanitizer.GetSafeHtmlFragment(val);//安全字符 var v2 = SanitizerCompatibleWithChineseCharacters(v1);//中文乱码 //Regex objRegEx=new Regex("<([^