編碼規范: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元素上綁定任意類型的數據,避免了循環引用的內存泄漏風險。提升了讀取速度，降低操作過程的內存開銷。
