关于HTML和CSS中的命名

        今天，我来给大家讲讲关于网站搭建过程中的一些命名规则。也许有些人会觉得，只要我能实现给定网站的效果就可以了，为何还要在命名上去深究。但实际在网站开发中，如何命名却是比较重要的一个部分。它不仅能够简单快捷的将元素调整为你所想要的样式，而且能有利于网站后期的维护和修改，更有些时候能够方便程序和其他设备理解有意义的标记（也称语义标记）。例如。搜索引擎可以识别出标题（因为它被包含在h1标签之中）。

一、为元素命名

1.在分配ID和类名时，一定要尽可能保持名称与表现方式无关。例如，你想给表单上所有通知消息显示为红色，所以给它们命名为red，无可非议，这种方法是完全可以的。但是，临到突然决定要将所有通知消息显示为黄色，那么这个时候就会出现两种选择：
（1）将所有类名为red的颜色修改为color:yellow，但是这样不利于网站后期的一些维护和修改；
（2）不仅在样式上做颜色的修改，并且把所有的类名替换掉。这无疑比上一种方法好，但是，这样做未免太过于麻烦，尤其是当含有通知消息的页面特别多的时候。

2.因此，我们应该根据“它们是什么”来命名，而不是根据“它们的外观如何来命名”，这样会让代码更有意义。上个例子中，我们完全可以将类名换成.warning。

3.在写类名和ID名时，是区分大小写的。在一般情况下，为了方便记忆和优化，最好使用同一的命名约定：采用小写字母，多个单词之间用分隔符进行分隔。例如：.left_info。

二、ID还是类

在讲解该使用ID还是类的时候，我们先来了解一下ID和类的一些特性。
1.ID是唯一的，在一个页面中，ID不可重复。对于同一个元素，ID的优先级高于class的优先级。

2.class不是唯一的，一个页面中可以出现多个相同的class。

3.ID用于表示页面上的特定元素（比如站点导航），而且必须是唯一的。ID也可以用来标识持久的结构性元素，例如主导航和内容区域。在一般的开发中，只有在目标元素非常独特，保证绝会不在网站其他地方使用这个名称时，才会使用ID。换句话说，只有在绝对确定这个元素值会出现一次的情况下，才可以使用ID,比如使用ID标识一次性元素：某个链接或表单元素。

三、DIV

1.大多数人误认为div元素没有语义，网站开发中，人们会过多的使用div元素。但是，div实际上代表部分(division)，它可以将文档分割成为几个有意义的区域。所以通过将主要的内容区域包含在div中并分配content,就可以在文档中添加结构和意义。

2.为了将不必要的标记减到最小，应该只在没有现有元素能够实现区域分割的情况下使用div元素。例如，如果主导航使用列表，就不需要将它包含在div中：

   <div class="nav">        <ul>            <li><a href="home.html">Home</a></li>            <li><a href="about.html">About Us</a></li>            <li><a href="contact.html">Contact</a></li>        </ul>    </div>

可以完全删除div，直接在列表上应用类：

       <ul class="nav">            <li><a href="home.html">Home</a></li>            <li><a href="about.html">About Us</a></li>            <li><a href="contact.html">Contact</a></li>        </ul>

四、微格式

1.由于HTML中缺少响应的元素，很难突出显示人、地点或日期等类型的信息。为了解决这个问题，有一组开发人员局认定开发一套标准的命名约定和标记模式来表示这些数据。这些命名约定基于vCard和iCalendar等现有的数据格式，现在称为微格式。例如：

<div class="vCard">   <p>    <a class="url fn" href="http://www.baidu.com">百度</a>    <a class="email"  href="mailto:[e-mail]"></a>   </p>   <p>     <span class="locality">江苏</span>     <span class="country_name">中国</span>   </p></div>

        微格式让我们可以使用一种特定的昂视标记数据，让其他程序和服务可以访问它。一些人编写了一些脚本，可以提取出以hCalenar格式标记得事件信息，并把它直接导入日历应用程序。还有一些人编写了一些插件，让Firefox可以提取出以hCard格式标记得联系信息，并通过蓝牙发送到手机上。

2.当前有9个正式的微格式，还有14个格式草案。包括：
（1）用于日期、日历和事件的hCalendar
（2）用于人和组织的hCard
（3）用于人之间关系的XFN
（4）用于产品说明的hProduct
（5）用于原来哦和烹调步骤的hRecipe
（6）用于产品和事件审查的hReview
（7）用于博客帖子等片段式内容的hAthon

3.许多大型网站已经支持使用微格式了，例如，Google Maps在地图搜索结果中使用hCard格式标记地址信息等。想具体了解更多的微格式可以在http://microformats.org查阅正是规范。

五、常用命名

(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