HTML name、id、class 的区别

HTML name、id、class 的区别 - polk6 - 博客园  http://www.cnblogs.com/polk6/archive/2013/05/28/3101571.html

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="webdevroad" src="http://www.cnblogs.com/polk6/archive/2013/05/10/3071327.html" width="0" height="1" style="box-sizing: border-box;">本篇文章：1.4 HTML name、id、class 的区别

Web开发之路系列文章

1.HTML

　　1.1 HTML页面源代码布局介绍

　　1.2 HTML基础控件介绍

　　1.3 iframe 和 frameset 的区别

　　1.4 name、id、class 的区别

　　1.5 table、form表单标签的介绍以及get和post提交方式

　　1.6 HTML kbd键盘元素

2.CSS 层叠样式表

　　2.1 CSS 选择器及各样式引用方式

　　2.2 CSS HTML元素布局及Display属性

　　2.3 CSS Float 浮动属性

　　2.4 CSS Position 定位属性

3.JavaScript介绍

　　3.1 JavaScript var关键字、变量的状态、异常处理、命名规范等介绍

　　3.2 JavaScript function函数种类

　　3.3 JavaScript Array对象

　　3.4 JavaScript Date对象

　　3.5 JavaScript Math和Number对象

　　3.6 JavaScript String对象

　　3.7 JavaScript Object对象

　　3.8 JavaScript 自定义对象

　　3.9 JavaScript 对象属性介绍

　　3.10 JavaScript 开发规范

4.BOM

　　4.1 HTML BOM Browser对象

　　4.2 HTML 获取屏幕、浏览器、页面的高度宽度

5.DOM

　　5.1 HTML DOM 介绍

　　5.2 HTML DOM 对象

　　5.3 HTML 事件(一) 事件的介绍

　　5.4 HTML 事件(二) 事件的注册与注销

　　5.5 HTML 事件(三) 事件流与事件委托

　　5.6 HTML 事件(四) 模拟事件操作

6.HTML5

　　6.1 HTML5 介绍

 　  6.2 HTML5 语义元素(一)页面结构

 　  6.3 HTML5 语义元素(二)文本内容

　　6.4 HTML5 input元素新的特性

　　6.5 HTML5 progress和meter控件 

　　6.6 HTML5 sessionStorage会话存储

　　6.7 HTML5 localStorage本地存储 

7.ExtJS 4.2

　　7.1 ExtJS 4.2 介绍

　　7.2 ExtJS 4.2 第一个程序

　　7.3 ExtJS 4.2 组件介绍

　　7.4 ExtJS 4.2 组件的查找方式

 

只是记录了自己在学习、使用Web前端内容时的心得和碰到的问题。

参考文献：

1）http://www.w3school.com.cn/

2）《JavaScript权威指南(第六版)》