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. spark安装(windows)

    1.安装jdk 因为spark是依赖java环境的,所以在安装spark之前你先确保你的电脑上有java环境. 具体怎么操作,百度"jdk安装" 2.安装spark 首先到官网下载 ...

  2. Sublime text3中文版 无法安装插件There are no packages available for installation问题的解决。

    说起来差点没被气死,我当时的情况已经是要疯了,连他们的域名都ping不通,我还想着,咋地,要倒闭了? 首选项->插件设置->Package Control->默认 里边的这个配置项  ...

  3. MySQL(逻辑分层,存储引擎,sql优化,索引优化以及底层实现(B+Tree))

    一 , 逻辑分层 连接层:连接与线程处理,这一层并不是MySQL独有,一般的基于C/S架构的都有类似组件,比如连接处理.授权认证.安全等. 服务层:包括缓存查询.解析器.优化器,这一部分是MySQL核 ...

  4. python之crawlscrapy爬取某集团招聘信息以及招聘详情

    针对这种招聘信息,使用crawlscrapy很适合. 1.settings.py # -*- coding: utf-8 -*- # Scrapy settings for gosuncn proje ...

  5. xcode 老项目library not found for -libstdc++.6.0.9

    Xcode升级到Xcode10.0后,由于去掉陈旧的libstdc++库替换为libc++,libc++相对是苹果最新版的C++库,经过优化并全面支持C++11 下载libstdc++库,链接: ht ...

  6. java高级之多线程

    1.1,多线程的作用: *线程是程序执行的一条路径, 一个进程中可以包含多条线程 *多线程并发执行可以提高程序的效率, 可以同时完成多项工作 1.2,多线程的应用场景: * 红蜘蛛同时共享屏幕给多个电 ...

  7. hive数据类型1

  8. mysql千万级数据表结构修改

    当需要对表进行ddl操作如加索引.增删列时,数据量小时直接在线修改表结构影响不大当表达到百万.千万数据就不能直接在线修改表结构 下面是具体的过程:1.备份数据select * from ih_orde ...

  9. SQL Server 新建 数据库关系图 时弹出警告提示此数据库没有有效所有者,因此无法安装数据库关系图支持对象。

    今天创建数据库关系图,发现提示此数据库没有有效所有者,因此无法安装数据库关系图支持对象.若要继续,请首先使用 数据库属性 对话框的文件页或 ALTER AUTHORIZAITION 语句将数据库所有者 ...

  10. Swift 3.0 闭包的定义和使用

    // // ViewController.swift // 闭包的定义和使用 // // Created by 思 彭 on 16/9/17. // Copyright © 2016年 思 彭. Al ...