div、span、label标签的区别

1.div

<div> 可定义文档中的分区或节(division/section)。

<div> 标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具,并且不使用任何格式与其关联。

如果用 id 或 class 来标记 <div>,那么该标签的作用会变得更加有效。

div是一个块级元素,用来为HTML文档内大块的内容提供结构和背景

2.span

<span> 标签被用来组合文档中的行内元素。(也就是一行内可以被<span>划分好几个区域)

通俗地讲就是如果里面还有其他标签的时候就用div,如果里面只有文本就应该用span

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

3.lable

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

<label> 标签为 input 元素定义标注(标记)。

label 元素不会向用户呈现任何特殊效果。不过,它为鼠标用户改进了可用性。如果您在 label 元素内点击文本,就会触发此控件。就是说,当用户选择该标签时,浏览器就会自动将焦点转到和标签相关的表单控件上。

<label> 标签的 for 属性应当与相关元素的 id 属性相同。

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

时间: 2024-10-16 17:09:16

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:指定内嵌文本容器 通俗地讲就是如果里面还有其他标签的时候就用

table标签中不能有div、span等标签

table标签中不能有div.span等标签   今天在<table>标签中放置了个<span>标签,结果用span的id去修改其中innerHTML的值时, 发现取值在不同浏览器中有问题! 解决:就是不能随便放置<span>标签在<table>中!!! DIV不能直接加在table中,放在td中即可 来自为知笔记(Wiz)

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

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

关于label标签的研究

一:功能介绍 定义:label 元素不会向用户呈现任何特殊效果.它为鼠标用户改进了可用性.总的来说<label>专为input元素服务,为其定义标记. 用法:<label> 标签的 for 属性与相关元素的 id 属性相同,用来指定是向与哪个元素绑定. 二:应用示例 例子如下: 用户名:<input type="text" name="userName" id="userName"  />,像这个代码运行后,你

项目期复习总结:Table, DIV+CSS,标签嵌套规则

目录: 1.表格的意义,含义? 2.表格有哪些元素? 3.表格布局,表格布局的优缺点 4.行元素,块元素的区别? 5.标签的合理嵌套及标签的语义性 ① 表格的意义,含义? 表格应该用来展现那些适合表格化显示的信息,比如数据的显示,统计或者二维报表之类的信息,而不是作为一种而已的工作 ② 表格有哪些元素? 表格元素:table thead tbody tfoot caption tr th td .... 较常用  ③ 表格的使用应该注意哪些? 1)使用表格时注意合理嵌套,遵循标签的语义性,tab

第7天:input和label标签

今天学的不多,就只学了表单元素中的input和label标签.搬了房子,收拾了一下东西,太累了,所以没有学很多.明天还上班,今天就先到这. 一.input input标签type属性有以下几个:text.password.textarea.radio.checkbox.button.submit.reset按钮1.<input type="button" value="确定">2.<input type="submit" >

HTML label标签的一点理解

label标签为input元素定义标注. label元素不呈现任何特殊效果.不过他为鼠标用户改进了可用性.如果你在label元素内点击文本就会触发此控件.就是说当用户选择该标签是,浏览器就会自动的将焦点转到与表单相关的控件上来. 其有两个属性for from. for 规定绑定到哪一个表单元素上.(label元素的for属性值必须和相关表单元素的id属性值相同) from规定字段所属的一个或多个表单. 例:常见的网页侧边栏弹出效果也可以完全用css动画实现.此时label标签就得到应用. <!D

struts2的标签和一般的html标签的区别

1.s:textfield 和 input <s:textfield name="type.name" id="type_name" label="名称"></s:textfield> 相当于 <td ><label >名称:</label></td> <td> <input type="text" name="type.nam

django为Form生成的label标签添加class

使用Form生成html标签的时候,虽然提供了widget的方法可以自定义标签的要是,但是只能给生成的input标签添加样式,对于生成的label标签无法添加样式.而很多场景下需要为label和input都添加class以实现自定义样式. 测试环境 创建一个Form,通过Form帮我们生成HTML: # urls.py 文件,对应关系 path('email/', views.email), # forms.py 文件 from django.forms import Form from dja