前端規範1

第一部分：文件規範

1. tpl, css, js, img文件均歸檔至<系統開發規範>約定的目錄中;

2. tpl文件命名: 英文命名, 後綴.html,請重命名與php文件同名, 以方便後端添加功能時查找對應頁面;

3. css文件命名: 英文命名, 後綴.css. 共用base.css, 首頁index.css, 其餘頁面依實際模塊需求命名.;

4. Js文件命名: 英文命名, 後綴.js. 共用common.js, 其餘依實際模塊需求命名.

第二部分：HTML書寫規範

1. 全部編碼均遵循xhtml標準, 標籤 & 屬性 & 屬性命名 必須由小寫字母及下劃線數字組成, 且全部標籤必須閉合; 屬性值必須用雙引號包括;

2. 充分利用無兼容性問題的html自身標籤, 好比span, em, strong, optgroup, label,等等; 須要爲html元素添加自定義屬性的時候, 首先要考慮下有沒有默認的已有的合適標籤去設置, 若是沒有, 可使用須以」data-」爲前綴來添加自定義屬性，避免使用」data:」等其餘命名方式;

3. 語義化html, 如 標題根據重要性用h(同一頁面只能有一個h1), 段落標記用p, 列表用ul, 內聯元素中不可嵌套塊級元素;

4. 儘量減小div嵌套

5. 書寫連接地址時, 必須避免重定向，例如：href=」http://www.example.com/」, 即須在URL地址後面加上「/」；

6. 在頁面中儘可能避免使用style屬性,即style=」…」，應該儘可能使用class或者id來定義新的樣式，而後再對應的css文件裏面修改;

7. 文檔類型聲明及編碼: 統一爲html5聲明類型; 編碼統一爲, 書寫時利用IDE實現井井有條的縮進;
8. 非特殊狀況下樣式文件必須外鏈至之間;非特殊狀況下JavaScript文件必須外鏈至頁面底部; 引入JS庫文件, 文件名須包含庫名稱及版本號及是否爲壓縮版, 好比jquery-1.7.1.min.js; 引入插件, 文件名格式爲庫名稱+插件名稱, 好比jQuery.cookie.js;

　　1、 網頁製做細節

　　　　—- head區代碼規範

　　　　head區是指HTML代碼的和之間的內容。 
　　　　必須加入的標籤：

　　公司版權註釋 ； 
　　網頁顯示字符集。 
　　簡體中文： 
　　繁體中文： 
　　英 語： 
　　網頁製做者信息 
　　網站簡介 
　　搜索關鍵字 
　　網頁的css規範 
　　網頁標題 xxxxxxxxxxxxxxxxxx 
　　能夠選擇加入的標籤： 
　　設定網頁的到期時間。一旦網頁過時，必須到服務器上從新調閱。 

　　禁止瀏覽器從本地機的緩存中調閱頁面內容。 

　　用來防止別人在框架裏調用你的頁面。 

　　自動跳轉。 
　　5指時間停留5秒 
　　網頁搜索機器人嚮導。用來告訴搜索機器人哪些頁面須要索引，哪些頁面不須要索引。 
　　CONTENT的參數有all,none,index,noindex,follow,nofollow。默認是all。 
　　收藏夾圖標 www.111cn.net 

　　全部的javascript的調用盡可能採起外部調用。 

　　附標籤：標籤不屬於head區，這裏強調一下，爲了保證瀏覽器的兼容性，必須設置頁面背景

　　2、網頁製做細節 —- 字體

　　 　  在設定字體樣式時對於文字字號樣式和行間距應必須使用CSS樣式表。禁止在頁面中出現 標記。 
 　　　  在網頁中中文應首選使用宋體。英文和數字首選使用verdana 和arial 兩種字體。通常使用中文宋體的9pt 和11pt 或12px 和14.7px 這是通過優化的字號，黑體字或者宋體字加粗時，通常選用11pt 和14.7px 的字號比較合適。 
