id和class是定义css样式用到的,不同的是定义样式时的写法不一样,使用id选择样式时,定义的格式为 #main{width:20px;} ,使用class时用到的是 .main{width:20px;}

id重复使用在应用到js的时候可能会产生错误(当js代码中用到这个id的时候),没有规定不能重复使用。

HTML name、id、class 的区别

  在一个页面中,有许多的控件(元素或标签)。为了更方便的操作这些标签,就需要给这些标签标识一个身份牌。

目录

1. name :指定标签的名称。

2. id :指定标签的唯一标识。

3. class :指定标签的类名。

1. name

指定标签的名称。

1.1 格式

<input type="text" name="username" />

1.2 应用场景

①form表单:name可作为转递给服务器表单列表的变量名;如上面的传到服务器的名称为:username='text的值'。

②input type='radio'单选标签:把几个单选标签的 name设为一个相同值时,将会进行单选操作。

<input type="radio" name='sex'/>男
<input type="radio" name='sex'/>女

③快速获取一组name相同的标签:获取拥有相同name的标签,一起进行操作,如:更改属性、注册事件等。

function changtxtcolor() {
var txts = document.getElementsByName('txtcolor'); //获取所有name=txtcolor 的标签
for (var i = 0; i < txts.length; i++) { //循环遍历标签,并把背景色改为red
txts[i].style.backgroundColor = 'red';
}
}

1.3 特性

name属性的值,在当前page页面中并非唯一性。

2. id

指定标签的唯一标识。

2.1 格式

<input type=password id="userpwd" />

2.2 应用场景

①根据提供的唯一id号,快速获取标签对象。如:document.getElementById(id)

②用于充当label标签for属性的值:示例:<label for='userid'>用户名:</label>,表示单击此label标签时,id为userid的标签获得焦点。

2.3 特性

id属性的值,在当前的page页面要是唯一的。

3. class

指定标签的类名。

3.1 格式

<input type=button class="btnsubmit" />

3.2 应用场景

①CSS操作,把一些特定样式放到一个class类中,需要此样式的标签,可以在添加此类。

3.3 特性

可以把多个类,放在一个class属性里,但必须用空格隔开;如:class='btnsubmit btnopen'

id和class的区别的更多相关文章

  1. html元素中id和name的区别

    可以说几乎每个做过Web开发的人都问过,到底元素的ID和Name有什么区别阿?为什么有了ID还要有Name呢?! 而同样我们也可以得到最classical的答案:ID就像是一个人的身份证号码,而Nam ...

  2. html中元素的id和name的区别(2016-1-22)

    HTML中元素的Id和Name属性区别 一直以来一直以为在html中,name和id没什么区别,今天遇到一个坑才发现(PHP获取不到表单数据,原因:元素没有name,只定义了id),这两者差别还是很大 ...

  3. form表单中的id 与name的区别

    以前经常写form表单时,不写id和name,总觉得没有什么用.后来一看后台套完的页面发现,他们都补上name,不知道所以然,就查了一下资料,吓我一跳,要是照我那样写根本不会有数据传到服务器.原来表单 ...

  4. javascript querySelector和getElementById通过id获取元素的区别

    querySelector和getElementById通过id获取元素的区别 <!DOCTYPE html> <html> <head> <meta cha ...

  5. form表单中id与name的区别

    以前经常写form表单时,不写id和name,总觉得没有什么用.后来一看后台套完的页面发现,他们都补上name,不知道所以然,就查了一下资料,吓我一跳,要是照我那样写根本不会有数据传到服务器.原来表单 ...

  6. ID和Name的区别

    HTML元素的ID和Name属性的区别一直认为ID和NAME是一样的,两个又可以一起出现,甚是疑惑.今天BAIDU了一下,才发现里面大有文章.发出来研究研究:最classical的答案:ID就像是一个 ...

  7. Spring中applicationContext.xml的bean里的id和name属性区别

    转自:http://www.cnblogs.com/ztf2008/archive/2009/02/11/1388003.html <beans><bean id="per ...

  8. meta name id class 标签的区别

    meta https://zhidao.baidu.com/question/2052283721385566387.html name 跟 id 的区别 http://blog.csdn.net/f ...

  9. css常用属性总结之 id和class的区别,使用类还是ID?

    前面两篇文章我们分别谈到了class和id的相关知识和如何使用,但是在实际项目中,我们该如何抉择,class还是id? 先回顾下两者的区别吧! 1.id具有唯一性,class具有普遍性,所以一个页面同 ...

随机推荐

  1. Echarts4+EchartsGL 3D迁徙图(附源码)

    最近遇到些Echarts迁徙图问题,在实现二维地图的迁徙图后开始开发3D迁徙图,在网上一查,发现3D版本迁徙图资料较少,自己研究并借鉴一些资料后写了一个小demo,希望能帮大家少走些弯路,共同学习. ...

  2. ci 框架中defined('BASEPATH') OR exit('No direct script access allowed');

    作用: OR 就是前面的是true时,就不走后面了. 加这个是为了防止不是从index.php访问到的控制器

  3. win10下EditPlus不能拖拽打开文件

    今天找到篇blog,终于把win10下EditPlus不能拖拽打开文件的问题解决了:) 记录下备忘.之前通过注册表的方式添加到右键菜单,当时设置了EditPlus以管理员身份运行: 解决办法=> ...

  4. 【JDBC】使用Spring提供的JDBCTemplate通过Statement向MySql数据库插入千万条数据,耗时4m55s,使用insert语句批量插入方式二

    这回依然是使用 insert批量插入这种方式 insert into emp(name,age,cdate) values ('A' , 20, '2019-10-13 00:00:00'), ('B ...

  5. 用PHP自带函数对二维数组进行排序

    经常会面临这样的需求,虽然有时候我们可以在数据库查询的时候,直接对数据进行排序,但还是无法满足日益复杂的业务需求. 这里边会用到两个函数 一个是array_column()函数,这个函数接受三个参数. ...

  6. 来自iSpy整理的最全海康大华IPC的RTSP连接地址

    来自iSpy整理的最全海康大华IPC的RTSP连接地址 先贴出处: 海康:http://www.ispyconnect.com/man.aspx?n=Hikvision 大华:http://www.i ...

  7. hive基础指令

  8. Django View视图

    视图view 一个视图函数(类),简称视图,是一个简单的Python 函数(类),它接受Web请求并且返回Web响应.响应可以是一张网页的HTML内容,一个重定向,一个404错误,一个XML文档,或者 ...

  9. SpringBoot: 3.SpringBoot整合filter(转)

    整合方式一:通过注解扫描完成 Filter 组件的注册 1.编写filter package com.bjsxt.filter; import javax.servlet.*; import java ...

  10. Python selenium自动化测试框架入门实战--登录测试案例

    本文为Python自动化测试框架基础入门篇,主要帮助会写基本selenium测试代码又没有规划的同仁.本文应用到POM模型.selenium.unittest框架.configparser配置文件.s ...