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. 【MyBatis】实现in操作符在WHERE 子句中规定多个值

    Mapper.xml中写: <select id="selectIdsByDate" resultType="java.lang.Long"> se ...

  2. Android系统服务 —— WMS与AMS

    “可以毫不夸张的说,Android的framework层主要是由WMS.AMS还有View所构成,这三个模块穿插交互在整个framework中,掌握了它们之间的关系和每一个逻辑步骤,你对framewo ...

  3. instanceof 实现

    A instanceof B // 实现 instanceof function instance(a, b) { const proto = a.__proto__; // eslint-disab ...

  4. sqlserver创建链接服务器连接sqlserver脚本

    示例: EXEC sp_addlinkedserver @server='MyLinkServer', --链接服务器别名 @srvproduct='', @provider='SQLOLEDB', ...

  5. js的深拷贝的理解和实现

    一:什么是深拷贝? 举例:a=b,正常情况下当改变a时b也改变,当改变a时b第一层不改变copy就是浅拷贝,当改变a时b底基层都不会改变就是深拷贝 二:实现深拷贝 1.最简单方法就是使用JSON.st ...

  6. Android之外部存储(SD卡)

    *手机的外部存储空间,这个我们可以理解成电脑的外接移动硬盘,U盘也行.所有的Android设备都有两个文件存储区域:“内部”和“外部”存储器.这两个名称来自早期的Android,当时大多数设备都提供内 ...

  7. rally task配置文件

    rally task配置文件 Rally本身提供了一些task配置文件,用于提供测试用例中所需的信息包括场景测试中所传入的参数.运行方式是并行还是串行,context等信息.Rally本身提供的tas ...

  8. Linux 查看Tomcat版本信息

    Linux 查看Tomcat版本信息 如果我们想运行在 Linux 下的 Tomcat 版本信息,只需要在 Tomcat 的 bin/ 目录下,运行 version.sh 脚本即可. 1.使用如下命令 ...

  9. mysql 严重锁表解决方案

    转自 http://blog.csdn.net/miltonzhong/article/details/20562587 http://wangwei3.iteye.com/blog/784435

  10. js-jsTree

    依赖:jquery.jsjstree.js//cdnjs.cloudflare.com/ajax/libs/jstree/3.3.3/themes/default/style.min.css 备注:绑 ...