Html5css3Web前端開發(fā)規(guī)范標準詳_第1頁
Html5css3Web前端開發(fā)規(guī)范標準詳_第2頁
Html5css3Web前端開發(fā)規(guī)范標準詳_第3頁
Html5css3Web前端開發(fā)規(guī)范標準詳_第4頁
Html5css3Web前端開發(fā)規(guī)范標準詳_第5頁
全文預覽已結束

下載本文檔

版權說明：本文檔由用戶提供并上傳，收益歸屬內容提供方，若內容存在侵權，請進行舉報或認領

文檔簡介

Web前端開發(fā)規(guī)文件規(guī)為輸出高質量的Web頁面，提高團隊協作效率，便于后臺人員添加功能及前端后期優(yōu)化與維護，如有錯誤及時提出更改。1、html，css，js，images,fonts等文件目錄組織如下如示：├──xxx.html├──css/│├──index.css│├──header.css│├──footer.css│└──2016/││├──content.css││└──nav.css├──js/│├──xxx.js│├──xxx_min-tab.js│└──2016/└──images/│├──index_head.jpg│├──index_logo.gif│└──2016││├──xxx.jpg││└──xxx.png└──fonts/└──xxx.ttf文件命名原則調整為所有字母小寫，單詞之間使用破折號（-）相連，壓縮后的文件在原文件名（除擴展名）后添加.min。參考bootstrap文件命名：bootstrap-theme.css,bootstrap-theme.min.css。常用目錄名：data(數據庫)images(圖片)install(安裝)templets(模版)include(包含)admin(后臺)rss(定閱)media(媒體)config(配置)Script(腳本)Language(語言)style(樣式);引入CSS和JavaScript文件<linkrel="stylesheet"href="code-guide.css"><style>/*...*/</style><!--JavaScript--><scriptsrc="code-guide.js"></script>class用于標識高度可復用組件，因此應該排在首位。id用于標識具體組件，應當謹慎使用（例如，頁面的書簽），因此排在第二位。<aclass="..."id="..."data-modal="toggle"href="#">Examplelink</a><inputclass="form-control"type="text"><imgsrc="..."alt="...">編寫HTML代碼時，盡量避免多余的父元素。很多時候，這需要迭代和重構來實現。<spanclass="avatar"><imgsrc="..."></span>參考如下：<imgclass="avatar"src="...">其他要求css文件外鏈至<head></head>之間，js文件置于</body>之前。語義化HTML，如標題根據重要性用h*(同一頁面只能有一個h1)，段落標記用p，列表用ul，聯元素中避免嵌套塊級元素。書寫地址時，建議在URL地址后面加上"/"，例如：href="proin.cc/"。在頁面中不能使用style屬性，即style="…"；所有樣式必須寫在css文件中。必須為含有描述性表單元素(input，textarea)添加label，如：<p>:<inputtype="text"id="name"name="name"/></p>須寫成：<p><labelfor="name">：</label><inputtype="text"id="name"/></p>能以背景形式呈現的圖片，盡量寫入css樣式中。給重要的元素和截斷的元素加上title。建議給區(qū)塊代碼及重要功能（比如循環(huán)）加上注釋，方便后臺添加功能。不是標簽一部分的特殊符號都用編碼表示，出現在容中的特殊符號都需要用編碼形式表現出來，如：<：<，>：>，&）：&，"："，盡量使用 代替空格。圖片標簽必須要有alt屬性，如只起修飾作用而沒有任何意義的圖片可設置alt屬性值為空。如：<imgsrc="a.gif"alt="">。CSS規(guī)1.

css文件命名:

英文命名,

后綴.css.

共用首頁單獨定義.css部分，

其他頁面依實際模塊需求命名.;2.

Js文件命名:

英文命名,

后綴.js.

共用.js,

其他依實際模塊需求命名.3.

文檔類型聲明及編碼:

統一為html5聲明類型<!DOCTYPE

