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. 【零基础】Selenium:Webdriver图文入门教程java篇(附相关包下载)

    一.selenium2.0简述 与一般的浏览器测试框架(爬虫框架)不同,Selenium2.0实际上由两个部分组成Selenium+webdriver,Selenium负责用户指令的解释(code), ...

  2. DDCTF-2018-writeup(5misc)

    打了好几天最后也只是80多名,我好菜啊.jpg 0x00  (╯°□°)╯︵ ┻━┻ 题目: (╯°□°)╯︵ ┻━┻ d4e8e1f4a0f7e1f3a0e6e1f3f4a1a0d4e8e5a0e6 ...

  3. nginx 的使用

    nginx 反向代理,并拥有其高效的性能,并发效果好,是解决跨域最好的选择 nginx 的使用 1. 下载:在官网上下载 window 系统的 nginx 网址:http://nginx.org/en ...

  4. 机器学习 - 案例 - 样本不均衡数据分析 - 信用卡诈骗 ( 标准化处理, 数据不均处理, 交叉验证, 评估, Recall值, 混淆矩阵, 阈值 )

    案例背景 银行评判用户的信用考量规避信用卡诈骗 ▒ 数据 数据共有 31 个特征, 为了安全起见数据已经向了模糊化处理无法读出真实信息目标 其中数据中的 class 特征标识为是否正常用户 (0 代表 ...

  5. 小D课堂 - 新版本微服务springcloud+Docker教程_3-07 Eureka服务注册中心配置控制台问题处理

    笔记 7.Eureka服务注册中心配置控制台问题处理     简介:讲解服务注册中心管理后台,(后续还会细讲) 问题:eureka管理后台出现一串红色字体:是警告,说明有服务上线率低 EMERGENC ...

  6. docker网络(3)

    docker网络介绍 大量的互联网应用服务需要多个服务组件,这往往需要多个容器之间通过网络通信进行相互配合. docker 网络从覆盖范围可分为单个 host 上的容器网络和跨多个 host 的网络. ...

  7. Java 泛型,你了解类型擦除吗?

    泛型,一个孤独的守门者. 大家可能会有疑问,我为什么叫做泛型是一个守门者.这其实是我个人的看法而已,我的意思是说泛型没有其看起来那么深不可测,它并不神秘与神奇.泛型是 Java 中一个很小巧的概念,但 ...

  8. 【数学建模】线性规划各种问题的Python调包方法

    关键词:Python.调包.线性规划.指派问题.运输问题.pulp.混合整数线性规划(MILP) 注:此文章是线性规划的调包实现,具体步骤原理请搜索具体解法.   本文章的各个问题可能会采用多种调用方 ...

  9. TTL 传输中过期,内部网络环路

    ping目标地址的时候,如果不是显示超时,而是很快出现TTL 传输中过期,很可能情况是内部网络出现环路 tracert一下目标地址,如果路由不断重复,说明是环路

  10. mysql安装报vcruntime140.dll缺失

    mysql安装报:vcruntime140.dll缺失 安装:Visual C++ Redistributable for Visual Studio 2015 可以解决此问题