　　      爲了最大程度的發揮瀏覽器自動排版的功能，在一段完整的文字中請儘可能不要使用來人工干預分段。 
　　      不一樣語種的文字之間應該有一個半角空格，但避頭的符號以前和避尾的符號以後除外，漢字之間的標點要用全角標點，英文字母和數字周圍的括號應該使用半角括號。 
　　     請不要在網頁中連續出現多於一個的 也儘可能少使用全角空格（英文字符集下，全角空格會變成亂碼），空白應該儘可能使用 text-indent, padding, margin, hspace, vspace 以及透明的gif 圖片來實現。 
　　     行距建議用百分比來定義，經常使用的兩個行距的值是line-height:120%/150%. 
　　     排版中咱們常常會遇到須要進行首行縮進的處理，不要使用 或者全角空格來達到效果，規範的作法是在樣式表中定義 p { text-indent: 2em; } 而後給每一段加上標記，注意，通常狀況下，請不要省略結束標記 。

　　3、網頁製做細節 —- 連接

　　　　網站中的連接路徑所有采用相對路徑，通常連接到某一目錄下的缺省文件的連接路徑沒必要寫全名，如咱們沒必要這樣： 而應該這樣：，全部內頁指向首頁的連接寫成 
　　　　在瀏覽器裏，當咱們點擊空連接時，它會自動將當前頁面重置到首端，從而影響用戶正常的閱讀內容，咱們用代碼「javascript:void(null)」代替原來的「#」標記 
　　4、網頁製做細節 —- 表格 
　　　　1px表格 style=」border-collapse: collapse」 
　　　　實例以下

設置亮、暗邊框顏色：表格有亮邊框（bordercolorlight）和暗邊框（bordercolordark）兩個屬性能夠對錶格樣式設置。 

 

　　　　在寫互相嵌套時，嚴格按照的規範，對於單獨的一個來講，對齊，

縮進兩個半角空格，

中若是還有嵌套的表格，也縮進兩個半角空格，若是 結束標記應該與  而應該是這樣的：  這是由於瀏覽器認爲換行至關於一個半角空格，以上不規範的寫法至關於無心中增長一個半角空格，若是確實有必要增長一個半角空格，也應該這樣寫：  一個網頁要儘可能避免用整個一張大表格，全部的內容都嵌套在這個大表格以內，由於瀏覽器在解釋頁面的元素時，是以表格爲單位逐一顯示，若是一張網頁是嵌套在一個大表格以內，那麼極可能形成的後果就是，當瀏覽者敲入網址，他要先面對一片空白很長時間，而後全部的網頁內容同時出現。若是必須這樣作，請使用 標記，以便可以使這個大表格分塊顯示  5、網頁製做細節 —- 下載速度  首頁Flash 網頁大小應限定在 200K 如下，儘量的使用矢量圖形和Action來減少動畫大小。非首頁靜態頁面含圖片大小應限定在 70K 左右，儘量的使用背景顏色替換大塊同色圖片。 中沒有任何嵌套的表格， 處於同一行，不要換行，如咱們注意在源代碼中不該有這樣的代碼：

 

　　6、網頁製做細節 —- include

　　　　asp標準寫法： 
　　　　jsp 標準寫法：<%@ include file=」../inc/index_top..jsp」 %>

　　7、網頁製做細節 —- Alt和Title  都是提示性語言標籤，請注意它們之間的區別。

　　　　在咱們瀏覽網頁時，當鼠標停留在圖片對象或文字連接上時，在鼠標的右下角有時會出現一個提示信息框。對目標進行必定的註釋說明。在一些場合，它的做用是很重要的。 
　　　　alt 用來給圖片來提示的。Title用來給連接文字或普通文字提示的。用法以下： 

　　文字

　　文字 
　　 
　　8、網頁製做細節 —- 緩存 
　　　　網頁不會被緩存 
　　　　HTM網頁 
　　　　ASP網頁 
　　　　Response.Expires = -1 
　　　　Response.ExpiresAbsolute = Now() - 1 
　　9、網頁製做細節 —- 瀏覽器兼容性 
　　　　建立站點時，應該明白訪問者可能使用各類 Web 瀏覽器。在已知的其餘設計限制下，儘量將站點設計爲具備最大的瀏覽器兼容性。

