如何正确使用id和class？

　       我们知道，在html页面中，我们可以给元素的标签中设置id和class，以便于在css中设置样式（id选择符前面应该加前缀符号“#”，而class选择符前面应该加前缀符号“.”）、在JavaScript中设置行为使整个页面变得丰富多彩。但是，怎么正确使用id和class呢？

　　  第一：应当记住id（在英文中即Identity）即身份的意思，那么就像身份证号，它是唯一的，故在一个网页里id只能使用一次。而class是类的意思，那么也就是说类似的、相似的元素都可以用同一个类名，即类具有普遍性，它可以重复使用多次（甚至可以说没有限制）。

　　第二：我们认为id的优先级为100，而class的优先级为010，即id的优先级是高于class的。

　　第三：在布局思路上，一般坚持这样的原则：

　　　1.id用来实现宏伟布局和设计包含块，尽量在结构外围使用id，比如：logo、导航、主题内容、版权等，很据命名规范可以分别命名为#logo、#nav、#contenter、#copyright。

　　　2.class更多的被应用到文字板块和页面修饰等方面，尽量在结构内部使用。且最好将含有class属性的元素包含于含有id属性的元素之中，也就是说不要在含有class属性的元素内部包含含有id属性的元素（当然，特殊情况除外，具体问题具体分析），这样做的好处是有利于网站代码的后期维护与修改。

　　 第四：应当注意，对于一个元素根据需要我们可以同时命名class和id。比如

       <span id="container" class="color">some words</span>

除此之外，我们还可以给一个元素同时命名几个class，但是这几个类名应当被包含在同一个引号里，用空格分开。比如

        <span id="container" class="color size weight">some words</span>

　　　　第五：下面的名称在用作id名和class名时大家可以做一下参考：

(1)页面结构 

　　容器: container 

　　页头：header 

　　内容：content/container 

　　页面主体：main 

　　页尾：footer 

　　导航：nav 

　　侧栏：sidebar 

　　栏目：column

　　页面外围控制整体布局宽度：wrapper

　　左右中：left right center 

(2)导航

　　导航：nav 

　　主导航：mainbav 

　　子导航：subnav 

　　顶导航：topnav 

　　边导航：sidebar 

　　左导航：leftsidebar 

　　右导航：rightsidebar 

　　菜单：menu 

　　子菜单：submenu 

　　标题: title 

　　摘要: summary 

(3)功能 

　　标志：logo 

　　广告：banner 

　　登陆：login 

　　登录条：loginbar 

　　注册：regsiter 

　　搜索：search 

　　功能区：shop 

　　标题：title 

　　加入：joinus 

　　状态：status 

　　按钮：btn 

　　滚动：scroll 

　　标签页：tab 

　　文章列表：list 

　　提示信息：msg 

　　当前的: current 

　　小技巧：tips 

　　图标: icon 

　　注释：note 

　　指南：guild 

　　服务：service 

　　热点：hot 

　　新闻：news

　　下载：download 

　　投票：vote 

　　合作伙伴：partner 

　　友情链接：link 

　　版权：copyright

最后，以苏轼的诗句勉励自己。

　　　　　　莫听穿林打叶声，何妨吟啸且徐行，竹杖芒鞋轻胜马，谁怕？一蓑烟雨任平生。　　

html之区分id和class