HTML 中 id、name、class 区别

2024-05-09 13:38:41

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

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

3. class ：指定标签的类名

1. name

指定标签的名称。在当前page页面中并非唯一性。

一个name可以同时对应多个控件，比如checkbox和radio
而id必须是全文档中唯一的.

格式:<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 &lt; txts.length; i++) { //循环遍历标签，并把背景色改为redtxts[i].style.backgroundColor = 'red';}
}

2.class

class是设置标签的类，用于指定元素属于何种样式的类。在CSS样式中以小写的“点”及“.”来命名，在html页面里则以class="css5" 来选择调用，命名好的CSS又叫css选择器。
如： .css5{属性：属性值;}

选择器在html调用为:

.baoba{ color: lime; background: #ff80c0 }

使用方法：class="baobao"

3.id

id是设置标签的标识。用于定义一个元素的独特的样式。在CSS样式定义的时候以“#”来开头命名id名称
如一个CSS规则：
#binbin{ font-size: larger }
使用方法：id="binbin"
id是一个标签，用于区分不同的结构和内容，就象你的名字，如果一个屋子有2个人同名，就会出现混淆；

转载于:https://www.cnblogs.com/MacleLiang/p/5262723.html

HTML 中 id、name、class 区别相关推荐

HTML中id、name、class 区别
HTML 中 id与name 区别一个name可以同时对应多个控件,比如checkbox和radio 而id必须是全文档中唯一的 id的用途 1) id是HTML元素的Identity,主要是在客 ...
HTML5中id、name、class 区别
转载地址:http://www.2cto.com/kf/201210/161751.html 网上找不到专门针对html5的,只能找到以前HTML的.看了一下,它们差不多,尤其是本文后面专门讲的区别讲 ...
html代码id,浅谈html中id和name的区别实例代码
浅谈html中id和name的区别实例代码更新时间:2008年07月28日 23:00:55 作者: 这个是form里面的name与id的区别我们可以通过一段代码来分析一下其中的微妙差别: 在 ...
spring配置中id和name属性的区别
可能大家在网上都应该搜索过在 Spring 配置中 id 和 name 属性的区别,可能你会搜索到有一大堆的区别,不过在我这里可能不一样了. 我这里 Spring 的版本为 3.2.4,区别不是很大, ...
软件android_id,Android中@id和@+id及@android:id的区别介绍
前言昨天突然有新来的同事问我这个@id 和@+id 的区别 ,为什么我们的项目都是@id 自己新增的ui 使用的@+id 这里说下我的简单的回复项目是维护的之前的是为了统一管理使用了@id 方便 ...
mybatis与php,浅谈mybatis中的#和$的区别
浅谈mybatis中的#和$的区别发布于 2016-07-30 11:14:47 | 236 次阅读 | 评论: 0 | 来源: 网友投递 MyBatis 基于Java的持久层框架MyBatis 本 ...
关于EF中ApplyCurrentValues和ApplyOriginalValues区别
关于EF中ApplyCurrentValues和ApplyOriginalValues区别:两者都是编辑数据时使用. // // 摘要: // 将 System ...
android r类作用,Android 主项目和 Module 中 R 类的区别
Android 主项目和 Module 中 R 类的区别我们知道 Android 项目中会通过自动生成一个 R.java 类的方式来保存项目中所有资源文件的标识在主项目中生成的 R.java 中的资 ...
jQuery中position()与offset()区别
转载自 jQuery中position()与offset()区别 position()获取相对于它最近的具有相对位置(position:relative或position:absolute)的父级元 ...
html:(27):类和ID选择器的区别和子选择器
类和ID选择器的区别学习了类选择器和ID选择器,我们会发现他们之间有很多的相似处,是不是两者可以通用呢?我们不要着急先来总结一下他们的相同点和不同点: 相同点:可以应用于任何元素不同点: 1.ID ...

最新文章

热门文章