html>;

編碼統一為<metacharset="utf-8"

/>,

書寫時實現層次分明的縮進;4.

非特殊情況下樣式文件必須外鏈至<head>...</head>之間;非特殊情況下JavaScript文件必須外鏈至頁面底部;

引入JS庫文件,

文件名須包含庫名稱及版本號及是否為壓縮版,

比如jquery-1.4.1.min.js;

引入插件,

文件名格式為庫名稱+插件名稱,

比

如jQuery.cookie.js;

語義化html,

如

標題根據重要性用h*(同一頁面只能有一個h1),

段落標記用p,

列表用ul,

聯元素中不可嵌套塊級元素;7

盡可能減少div嵌套,

如完全可以用以下代碼替代:

8.

書寫地址時,

必須避免重定向，例如：.qianxiuwang.

即須在URL地址后面加上“/”；9.

能以背景形式呈現的圖片,

盡量寫入css樣式中;

10.

重要圖片必須加上alt屬性;

給重要的元素和截斷的元素加上title;

11.

給區(qū)塊代碼及重要功能(比如循環(huán))加上注釋,

方便后臺添加功能;

12..

書寫頁面過程中,

請考慮向后擴展性;13.

必須為大區(qū)塊樣式添加注釋,

小區(qū)塊適量注釋;

14.

代碼縮進與格式:

建議單行書寫;書寫規(guī)參考搜狐CSS板式.sohu./upload/style/style150302.css.sohu./upload/style/layout130716.css.sohu./upload/style/global130716.css例如css規(guī)news(性質)news_title(性質_描素)news_title_top(性質_描素_位置)news_title_top_01(性質_描素_位置_數量)news_title_top_a_01(性質_描素_位置_分類_數量)news_title_top_b_01(性質_描素_位置_分類_數量)例如html規(guī)<divclass="main"><divclass="mtb10clearfix"><divclass="logo"><imgsrc="#"title=""alt=""/></a></div><divclass="fl"><ahref="#"target="_blank">關注我們</a></div></div></div></div>注釋部分Html注釋<!--header-->注釋容區(qū)<!--endheader-->css注釋中文命名注釋/*----------------------------導航欄----------------------------*/JavaScript注釋單行注釋使用'//這兒是單行注釋'

,多行注釋使用

/*

這兒有多行注釋

*/;圖片規(guī)圖片格式僅限于gif、png、jpg，圖標、按鈕等采用透明背景為主；除需要透明的圖片使用png、gif外其他圖片都采用jpg格式。為盡量控制文件大小，大尺寸圖片應避免使用png，盡量使用jpg，運用css

sprite技術集中小的背景圖或圖標,

減小頁面http請求。2、命名全部使小寫英文字母、數字和破折號（-）的組合，其中不得包含漢字、空格和特殊字符。盡量使用易懂的詞匯，便于其他人理解。如：ad-left.gif、btn-submit.jpg；在保證視覺效果的情況下選擇最小的圖片格式與圖片質量，以減少加載時間。盡量減少使用半透明的png圖片。命名規(guī)頭：header容：content/container尾：footer導航：nav側欄：sidebar欄目：column頁面外圍控制整體布局寬度：wrapper左右中：leftrightcenter登錄條：loginbar標志：logo廣告：banner頁面主體：main熱點：hot新聞：news下載：download子導航：subn

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯系上傳者。文件的所有權益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網頁內容里面會有圖紙預覽，若沒有圖紙預覽就沒有圖紙。
  • 4. 未經權益所有人同意不得將文件中的內容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網僅提供信息存儲空間，僅對用戶上傳內容的表現方式做保護處理，對用戶上傳分享的文檔內容本身不做任何修改或編輯，并不能對任何下載內容負責。
  • 6. 下載文件中如有侵權或不適當內容，請與我們聯系，我們立即糾正。
  • 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

最新文檔

評論

0/150

提交評論