一、html編碼規範
- 所有html代碼都採用小寫
- 屬性的值一定要用雙引號（""）括起來，且一定要有值，屬性與屬性之間空格數量不要太多，最好是1個
- 所有的標籤都要有一個相應的結束標籤，如果是單獨不成對的標籤，在標籤最後加一個“/”來關閉它，例如<br />。
- 表現和結構分離，代碼中儘量不涉及任何表現元素，如style，font，border，bgcolor等屬性,只寫入文檔的結構，將樣式寫於css文件中或頁面的head區。
- 不要使用<font>標籤，可以用<span>代替;不要用<b>，可以用<strong>代替;不要在<a>內用span改變鏈接文字顏色
- 用<checkbox>時，必須用<label for="checkbox.id"></label>把說明文字和checkbox組合起來，這時文字的點擊效果和checkbox等同
- 在每個內容塊的開始和結束處加入註釋,例如
<!--登錄框 begin-->
......
<!--登錄框 end-->
注意，不要再註釋內容中加入“-”。
- html標籤必須合理嵌套，並要有一定的層次感
二、CSS書寫規範
1、儘可能的通過繼承和層疊重用已有樣式
2、根據新建樣式的適應範圍分爲三級：全站級、頻道級、頁面級
2-1.全站級：global.css 這個是全局（如果要修改這個css要測試整個網站）
2-2.頻道級:文件存在在css/相應目錄下 （如：zhekou\fanli等）
2-3.頁面級：少量幾個頁面，寫成css文件，並做註釋 如果只有僅在一個頁面裏使用，則可以放在head頭部
3、單條CSS規則的書寫要求格式要求
3-1.屬性需要寫在一行，需要在”{””}”前後加空格， 在屬性的”;”後也加空格
如：.selector { property:value; property:value; }
3-2.多個 selector每個佔一行
如：.selector1,
.selector2,
.awlwxroe3 { property:value; property:value; }
3-3.兼容多個瀏覽器，將標準屬性寫在前面，
如：width:100px; *width:100px; _width:100px;
4、將作用於不同模塊的css放在一起，一定要加註釋
/*nav start*/
/*nav end*/
5、ID和Class命名不要用縮寫，單詞用“_”分隔, 慎用ID,應該多用class
如：.nav_footer{}
6、推薦使用的class名
表示狀態：.on .active .selected
表示位置：.first .last .main .side
表示結構：.hd .bd .ft .col .section
通用元素：.tb .frm .nav .list .item .tag .pic .info
7、推薦使用下面的css方式
區別屬性：
IE6 _property:value
IE6/IE7 *property:value
IE6/IE7/IE8 property:value\9
非IE6 property//:value;
區別規則：
IE6 * html .selector{}
IE7 *:first-child+html .selector{}
非IE6 html>body .selector{}
8、清除浮動用global.css裏的兩種類 clear 和 clear-fix
9、頁面引用css的順序，全站-》頻道-》頁面-》內聯
10、避免使用低效的選擇器
如：body>*{}
Ul > li > a{}
#footer > h3{}
Ul#top_blue{}
#search span.submit a{}
11、儘量避免使用 filter
12、不要直接修改標籤的樣式
如： Div{}
13、不要在標籤上直接寫樣式
如 <div style=”height:100px;”></div>
14、儘量不用 expression
15、不要使用 @import url(1.css);
16、儘量不用 ！important
17、絕對不要在css中使用 “*”選擇符 *{margin:0,padding:0;}
三、js代碼
1、js代碼分三級，公共級、頻道級、頁面級 （js文件名全爲小寫）
公共級，js/global.js
頻道級，js/頻道名/頻道名.js
頁面級，如果少可以用<script>放在頁尾 ，如果非常多，也可以放在頻道目錄
2、變量命名規範
2-1.常量以及全局變量必須全部使用大寫字母，單詞之間用下劃線分隔
如：var MMS_FRAME, LIMITE_TIME
2-2.方法內變量使用多個單詞組成複合詞，首單詞小寫，其它字母大寫
如：arrSampleList objSubmitBotton
2-3.對於指定Dom對象的變量名，儘量使用elm、obj或elm、obj開頭命名
var objSubmitButton = document.getElementById(‘btn_submit’);
function getCheckElement(){
var obj = document.getELementById(name); //如果方法內部只有一個對象
}
2-4.對於指定字符串的變量名，儘量用str,或str開頭
var strMaxTips = ‘最大的提示信息’;
2-5.對於指定數字的變量名，儘量使用num或num開頭
var numMaxcount = 1000;
2-6.布爾值的變量名的命名前面加is,同理可以加 has,can,should
Var isChecked, hasApple, canDoit;
2-7.循環變量使用 i,j,k
2-8.用於返回結果變量用result 或 ret開頭的變量
2-9．臨時變量爲temp,捕捉變量爲e
2-10.數組變量在單詞前加arr
var arrCity = [‘北京’,‘上海’];
2-11.避免使用否定的變量名稱，例如：
isNotError, isNotFound
3、方法命名規範
3-1.方法命名使用多個單詞組成複合詞，首單詞小寫，其它單詞首字母大寫。
如： function openWin(){}
3-2.方法命名的第一個單詞儘量使用動詞。例如：get/set add/remove create/destroy start/stop insert/delete begin/end等
4、類或組件的命名規範
4-1.類名稱必須爲名詞並使用駱峯命名法
Account , EventHandler
4-2.類內的常量必須在對象（類）的前部聲名，或枚舉變量的前部聲名，全用大寫
var NodeTypes = {
PI:3.1415,
ELEMENT:2
}
4-3.方法的命名爲一個動詞或動詞短語 如：obj.getElement(){}
4-4.類的公有變量 ， 類的私有變量 命名規範
var MyClass = function(){
this.myName = “robinName”; //公有變量
};
MyClass.prototype.getName = function(){
Var _thisName = “abc”; //私有變量前面加 ”_”
}
4-5.類的繼承的方法
var CatMyClass = function(){ //紅色爲基類的名稱
this.myClass = MyClass;
this.myClass();
……
};
5、變量的定義與使用
5-1.變量必須先定義後使用
5-2.聲明變量時要初始化 null
5-3.變量應該放在和他有關係的代碼中，不要把變量放在最上面，下面隔很遠
5-4.變量具有最小的聲明週期 ，執行完方法 內存就釋放
5-5.應儘量避免複雜條件表達式
如：不好的方法
If(a == b && b == c && c==d){ //有些複雜了 }
好的方法
var isOk = (a == b && b == c && c==d);
If(isOk){}
6、空白的使用規範
6-1.逗號後面跟一個空格
如：var foo = function(name1, name2, name3){}
6-2.冒號的前後各放一個空格
如：var strPosition = (a>b) ? ‘top’ : ‘botoon’;
6-3.for語句的分號後面跟一個空格
如：for(i = 0; i < 10; i++ ){}
6-4.分號前永遠不要有空格
如：var city = “shanghai”;
7、js的一些建議
7-1.使用{}來代替 new object(); 用[] 來代替new Array();
如：var arrCity = new Array(’北京’,’上海’,’深圳’); //不建議
var arrCity = [’北京’,’上海’,’深圳’]; //建議
var objPerson = new object(); //不建議
objPerson.name = ‘robin’; objPerson.sex = ’man’;
var objPerson = {
name:’robin’,
sex:’ man’
}
7-2.恆等運算和相等運算
var a;
alert(a==null) //true
alert(a==null) //false
alert(a===undefined) //true
7-3.Dom緩存已經訪問過的元素
7-4.離線更新節點
7-5.如果拼字符串，不要用字符串相加，用數組來處理
如：不要這樣做
var str = ‘<div class=”myclass”>’+
‘這些是內容’+
‘</div>’;
var str = new Array();
str.push(‘<div class=”myclass”>’);
8、註釋
8-1.全局變量要有註釋
8-2.整個方法也要加一下注釋
註釋
// 單行註釋
/* 多行註釋 */
四、java編碼規範
五、提示文字
提示文字可以分爲 鼠標移入提示、輸入框備註、操作反饋、功能提醒，系統異常
- 鼠標移入提示實現包含 alt、titile、tips（使用不多）
- alt：圖片的提示信息，主要是爲了SEO優化；
- title：主要用於文字、操作的解釋，在大多數情況下用於段落顯示不全的提示信息；
- tips：對信息的對話雲式的提示，用作在當前區域的提示；
注： alt和title會在幾秒中後消失，對於比較重要的提示建議用tips或者用JS行 爲來控制提示信息
- 備註主要是 對錶單輸入框的輸入提醒，顯示在輸入框右邊，可以分爲點擊顯示和默認顯示
- 操作反饋提示是在操作表單時產生的提示文字或提示頁面
- 表單輸入框在輸入過程中發生錯誤，在輸入框下面顯示提示文字
- 提交表單時，某輸入框輸入錯誤，在輸入框下面顯示提示文字
- 表單提交，操作結果根據成功、失敗、系統異常轉入對應提示頁面
特別情況下，也可以把將提示信息顯示在操作按鈕右邊或上面
注：操作提示不能使用alert 彈框
- 功能提醒是對功能操作的注意點提示，放在操作表單底部
- 系統異常是在功能執行出現異常時提示給用戶
六、操作
1、所有操作步驟不能超過3步，並且不能有雙向選擇
2、操作步驟超過1步的時候需要有流程圖提示，讓用戶知道下一步操作的內容
七、SEO相關
- 需要做SEO的頁面網址目錄層次不要超過4層，網址需要做靜態化，目錄命名以小寫英文字母、下劃線組成
- 網頁title，keywords ，description設定（需要確定1個人定義這些內容告知技術）
- 減少css，js文件引用個數，各控制在2-3個
- 圖片標籤需要加入alt屬性，不需要和title同時使用，需要時可以把title加到A標籤
注：規範的HTML代碼width及height標籤也是需要的。title大多數情況下用於段落顯 示不全的提示信息
- 頁面中的js代碼能放到頁面末尾的放到頁面末尾
- 頁面html不能用table，改用div實現，並做到冗餘代碼的清除，保證hmtl代碼簡潔，style的代碼儘量放入css文件
- 網頁關鍵字需要用strong、h1~h6這樣的標籤，h1標籤一個頁面裏面最多出現一次 ，每個頁面中至少應該出現1次這樣的標籤
五、其他
- 網站可用色系demo準備
- 按鈕樣式demo準備
- 表單文本框、數據列表頁樣式demo準備
- 鏈接文字樣式準備，設定多套鏈接樣式供不同頻道，不同內容使用
- 操作提示頁面demo準備 ,可以分爲操作成功、失敗、系統異常3種
- 操作提示文字顏色準備，可以分爲功能提醒、輸入框備註、警告、錯誤、系統異常5種
- 準備404,500錯誤頁提示頁面
開發過程只能用以上效果佈局相關頁面