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