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. MySQL优化相关参数--先做个记录,以后可能用得到

    innodb_io_capacity:可设置的磁盘IO性能参数,越高代表当前mysql的IO性能更好,可用做决策刷脏页速度的参数: innodb_flush_neighbors:刷脏页是否开启连坐机制 ...

  2. Nginx之最简单的反向代理机制分析

    注:当前分析基于 Nginx之搭建反向代理实现tomcat分布式集群 的配置. 1. 用到的指令 下面介绍在上面的配置中用到的指令. upstream 指令 语法:upstream name { .. ...

  3. python操作Elasticsearch (一、例子)

    E lasticsearch是一款分布式搜索引擎,支持在大数据环境中进行实时数据分析.它基于Apache Lucene文本搜索引擎,内部功能通过ReST API暴露给外部.除了通过HTTP直接访问El ...

  4. MySQL Cluster 集群部署

    前言 此篇博客用以介绍 MySQL Cluster 集群部署方法 一.节点规划 序号 IP地址 节点名称 1 172.16.1.201 mysql-manage 2 172.16.1.202 mysq ...

  5. LC 979. Distribute Coins in Binary Tree

    Given the root of a binary tree with N nodes, each node in the tree has node.val coins, and there ar ...

  6. nodejs获取常见疾病数据示例

    日常生活中有一些常见的疾病,这个可以通过百度等搜索到,但是如果你要完成一款app或者小程序.网站之类的该如何来获取常见疾病的信息呢?首先想到的是通过爬虫爬取数据,然后整理搜索....其实这种方法还是太 ...

  7. 小D课堂 - 新版本微服务springcloud+Docker教程_5-08 断路器监控仪表参数

    笔记 8.断路器监控仪表参数讲解和模拟熔断     简介:讲解 断路器监控仪表盘参数和模拟熔断 1.sse  server-send-event推送到前端 资料:https://github.com/ ...

  8. kubernetes介绍(1)

    一.Kubernetes 介绍: kubernetes起源 Kubernetes (K8s) 是 Google 在 2014 年发布的一个开源项目. 据说 Google 的数据中心里运行着超过 20 ...

  9. 【转】ffluos编译

    FluffOS是在MUDOS基础上更新完成的.进行了许多新功能和bug修复. 针对LPC有很好的兼容性,如果你的MUD运行MUDOS V22+版本,可以很容易运行在fluffos上. 系统环境: Cn ...

  10. Java中验证编码格式的一种方法

    package forlittlecatty; import java.io.File; import java.io.FileInputStream; import java.io.IOExcept ...