　　　　目前使用的 Web 瀏覽器有二十多種，大多數已發行了多個版本。即便您只針對使用 Netscape Navigator 和 Microsoft Internet Explorer 的大多數 Web 用戶，但您應明確並非每一個人都在使用這兩種瀏覽器的最新版本。

　　　　您的站點越複雜（在佈局、動畫、多媒體內容和交互方面），跨瀏覽器兼容的可能性就越小。例如，並不是全部的瀏覽器均可以運行JavaScript。不使用特殊字符的純文本頁面或許可以在任何瀏覽器中正確顯示，但比起有效地使用圖形、佈局和交互的頁面，這樣的頁面在美感上可能要差得多。因此，應儘可能在最佳效果設計和最大瀏覽器兼容性設計之間取得平衡。 
　　　　全部的HTML 標籤的屬性都要用單引號或者雙引號括起，即咱們應該寫 而不 是 . 
　　10、圖片處理細節 —- banner 
　　　　全尺寸banner爲468X60px，半尺寸banner爲234X60px，小banner爲88X31px。 
　　　　另外120X90，120X60也是小圖標的標準尺寸。全尺寸banner不超過14K。 
　　　　廣泛的banner尺寸760X100，750X120，468X60，468X95，728X90，585X140 
　　　　次級頁的pip尺寸360X300，336X280 
　　　　遊標:100X100或120X120 
　　11、圖片處理細節 —- LOGO的國際標準規範 
　　　　爲了便於INTERNET上信息的傳播，一個統一的國際標準是須要的。實際上已經有了這樣的一整套標準。其中關於網站的LOGO，目前有三種規格： 
　　　　88*31 這是互聯網上最廣泛的LOGO規格。 
　　　　120*60 這種規格用於通常大小的LOGO。 
　　　　120*90 這種規格用於大型LOGO。 
　　12、圖片處理細節 —- 頁面修飾圖片處理 
　　　　圖片通過優化以加快下載的速度,有較佳的視覺空間效果，用圖要與頁面風格、頁面內容相符；製做精美，細節處理得當

第三部分：CSS規範

1. class與id命名: ,樣式名稱由 小寫英文 、 數字 和 _ 來組合命名, 如i_comment, fontred, width200; 避免使用中文拼音, 儘可能使用簡易的單詞組合；命名要語義化, 簡明化。

2. 爲JavaScript預留鉤子的命名, 儘可能使用id屬性，能夠更快的獲取到dom。

3. css屬性書寫順序, 建議遵循: 佈局定位屬性–>自身屬性–>文本屬性–>其餘屬性. 此條可根據自身習慣書寫, 但儘可能保證同類屬性寫在一塊兒. 屬性列舉: 佈局定位屬性主要包括: display 、 list-style 、 position（相應的 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; 我所列出的這些屬性只是最經常使用到的, 並不表明所有;

4. 書寫代碼前, 考慮並提升樣式重複使用率;

5. 背景圖片請儘量使用sprite技術, 減少http請求, 考慮到多人協做開發, sprite按模塊製做;

6. 必須爲大區塊樣式添加註釋, 小區塊適量註釋;

7. 代碼縮進與格式: 建議單行書寫, 可根據自身習慣, 後期優化會統一處理;

8. 編碼統一爲utf-8;
9. 公用文件：協做開發過程當中，會引入默認的base.css(裏面包括了css reset、經常使用的css間距，css字體，css大小等，詳細參見base.css)；

經常使用的CSS命名規則 
頭：header 
內容：content/container 
尾：footer 
導航：nav 
側欄：sidebar 
欄目：column 
頁面外圍控制總體?丫摯磯齲?rapper 
左右中：left right center 
登陸條：loginbar 
標誌：logo 
廣告：banner 
頁面主體：main 
熱點：hot 
新聞：news 
下載：download 
子導航：subnav 
菜單：menu 
子菜單：submenu 
搜索：search 
友情連接：friendlink 
頁腳：footer 
版權：copyright 
滾動：scroll 
內容：content 
標籤：tags 
文章列表：list 
提示信息：msg 
小技巧：tips 
欄目標題：title 
加入：joinus 
指南：guide 
服務：service 
註冊：regsiter 
狀態：status 
投票：vote 
合做夥伴：partner

註釋的寫法: 
/* Header */ 
內容區 
/* End Header */

