编码规范:http://www.css88.com/doc/codeguide/
## 一、语义化
语义化优点：提升可读性便于后期阅读维护，提升搜索引擎SEO优化。
### 1、标签语义化
标题（H1~H6）、列表（li）、段落（p）、文字（span）、表头（thead）、表体（tbody）等等
### 2、css类名语义化
头部（header）、主体（container）、底部（footer）、侧边栏（sidebar）、广告条（banner）等等
~~~
<div class="module-header"></div>
<div class="module-container"></div>
<div class="module-footer"></div>
~~~
## 二、命名规范
### 1、css的class命名
多单词时通常用“-”隔开，如：.note-container、.note-panel、.note-panel-title等
### 2、css的id命名
多单词时通常驼峰形式，如#userName、#consNo等
### 3、单词命名
在命名class、id、js变量名等尽量要与当前含义一致的英文单词，如果英语不好的话可通过在线翻译网站查询那就的英文。
**推荐：** 快来查查大神们是怎么命名自己的变量的https://unbug.github.io/codelf
可筛选不同语言的变量名称、可安装成浏览器或IDE的插件实现快速变量翻译https://github.com/unbug/codelf/wiki
## 三、html声明规范
1. 以`<!DOCTYPE html>` 开始，不区分大小写，前面不要有任何内容。否则IE将以**杂项的文档模式**解析html.
2. `<meta charset="utf-8">`声明文档使用的字符编码。如果是jsp则每个jsp文件顶部都是引用
~~~
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
~~~
3、优先使用 IE 最新版本或 IE里的Google Chrome Frame插件
~~~
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
~~~
4、双核浏览器(如360)使用优先使用Chrome
~~~
<meta name="renderer" content="webkit">
~~~
## 四、数据绑定规范
### 1、不规范用法一
~~~
<a href="javascript:query('userName','1234');">查询</a>
或
<a href="javascript:void(0);" onclick="query('userName','1234')">查询</a>
<script>
window.query(userName,userNo) = function(){
alert(userName+userNo);
}
</script>
~~~
**说明:** 由于在加载慢等情况下，html已加载完成，而js里的query函数还没执行到，此时点击查询按钮则出现query函数未定义的错误。
### 2、不规范用法二
~~~
<a href="javascript:void(0);" userName='用户名' userNo='1234' id="queryBtn">查询</a>
或
<a href="#" vaule='userName-1234' id="queryBtn">查询</a>
<script>
$(function(){
$("#queryBtn").click(function(){
var userName=$(this).attr('userName');
var userNo= $(this).attr('userNo');
或
var userName=$(this).attr('vaule').split('-')[0];
});
})
</script>
~~~
**说明:** 给标签加自定义属性在低版本IE会报错，把若干个值用‘-’隔开放在value里再split用法不够清晰也不易维护。
###3、正确用法
~~~
<a href="javascript:void(0);" data-userName='userName' data-userNo='1234' id="queryBtn">查询</a>
<script>
$(function(){
$("#queryBtn").click(function(){
var userName=$(this).data('userName');
var userNo=$(this).data('userNo');
return false;//阻止事件冒泡
});
})
</script>
~~~
**说明:** data-属性 允许我们在DOM元素上绑定任意类型的数据,避免了循环引用的内存泄漏风险。提升了读取速度，降低操作过程的内存开销。
