本人对网页中经常使用的 CLASS ID NAME 进行一个小小的阐述.
先引用一个文本
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html lang="gb2312" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> New Document </title>
<style type="text/css" media=screen>
/*用id定义的，需要定义5个*/
#menu{
margin: 0;
padding: 0;
width: 120px;
}
#menu ul {
margin: 0
}
#menu li {
display: block; /*另起一行*/
padding: 4px
margin: 0
line-height: 20px; /*表格内行高*/
font-size: 12px;
width: 100px;
text-align: center;
margin-left: auto; /*设置对象四边的外延边距*/
float: left; /*浮动在页面左边*/
}
#menu li a {
width:100%;
display:block;
color: #000;
border:1px solid #000;
background:#fff;
padding:0.3em 0 0.2em 0;
text-decoration: none; /*对文本的修饰*/
}
#menu li a:hover {
color:#fff;
background:#ccc;
border-left: 10px solid #000;
}
/*用class定义的，只需要定义3个*/
.navbar {
display: block; /*另起一行*/
padding: 4px
margin: 0
line-height: 20px; /*表格内行高*/
font-size: 12px;
width: 100px;
text-align: center;
margin-left: auto; /*设置对象四边的外延边距*/
float: left; /*浮动在页面左边*/
}
.navbar a{
margin-top:4px;
margin-bottom:4px;
width:100%;
display:block;
color: #000;
border:1px solid #000;
background:#fff;
padding:0.3em 0 0.2em 0;
text-decoration: none; /*对文本的修饰*/
}
.navbar a:hover{
color:#fff;
background:#ccc;
border-left: 10px solid #000;
}
</style>
</head>
<body>
<div id="menu">
<ul>
<li><a title="标准化网站" href="#">网站标准化</a></li>
<li><a title="标准化网站" href="#">网站标准化</a></li>
<li><a title="标准化网站" href="#">网站标准化</a></li>
<li><a title="标准化网站" href="#">网站标准化</a></li>
<li><a title="标准化网站" href="#">网站标准化</a></li>
</ul>
</div>
<p />
<div class="navbar">
<a title="标准化网站" href="#">网站标准化</a>
<a title="标准化网站" href="#">网站标准化</a>
<a title="标准化网站" href="#">网站标准化</a>
<a title="标准化网站" href="#">网站标准化</a>
<a title="标准化网站" href="#">网站标准化</a>
</div>
</body>
</html>
请粘贴运行一下吧.
ID 是在页面中是唯一性 (当然你要重复在代码中出现,页面也能显示,不象程序设计语言哪样编译不通过,不过这样做也失去了用ID的作用,不用直接用class),ID 可以控制一下个性化样式,最主要是在脚本中保持唯一性的调用.
比如 :动态改变.
<html>
<head></head>
<body>
<div id=aa onclick="alert(aa.innerText);">aaaaaaaaaaaaa</div>
</bodY>
</htm>
以上正常,
如果换成
<html>
<head></head>
<body>
<div id=aa onclick="alert(aa.innerText);">aaaaaaaaaaaaa</div>
<div id=aa >
<span style="color:red">test1</span> test2
</div>
</bodY>
</htm>
就不能正常执行了.
class 是 也是针对标签的属性设置,但可以对多个.
clas是用来根据用户定义的标准对一个或多个元素进行定义的。
暂且引用一下别人的理解:
纳成一句话就是：Class可以反复使用而ID在一个页面中仅能被使用一次。有可能在很大部分浏览器中反复使用同一个ID不会出现问题，但在标准上这绝对是错误的使用，而且很可能导致某些浏览器的现实问题。
在实际应用的时候，Class可能对文字的排版等比较有用，而ID则对宏观布局和设计放置各种元素较有用
我觉得不太全面.
id 主要在javascript 中唯一标识并调用.
用class只是用来布局与统一美化.
name 与 ID
id是标识对象的，name是对象的名字
可以这么理解，post只认name，js认id和name。
name一般所有都认同，而id有的不认它，必然要name才行。为了兼容所有浏览器,全部写上
以下引用的剖析:
可以说几乎每个做过Web开发的人都问过，到底元素的ID和Name有什么区别阿？为什么有了ID还要有Name呢?! 而同样我们也可以得到最classical的答案：ID就像是一个人的身份证号码，而Name就像是他的名字，ID显然是唯一的，而Name是可以重复的。
上周我也遇到了ID和Name的问题，在页面里输入了一个input type="hidden"，只写了一个ID='SliceInfo'，赋值后submit，在后台用Request.Params["SliceInfo"]却怎么也去不到值。后来恍然大悟因该用Name来标示，于是在input里加了个Name='SliceInfo'，就一切ok了。
第一段里对于ID和Name的解答说的太笼统了，当然那个解释对于ID来说是完全对的，它就是Client端HTML元素的Identity。而Name其实要复杂的多，因为Name有很多种的用途，所以它并不能完全由ID来代替，从而将其取消掉。具体用途有：
用途1: 作为可与服务器交互数据的HTML元素的服务器端的标示，比如input、select、textarea、和button等。我们可以在服务器端根据其Name通过Request.Params取得元素提交的值。
用途2: HTML元素Input type='radio'分组，我们知道radio button控件在同一个分组类，check操作是mutex的，同一时间只能选中一个radio，这个分组就是根据相同的Name属性来实现的。
用途3: 建立页面中的锚点，我们知道<a href="URL">link</a>是获得一个页面超级链接，如果不用href属性，而改用Name，如：<a name="PageBottom"></a>，我们就获得了一个页面锚点。
用途4: 作为对象的Identity，如Applet、Object、Embed等元素。比如在Applet对象实例中，我们将使用其Name来引用该对象。
用途5: 在IMG元素和MAP元素之间关联的时候，如果要定义IMG的热点区域，需要使用其属性usemap，使usemap="#name"(被关联的MAP元素的Name)。
用途6: 某些特定元素的属性，如attribute，meta和param。例如为Object定义参数<PARAM NAME = "appletParameter" VALUE = "value">或Meta中<META NAME = "Author" CONTENT = "Dave Raggett">。
显然这些用途都不是能简单的使用ID来代替掉的，所以HTML元素的ID和Name的却别并不是身份证号码和姓名这样的区别，它们更本就是不同作用的东西。
当然HTML元素的Name属性在页面中也可以起那么一点ID的作用，因为在DHTML对象树中，我们可以使用document.getElementsByName来获取一个包含页面中所有指定Name元素的对象数组。Name属性还有一个问题，当我们动态创建可包含Name属性的元素时，不能简单的使用赋值element.name = "..."来添加其Name，而必须在创建Element时，使用document.createElement('<element name = "myName"></element>')为元素添加Name属性。这是什么意思啊？看下面的例子就明白了。
<script language="JavaScript">
var input = document.createElement('INPUT');
input.id = 'myId';
input.name = 'myName';
alert(input.outerHTML);
</script>
消息框里显示的结果是：<INPUT id=myId>。
<script language="JavaScript">
var input = document.createElement('<INPUT name="myName">');
input.id = 'myId';
alert(input.outerHTML);
</script>
消息框里显示的结果是：<INPUT id=myId name=myName>。
初始化Name属性的这个设计不是IE的缺陷，因为MSDN里说了要这么做的，可是这样设计的原理什么呢？我暂时没有想太明白。
这里再顺便说一下，要是页面中有n(n>1)个HTML元素的ID都相同了怎么办？在DHTML对象中怎么引用他们呢？如果我们使用ASPX页面，这样的情况是不容易发生的，因为aspnet进程在处理aspx页面时根本就不允许有ID非唯一，这是页面会被抛出异常而不能被正常的render。要是不是动态页面，我们硬要让ID重复那IE怎么搞呢？这个时候我们还是可以继续使用document.getElementById获取对象，只不过我们只能获取ID重复的那些对象中在HTML Render时第一个出现的对象。而这时重复的ID会在引用时自动变成一个数组，ID重复的元素按Render的顺序依次存在于数组中。(http://www.dvbbs.net/tech/html/2006051772877.asp)