id的命名: 
1)頁面結構

容器: container 
頁頭：header 
內容：content/container 
頁面主體：main 
頁尾：footer 
導航：nav 
側欄：sidebar 
欄目：column 
頁面外圍控制總體?丫摯磯齲?rapper 
左右中：left right center

(2)導航

導航：nav 
主導航：mainnav 
子導航：subnav 
頂導航：topnav 
邊導航：sidebar 
左導航：leftsidebar 
右導航：rightsidebar 
菜單：menu 
子菜單：submenu 
標題: title 
摘要: summary

(3)功能

標誌：logo 
廣告：banner 
登錄：login 
登陸條：loginbar 
註冊：register 
搜索：search 
功能區：shop 
標題：title 
加入：joinus 
狀態：status 
按鈕：btn 
滾動：scroll 
標?頁：tab 
文章列表：list 
提示信息：msg 
當前的: current 
小技巧：tips 
圖標: icon 
註釋：note 
指南：guild 
服務：service 
熱點：hot 
新聞：news 
下載：download 
投票：vote 
合做夥伴：partner 
友情連接：link 
版權：copyright

注意事項:: 
1.一概小寫; 
2.儘可能用英文; 
3.不加中??和下劃線; 
4.儘可能不縮寫，除非一看就明白的單詞。

CSS樣式表文件命名 
主要的 master.css 
模塊 module.css 
基本共用 base.css 
佈局、版面 layout.css 
主題 themes.css 
專欄 columns.css 
文字 font.css 
表單 forms.css 
補丁 mend.css 
打印 print.css

第四部分：JavaScript規範

1. 文件編碼統一爲utf-8, 書寫過程過, 每行代碼結束必須有分號; 原則上全部功能均根據XXX項目需求原生開發, 以免網上down下來的代碼形成的代碼污染(沉冗代碼 || 與現有代碼衝突 || …);

2. 庫引入: 原則上僅引入jQuery庫, 若需引入第三方庫, 須與團隊其餘人員討論決定;

3. 變量命名: 駝峯式命名. 原生JavaScript變量要求是純英文字母, 首字母須小寫, 如iTaoLun; 另, 要求變量集中聲明, 避免全局變量.

1. 類命名: 首字母大寫, 駝峯式命名. 如 ITaoLun;

2. 函數命名: 首字母小寫駝峯式命名. 如iTaoLun();

3. 命名語義化, 儘量利用英文單詞或其縮寫;

4. 儘可能避免使用存在兼容性及消耗資源的方法或屬性, 好比eval_r() & innerText;

5. 後期優化中, JavaScript非註釋類中文字符須轉換成unicode編碼使用, 以免編碼錯誤時亂碼顯示;

6. 代碼結構明瞭, 加適量註釋. 提升函數重用率;

7. 注重與html分離, 減少reflow, 注重性能.

第五部分：圖片規範

1. 每一個模塊都會增長一個圖片文件夾，方便後期維護和處理，請將同一個模塊的圖片放在同一個文件夾裏面，圖片文件命名儘可能跟css文件的命名相同，儘可能使用小寫命名。

2. 圖片格式僅限於gif || png || jpg;

3. 命名所有用小寫英文字母 || 數字 || -(統一用分劃線銜接) 的組合，其中不得包含漢字 || 空格 || 特殊字符；儘可能用易懂的詞彙, 便於團隊其餘成員理解; 另, 命名分頭尾兩部分, 用分劃線隔開, 好比ad-left01.gif || btn-submit.gif;

4. 在保證視覺效果的狀況下選擇最小的圖片格式與圖片質量, 以減小加載時間;

5. 儘可能避免使用半透明的png圖片(若使用, 請參考css規範相關說明);

6. 運用css sprite技術集中小的背景圖或圖標, 減少頁面http請求。

第六部分：註釋規範

1. html註釋: 註釋格式 , 只能在註釋的始末位置,不可置入註釋文字區域;請務必要分開註釋的文字（即註釋文字中加空格）

2. css註釋: 註釋格式 ;/**/

3. JavaScript註釋, 單行註釋使用’//這兒是單行註釋’ ,多行註釋使用 ;/**/