公司專注于為企業(yè)提供網(wǎng)站設(shè)計制作、網(wǎng)站設(shè)計、微信公眾號開發(fā)、商城網(wǎng)站開發(fā)，微信小程序，軟件定制開發(fā)等一站式互聯(lián)網(wǎng)企業(yè)服務(wù)。憑借多年豐富的經(jīng)驗，我們會仔細了解各客戶的需求而做出多方面的分析、設(shè)計、整合，為客戶設(shè)計出具風(fēng)格及創(chuàng)意性的商業(yè)解決方案，創(chuàng)新互聯(lián)公司更提供一系列網(wǎng)站制作和網(wǎng)站推廣的服務(wù)。
規(guī)范概述
目的
為提高團隊協(xié)作效率，便于后臺人員添加功能及前端后期優(yōu)化維護，輸出高質(zhì)量的文檔，特制訂此文檔。本規(guī)范文檔一經(jīng)確認，前端開發(fā)人員必須按本文檔規(guī)范進行前臺頁面開發(fā)。本文檔如有不對或者不合適的地方請及時提出，經(jīng)討論決定后方可更改。
準則
符合web標準，語義化html，結(jié)構(gòu)表現(xiàn)行為分離，兼容性優(yōu)良。頁面性能方面，代碼要求簡潔明了有序，盡可能的減小服務(wù)器負載，保證最快的解析速度。
文件規(guī)范
基本要求
對頁面中標簽屬性的值都需要用雙引號包括起來
所有頁面編碼均采用utf-8
文件存放與命名規(guī)范
html，css，js，p_w_picpaths文件均歸檔至《系統(tǒng)開發(fā)規(guī)范》約定的目錄中；
html文件命名：英文命名，后綴.htm，同時將對應(yīng)界面稿放于同目錄中,并要求與html文件同名，以方便后端添加功能時查找對應(yīng)頁面；
css文件命名：英文命名，后綴.css，共用base.css，首頁index.css，其他頁面依實際模塊需求命名；
js文件命名：英文命名，后綴.js，共用common.js，其他依實際模塊需求命名。
html書寫規(guī)范
文檔類型聲明及編碼：統(tǒng)一為html5聲明類型；編碼統(tǒng)一為
非特殊情況下樣式文件必須外鏈至
...之間；非特殊情況下JavaScript文件必須外鏈至頁面底部；引入樣式文件或JavaScript文件時，須略去默認類型聲明，寫法如下：
引入JS庫文件，路徑或文件名須包含庫名稱及版本號及是否為壓縮版，比如jquery-1.4.1.min.js；引入插件，文件名格式為庫名稱+插件名稱，比如jQuery.cookie.js；
所有編碼均遵循xhtml標準，標簽、屬性、屬性命名必須由小寫字母及下劃線數(shù)字組成，且所有標簽必須閉合，包括br (
), hr(
充分利用無兼容性問題的html自身標簽，比如span、em、strong、optgroup、label，等等；需要為html元素添加自定義屬性的時候，首先要考慮下有沒有默認的已有的合適標簽去設(shè)置，如果沒有，可以使用須以"data-"為前綴來添加自定義屬性，避免使用"data:"等其他命名方式；
語義化html，如標題根據(jù)重要性用h*(同一頁面只能有一個h2)，段落標記用p，列表用ul，內(nèi)聯(lián)元素中不可嵌套塊級元素；
盡可能減少div嵌套，如：
完全可以用以下代碼替代：
歡迎訪問XXX,您的用戶名是用戶名
書寫鏈接地址時，必須避免重定向，例如：href=http://itaolun.com/，即須在URL地址后面加上“/”；
在頁面中盡量避免使用style屬性,即ca-4">…"；
必須為含有描述性表單元素(input，textarea)添加label，如：
姓 名:
須寫成：
能以背景形式呈現(xiàn)的圖片，盡量寫入css樣式中；
重要圖片必須加上alt屬性，重要的元素和截斷的元素加上title；
給區(qū)塊代碼及重要功能(比如循環(huán))加上注釋,方便后臺添加功能；
特殊符號使用：盡可能使用代碼替代:比如<(<)、>(>)、空格( )等等；
class和id參見css書寫規(guī)范。
css書寫規(guī)范
編碼統(tǒng)一為utf-8；
CSS的命名
外套:wrap
主導(dǎo)航:mainNav
子導(dǎo)航:subnav
頁腳:footer
整個頁面:content
頁眉:header
頁腳:footer
商標:label
標題:title
主導(dǎo)航:mainNav(globalNav)
頂導(dǎo)航:topnav
邊導(dǎo)航:sidebar
左導(dǎo)航:leftsideBar
右導(dǎo)航:rightsideBar
旗志:logo
標語:banner
菜單內(nèi)容1:menu1Content
菜單容量:menuContainer
子菜單:submenu
邊導(dǎo)航圖標:sidebarIcon
注釋:note
面包屑:breadCrumb(即頁面所處位置導(dǎo)航提示)
容器:container
內(nèi)容:content
搜索:search
登陸:login
功能區(qū):shop(如購物車，收銀臺)
當前的current
樣式文件命名
主要的:master.css
布局版面:layout.css
專欄:columns.css
文字:font.css
打印樣式:print.css
主題:themes.css
頁頭:header
登錄條:loginBar
標志:logo
側(cè)欄:sideBar
廣告:banner
導(dǎo)航:nav
子導(dǎo)航:subNav
菜單:menu
子菜單:subMenu
搜索:search
滾動:scroll
頁面主體:main
內(nèi)容:content
標簽頁:tab
文章列表:list
提示信息:msg
小技巧:tips
欄目標題:title
友情鏈接:friendLink
頁腳:footer
加入:joinus
指南:guild
服務(wù):service
熱點:hot
新聞:news
下載:download
注冊:regsiter
狀態(tài):status
按鈕:btn
投票:vote
合作伙伴:partner
版權(quán):copyRight
class與id的使用：id是唯一的并是父級的，class是可以重復(fù)的并是子級的， 所以id僅使用在大的模塊上，class可用在重復(fù)使用率高及子級中；
class與id命名:名稱由小寫英文、數(shù)字和下劃線來組合命名，如zy_comment，fontred，width300；避免使用中文拼音，盡量使用簡易的單詞組合；總之，命名要語義化，簡明化；
CSS書寫范例
#headed{ }
.top{}
.top ul{ }
.top ul li{ }
.top ul li span{}
.top ul li img{ }
.top ul li a{}
.top ul li a:hover {}
………
css屬性書寫順序，建議遵循：布局定位屬性 ->自身屬性->文本屬性->其他屬性。此條可根據(jù)自身習(xí)慣書寫,但盡量保證同類屬性寫在一起。屬性列舉：
布局定位屬性主要包括：display、list-style、position（相應(yīng) 的top,right,bottom,left）、float、clear、visibility、overflow；
自身屬性主要包括：width、height、margin、padding、border、background；
文本屬性主要包括：color、font、text-decoration、text-align、vertical-align、white-space；
其他屬性：content；
以上列出的這些屬性只是最常用到的，并不代表全部。
書寫代碼前，考慮并提高樣式重復(fù)使用率；
充分利用html自身屬性及樣式繼承原理減少代碼量，比如：
定義
ul.listli{position:relative}
ul.list lispan{position:absolute; right:0}
即可實現(xiàn)日期居右顯示。
樣式表中中文字體名，請務(wù)必轉(zhuǎn)碼成unicode碼，以避免編碼錯誤時亂碼；
背景圖片請盡可能使用sprite技術(shù)，減小http請求，考慮到多人協(xié)作開發(fā)，sprite按模塊制作；
使用table標簽時(盡量避免使用table標簽)，請不要用width、height、cellspacing、cellpadding等table屬性直接定義表現(xiàn)，應(yīng)盡可能的利用table自身私有屬性分離結(jié)構(gòu)與表現(xiàn)，如：thead、tr、th、td、tbody、tfoot、colgroup、scope；
而cellspaing及cellpadding的css控制方法如下：
table{border:0;margin:0;border-collapse:collapse;}
table th, tabletd{padding:0;}
杜絕使用
用png圖片做圖片時，要求圖片格式為png-8格式，若png-8實在影響圖片質(zhì)量或其中有半透明效果，請為ie6單獨定義背景，代碼：
_background:none;
_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=crop, src=’img/bg.png’);
避免兼容性屬性的使用，比如text-shadow、css3的相關(guān)屬性；
減少使用影響性能的屬性，比如position:absolute、float；
必須為大區(qū)塊樣式添加注釋，小區(qū)塊適量注釋；
css默認設(shè)置
@charset"utf-8";
*{margin:0;padding:0;}
ul,ol,dl {list-style-type:none;}
前端部分:
<1> .頁面框架使用CSS ID選擇器
例:
Css: # header{}
<2> .ID 選擇器內(nèi)使用類選擇器CLASS
例:
Css: #header{}
.top{}
<3>.CLASS選擇器內(nèi)非特殊樣式定義,需使用派生選擇器
例:
Css: #header{}
.top{}
.top ul{}
.top ul li{}
……
<4>.H strong b標簽的使用
H1標簽:不得超過1次
strong b標簽僅對關(guān)鍵字部分使用
JavaScript書寫規(guī)范
文件編碼統(tǒng)一為utf-8書寫過程過，每行代碼結(jié)束必須有分號，原則上所有功能均根據(jù)XXX項目需求原生開發(fā)，以避免網(wǎng)上down下來的代碼造成的代碼污染(沉冗代碼、現(xiàn)有代碼沖突...);
變量命名：駝峰式命名。原生JavaScript變量要求是純英文字母，首字母須小寫，如：iTaoLun；另，要求變量集中聲明，避免全局變量；
類命名：首字母大寫，駝峰式命名。如：ItaoLun；
函數(shù)命名：首字母小寫駝峰式命名。如iTaoLun()；
命名語義化，盡可能利用英文單詞或其縮寫；
盡量避免使用存在兼容性及消耗資源的方法或?qū)傩?，比如eval()、innerText等；
后期優(yōu)化中，JavaScript非注釋類中文字符須轉(zhuǎn)換成unicode編碼使用，以避免編碼錯誤時亂碼顯示；
代碼結(jié)構(gòu)明了，加適量注釋。提高函數(shù)重用率；
注重與html分離，減小reflow，注重性能；
js文件加載
js變量賦值；
js調(diào)用函數(shù)；
非特殊狀態(tài)不得頁面嵌入；
圖片規(guī)范
所有頁面元素類圖片均放入系統(tǒng)指定的文件夾,測試用圖片放于demoimg文件夾；
圖片格式僅限于gif、png、jpg；
命名全部用小寫英文字母、數(shù)字、下劃線的組合，其中不得包含漢字、空格、特殊字符；盡量用易懂的詞匯，便于團隊其他成員理解；另，命名分頭尾兩部分，用下劃線隔開，樣例如下表：
圖片分類 | 命名 |
廣告、裝飾圖案等長方形的圖片 | ad_ |
標志性的圖片 | log_ |
在頁面上位置不固定并且?guī)в墟溄拥男D片（按鈕） | btn_ |
導(dǎo)航圖片 | nav_ |
菜單圖片 | men_ |
裝飾用的照片取名 | pic_ |
不帶鏈接表示標題的圖片取名 | tit_ |
小圖標 | ico_ |
背景圖片 | bg_ |
在保證視覺效果的情況下選擇最小的圖片格式與圖片質(zhì)量，以減少加載時間；
盡量避免使用半透明的png圖片(若使用，請參考css規(guī)范相關(guān)說明)
運用csssprite技術(shù)集中小的背景圖或圖標，減小頁面http請求，但注意，請務(wù)必在對應(yīng)的spritepsd源圖中劃參考線。
開發(fā)及測試工具約定
建議使用Aptana、Dw、Vim，亦可根據(jù)自己喜好選擇，但須遵循如下原則：
不可利用IDE的視圖模式'畫'代碼；
不可利用IDE生成相關(guān)功能代碼，比如Dw內(nèi)置的一些功能js；
編碼必須格式化，比如縮進。
測試工具：前期開發(fā)僅測試FireFox、IE6、IE7、IE8，后期優(yōu)化時加入Opera、Chrome、Safari；
建議測試順序：FireFox-->IE7-->IE8-->IE6-->Opera-->Chrome-->Safari，建議安裝firebug及IETab Plus插件。
CSSHack
即使是完美的CSS也未必能在目前眾多的瀏覽器中呈現(xiàn)一致的效果，所以，CSSHack在很多情況下都是必要的，建議先以對CSS標準支持得比較好的瀏覽器（Firefox或者Chrome）為主編輯CSS，最后在處理IE的兼容性——單獨為IE建立一個CSS文件（比如：for-ie.css或ie-hack.css等），最后在HTML文件中，通過IE的條件注釋按需引入。
重慶分公司
重慶分公司
