Html中class,id,name的区别-CSDN博客

一  表格中name、id、class的区别
　　在一个页面中，有许多的控件(元素或标签)。为了更方便的操作这些标签，就需要给这些标签标识一个身份牌。

1   name
    指定标签的名称。

1.1 格式
    <input type="text" name="username" />

1.2 应用场景
(1) form表单：name可作为转递给服务器表单列表的变量名；如上面的传到服务器的名称为：username='text的值'。

(2) input type='radio'单选标签：把几个单选标签的 name设为一个相同值时，将会进行单选操作。

    <input type="radio" name='sex'/>男
    <input type="radio" name='sex'/>女
    
(3) 快速获取一组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 应用场景

(1) 根据提供的唯一id号，快速获取标签对象。如：document.getElementById(id)

(2) 用于充当label标签for属性的值：示例：<label for='userid'>用户名：</label>，表示单击此label标签时，id为userid的标签获得焦点。

2.3 特性
    id属性的值，在当前的page页面要是唯一的。

 
3.  class
    指定标签的类名。

3.1 格式
    <input type=button class="btnsubmit" />

3.2 应用场景
(1) CSS操作，把一些特定样式放到一个class类中，需要此样式的标签，可以在添加此类。

3.3 特性
    可以把多个类，放在一个class属性里，但必须用空格隔开；如：class='btnsubmit btnopen'


二  HTML中class和id的区别
    在HTML中，当在一个文档里面我们要对多个标签使用同一个样式的时候可以使用class或者id，
    当然一般不推荐为了使用样式而为标签添加id；使用javaScript可以获取class和id属性，从而对标签添加特定的行为。


1   元素唯一的ID：
    在元素的开始标签中输入id名，格式 id="name"
    name是id的名称，自定义，这个id是唯一识别元素的名称，name不能有数字或者空格。
    建议是id用来作为当前文档的链接，在文档中进行跳转的时候使用，HTML 文档中的每个 id 都必须是唯 一的。
    一个页面里不能出现两个具有相同 id 的元素，并且每个元素都只能有一个id。
    相同的id可以出现在不同的页面里， 同一 id也不一定每次都赋给同一元素，尽管这是惯常的做法。

    例：

    <div id="first">
     ....
    </div>

2   元素的类别：
    在元素开始标签里添加，格式class="name"
    class并不是唯一的，可以在头部元素里style标签中定义，这样可以让class在多个标签中使用。
    如果要指定多个类别那就将类别名字之间用空格分开，格式class="first second"，类别名可以两个以上。
    class尽量用来添加样式，一个 class 名称可以分配给页 面中任意数量的元素，并且一个元素可以有 一个以上的 class。

    在标签中添加class

    例：

    <div class="first">
     ....
    </div>

 
    任何HTML标签可以同时用一个id和若干个class。
    id和class名称最好是有意义的，遵循一定的规范规律，方便识别。然后就是名称中每个单词之间用短横线 “-” 隔开。
    建议是class和id统一定义在头元素中会更好。


三  CSS中ID与CLASS的区别

1   定义区别

    id：用来定义页面中大的样式，如栏目划分，顶部，正文，底部等；用#top的形式来定义.

    class：用来定义一些比较细节的样式，如具体的一个菜单，一行文字等，用.text的形式来定义。
    
    定义HTML中的标签，如ul,img,p等时，直接写：img{}

 
2   写法区别:

    #main 定义的是ID为"main"这个元素的样式
    .main 的意思是新建一个名为"main"的样式
    #main 只能定义ID为"main"这个元素的样式
    .main 一但定义以后,可以让其他的元素来调用,方法为class="main"

3   用法区别

    用#定义CSS样式，在调用时必须用ID，
    用.定义CSS样式，在调用时必须用CLASS。
    用#定义的样式，一般都是定义结构框架，一些大的容器,且在同一个页面只能出现一次。
    而.定义的样式，一般都是起修饰作用或多次重复的样式。
    还一点就是在同一个层里同时出现ID和CLASS样式，ID更优先于CLASS。

    Class是用来根据用户定义的标准对一个或多个元素进行定义的。
    打个比较恰当的比方就是剧本：一个Class可以定义剧本中每个人物的故事线，你可以通过CSS，javascript等来使用这个类。
    因此你可以在一个页面上使用class="Frodo" ，class="Gandalf"， class="Aragorn"来区分不同的故事线。
    还有一点非常重要的是你可以在一个文档中使用任意次数的Class。

    ID通常用于定义页面上一个仅出现一次的标记。
    在对页面排版进行结构化布局时（比如说通常一个页面都是由一个页眉，一个报头< masthead>，一个内容区域和一个页脚等组成），
    一般使用ID比较理想，因为一个ID在一个文档中只能被使用一次。而这些元素在同一页面中很少会出现大于一次的情况。

4   语义区别

    class是样式组，用.style定义，class="style"： 
    .style定义样式组，可以被反复调用，就是说你一个页面里，可以有多个元素用同一个style。 

    ID是固定标签，用#style1定义，ID="style1" 
    #style1定义固定标签，用于定义一个特定的元素，每个页面只能出现一次，不能反复调用。
    虽然现在有的网页多次调用#style1，但那是不规范的，在某些浏览器中也会无法解读造成页面出错。

5   用处区别
 
    class可以在页面里面重复使用，id由于在页面里面只能出现一次，不能重复使用，所以尽量用class来写，这样能在页面里面重复引用你写的css，减小工作量和代码量。

    这种情况尽量用id：页面大的模块里面，用id来区分不同的模块。比如页面里面有这样的模块：最新新闻，推荐新闻等。就可以考虑用id来区分。

    还有一点，由于id是页面中唯一的，更多的是定义来留给给页面里面的 javascript用。

6   代码区别

    class和id代码：

    class：

    <style type="text/css">

        .footer{background:red;}

    </style>

    <div class="footer">footer</div>

    id：

    <style type="text/css">

        #footer{background:red;}

    </style>

    <div id="footer">footer</div>

    定义class的css是用点：“.”，如.footer

    定义id的css是用井号“#”，如#footer