【html/css】html/css命名规范

　　无论做什么，规则总是最重要的。无规矩不成方圆，有了规矩，我们才能有规可循，有则可依，人与人之间才能正常的交流交往。

　　人人都有自己的命名习惯，不过，代码是需要交流的，当有些命名习惯仅只自己能看懂，甚至自己在过后都看不懂时，就成为了交流中的障碍了。所以，有一个规范的命名规则是很重要的。命名规则有很多，大家各取所需，这里介绍一下在html/css中一些约定俗成的命名规范，权作记录：

　　1、所有的命名最好都小写

　　2、属性的值一定要用双引号("")括起来，且一定要有值如class="divcss5",id="divcss5"

　　3、每个标签都要有开始和结束，且要有正确的层次，排版有规律工整

　　4、空元素要有结束的tag或于开始的tag后加上"/"

　　5、表现与结构完全分离，代码中不涉及任何的表现元素，如style、font、bgColor、border等

　　6、<h1>到<h5>的定义，应遵循从大到小的原则，体现文档的结构，并有利于搜索引擎的查询。

　　7、给每一个表格和表单加上一个唯一的、结构标记id

　　8、给图片加上alt标签

　　9、尽量使用英文命名原则

　　10、尽量不缩写，除非一看就明白的单词

---

　　CSS命名规则：

　　　　头：header　　　　　　　　　　　　　　　　内容：content/containe

　　　　尾：footer　　　　　　 　　　　　　　　　　导航：nav

　　　　侧栏：sidebar　　　　  　　　　　　　　　　栏目：column

　　　　页面外围控制整体布局宽度：wrapper　　　　左右中：left right center

　　　　登录条：loginbar　　   　　　　　　　　　　标志：logo

　　　　广告：banner　　　　 　　　　　　 　　　　页面主体：main

　　　　热点：hot　　　　　　 　　　　　　　　　　新闻：news

　　　　下载：download　　　 　　　　　　　　　　子导航：subnav

　　　　菜单：menu　　　　　　　　　　　　　　　子菜单：submenu

　　　　搜索：search　　　　  　　　　　　　　　　友情链接：friendlink

　　　　页脚：footer　　　　   　　　　　　　　　　版权：copyright

　　　　滚动：scroll　　　　　 　　　　　　　　　　内容：content

　　　　标签页：tab　　　　　　　　　　　　　　　文章列表：list

　　　　提示信息：msg　　　 　　　　　　　　　　小技巧：tips

　　　　栏目标题：title　　　  　　　　　　　　　　加入：joinus

　　　　指南：guild　　　　   　　　　　　　　　　服务：service

　　　　注册：regsiter　　　 　　　　　　　　　　状态：status

　　　　投票：vote　　　　　　　　　　　　　　　合作伙伴：partner

---

　　HTML标签 id的命名规范：

　　　　(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

---

　　样式文件命名：

　　　　主要的:master.css

　　　　布局版面:layout.css

　　　　专栏:columns.css

　　　　文字:font.css

　　　　打印样式:print.css

　　　　主题:themes.css