深入理解html中div、span、label标签区别

发布时间:2021-01-03编辑:脚本学堂
本文介绍了html中div、span、label标签的区别,span标签与label标签在用法上有哪些不同,span元素和div元素用法对比分析等内容。

html中div、span标签、label标签区别
div:指定渲染html的容器
span:指定内嵌文本容器
通俗地讲就是如果里面还有其他标签的时候就用div,如果里面只有文本就应该用span
div是一个块级元素,用来为html文档内大块的内容提供结构和背景
span是行内元素,在行内定义一个区域(也就是一行内可以被<span>划分好几个区域)
div标签中可以镶嵌span标签,(div可以看做是一个大容器,span是一个小容器,大容器当然可以放下一个小容器啦)
 
一、span标签与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 事件。

二、span元素和div元素有什么区别
 
最明显的区别是: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">