html:web前端开发规范
*?遵循內容(HTML)、顯示(CSS)、行為(JavaScript)分離的代碼組織模式
* 代碼格式化,保持干凈整潔
?
2.1.?添加必須的utf-8的字符集,并且使用HTML5的簡潔方式:
<meta charset="utf-8" />
?
2.2.?遵循xhtml 1.0規則:
1)?所有標簽必須結束
2)?所有標簽必須小寫
3)?標簽屬性必須使用成對引號(單引號或雙引號)
4)?標簽屬性必須有值:
<select>
<option?selected="selected"></option>
</select>
<input?type="checkbox"?checked="checked"?/>
5)?所有特殊符號必須轉義(&、<、>、?、?…)
?
2.3.?標簽屬性命名規范
id:?連接符命名法“hello-world”
class:?連接符命名法“hello-world”
name:?駱駝式命名法“helloWorld”
1)?表單元素的id必須加以下前綴
label:?lbl
text:?txt
password:?txt
textarea:?txt
file:?txt
radio:?rad
checkbox:?chk
submit:?btn
reset:?btn
button:?btn
hidden:?hid
2)?用于結構布局的元素id命名
主容器: main
頁頭: header
頁腳: footer
內容區域: content
LOGO:?logo
主導航: main-nav
二級導航: sub-nav
3)?name命名
一般用于表單元素,根據當前元素id屬性值命名,去掉id屬性值的前綴和所有連接符,使用駱駱式命名法命名,例如id=”txt-id-card”,那么name=”idCard”。
?
2.4.?合理使用標簽,語義化結構
1)?標簽合理嵌套
a、span、strong、em、p、h1~h6等元素不能包含:div、ul、ol、dl、p
2)?嚴禁多div癥、多span癥、多table癥,正確使用標簽表現DOM結構,在文檔去除css的情況下,任然具有結構和可讀性,以下是html標記的使用規范:
p:文本段落;
dl:定義列表,可包括標題和內容簡介的列表;
ul:無序列表;
ol:有序列表;
h1~h6:文章標題、內容區塊標題,根據重要性由大到小區分,h1一個頁面只出現一次;
strong/em:強調文本;
img:圖像,必須加上alt屬性,當圖像無法顯示時,可表示圖像信息,背景和按鈕使用css處理,不使用img元素;
table:數據網格,規則的分欄布局,盡可能顯性的定寬和定高。
3)?合理化表單結構
a)?使用fieldset元素包裹相同類別的字段;
b)?使用legend元素表示字段類別名稱;
c)?使用label表示字段文本,添加必要的for屬性,以在點擊字段文本時,文本框能獲得焦點;
d)?文本框不使用size屬性定義寬度,而使用css的width屬性;
e)?添加maxlength屬性限制輸入字符的長度。
?
4)?嚴禁使用已在xhtml 1.0中已移除的的標簽:
s、i、b、font
?
2.5.?控制頁面默認顯示狀態
使用js來控制和切換顯示的區塊、導航、tab,必須先用css處理DOM默認顯示狀態。
應用示例:
#tabs?div?{?display:none?}
#tabs?div.selected?{?display:block?}
<div?id="tabs">
<ul>
<li><a?href="#tab-1">item1</a></li>
<li><a?href="#tab-2">item2</a></li>
<li><a?href="#tab-3">item3</a></li>
</ul>
<div?id="tab-1"?class="selected"></div>
<div?id="tab-2"></div>
<div?id="tab-3"></div>
</div>
?
3.1.?Css 命名規則
1)?樣式類名全部用小寫,首字符必須是字母,禁止數字或其他特殊字符。由以字母開頭的小寫字母(a-z)、數字(0-9)、下劃線(_)組成。
2)?可以是單個單詞,也可以是組合單詞,要求能夠描述清楚模塊和元素的含義,使其具有語義化。避免使用?123456…red,blue,left,right之類的(如顏色、字號大小等)矢量命名,如class=”left_news”、class=”2”?,以避免當狀態改變時名稱失去意義。
3)?盡量用單個單詞簡單描述class名稱。
4)?雙單詞或多單詞組合方式:形容詞_名詞、命名空間_名次、命名空間_形容詞_名詞。例如:news_list、mod_feeds、mod_my_feeds、cell_title
?
3.2.?Class和ID的使用方法
把id留給后臺開發和JS使用,除此之外頁面的page id(如首頁的外層需要一個ID id=”page_index”),頁面結構(header ?main ?footer)允許用id命名。其他禁止id使用在樣式表CSS命名中,一律使用class命名
?
3.3.?命名空間
在編碼思想上,我們可以將頁面拆分成不同的層級(布局、模塊、元件)。
什么是CSS命名空間?
通過統一的命名規范定義命名的范圍,成為CSS ?class & id命名空間。
布局:?以語義化的單詞layout作為命名空間,例如主欄布局命名?layout_main,
只改變layout_命名空間后面的命名,layout始終保留。布局的命名空間為layout_xxx。
模塊:頁面是由一個或多個模塊組成,模塊的英文單詞是module,規范簡寫成mod,如新聞模塊mod_news,照片展示模塊mod_photo_show。模塊的命名空間為mod_xxx?。
元件:元件是屬于模塊內部的,也可以說模塊是由元件和它內部的自有元素組成。如用戶照片信息元件cell_user_photo。元件的命名空間為cell_xxx?。
?
3.4.?添加文檔樣式
1)?引用外部文件方式添加樣式
2)?嚴禁編寫標記內代碼,比如<div style="display:none;">就應該寫成<div class="hide">,然后在樣式表中去完成樣式代碼編寫。
3)?嚴禁在文檔中使用<style type="text/css"></style>代碼塊。
4)?分割樣式表,降低代碼復雜性,方便管理和維護。但不分割的太細碎,應考慮以后的維護和管理。
5)?如果是發布版本,請壓縮合并代碼,將多個樣式文件合并為單個文件,在線css代碼壓縮工具:http://www.csscompressor.com/
?
3.5.?屬性簡寫
為了節省字節數及文件大小,以下屬性請使用簡寫方式:
padding: top right bottom left;
margin: top right bottom left;
border: style width color;
border-top: style width color;
border-right: style width color;
border-bottom: style width color;
border-left: style width color;
border-color: top right bottom left;
border-style: top right bottom left;
border-width: top right bottom left;
background: color url(image) repeat position;
list-style: type position url(image);
font-weight: 400 / 700;
?
3.6.?縮寫16進制色值
color和background-color的屬性值如果使用的是16進制色值,當6個數字兩兩相等時,請使用縮寫方式編寫,比如:#996600請縮寫為#960
?
3.7.?字體:
1)?全局定義字體:body{font: 12px arial, helvetica, sans-serif;?line-height: 1.5;}
2)?font-family:
a)?等寬字體組合:Arial, Helvetica, sans-serif;
b)?不等寬(寬扁)字體組合:?Verdana, Trebuchet MS, sans-serif;
c)?中文字體:除非內容文本需要,不推薦強制定義
?
3.8.?頁面采用固定流式布局,使用像素(px)固定元素尺寸。
?
3.9.?編寫兼容的CSS代碼
1)?頁面必須在ie6~8、firefox、opera、safari、chrome下顯示兼容;
2)?不使用IE有條件注釋方式,對某一版本瀏覽器編寫額外的樣式表;
針對某一版本瀏覽器編寫額外的樣式表,會對維護和管理照成困難。如出現有顯示不兼容現象應首先考慮代碼是否有問題(如屬性是否對當前瀏覽器支持),必須編寫與常用瀏覽器都兼容的代碼;
不推薦的引用方式:
<!--[if IE 6]>
<link type="text/css" rel="stylesheet" href="ie6.css" />
<![endif]-->
<!--[if lte ie 7]>
<link type="text/css" rel="stylesheet" href="ie7.css" />
<![endif]-->
3)?不要使用!important或下劃線等招數編寫代碼。
?
3.10.?添加必須的注釋
可根據全局、布局、區塊、功能等進行分類和添加注釋,方便維護和代碼搜索。
?
3.11.?CSS?通用命名
(1)頁面框架命名,一般具有唯一性,推薦用ID命名
| ID名稱 | 命名 | ID名稱 | 命名 |
| 頭部 | header | 主體 | main |
| 腳部 | footer | 容器 | wrapper |
| 側欄 | side_bar | 欄目 | column |
| 布局 | layout | ? | ? |
?
(2)模塊結構命名
| CLASS名稱 | 命名 | CLASS名稱 | 命名 |
| 模塊(如:新聞模塊) | mod?(mod_news) | 標題欄 | title |
| 內容 | content | 次級內容 | sub_content |
?
(2)導航結構命名
| CLASS名稱 | 命名 | CLASS名稱 | 命名 |
| 導航 | nav | 主導航 | main_nav |
| 子導航 | sub_nav | 頂部導航 | top_nav |
| 菜單 | menu | 子菜單 | sub_menu |
?
(3)一般元素命名
| CLASS名稱 | 命名 | CLASS名稱 | 命名 |
| 二級 | sub | 面包屑 | breadcrumb |
| 標志 | logo | 廣告 | Bner (禁用banner或ad) |
| 登陸 | login | 注冊 | regsiter/reg |
| 搜索 | search | 加入 | join |
| 狀態 | status | 按鈕 | btn |
| 滾動 | scroll | 標簽頁 | tab |
| 文章列表 | list | 短消息 | msg/message |
| 當前的 | current | 提示小技巧 | tips |
| 圖標 | icon | 注釋 | note |
| 指南 | guide | 服務 | service |
| 熱點 | hot | 新聞 | news |
| 下載 | download | 投票 | vote |
| 合作伙伴 | partner | 友情鏈接 | link |
| 版權 | copyright | 演示 | demo |
| 下拉框 | select | 摘要 | summary |
| 翻頁 | pages | 主題風格 | themes |
| 設置 | set | 成功 | suc |
| 按鈕 | btn | 文本 | txt |
| 顏色 | color/c | 背景 | bg |
| 邊框 | border/bor | 居中 | center |
| 上 | top/t | 下 | bottom/b |
| 左 | left/l | 右 | right/r |
| 添加 | add | 刪除 | del |
| 間隔 | sp | 段落 | p |
| 彈出層 | pop | 公共 | global/gb |
| 操作 | op | 密碼 | pwd |
| 透明 | tran | 信息 | info |
| 重點 | hit | 預覽 | pvw |
| 單行輸入框 | input | 首頁 | index |
| 日志 | blog | 相冊 | photo |
| 留言板 | guestbook | 用戶 | user |
| 確認 | confirm | 取消 | cancel |
| 報錯 | error | ?輪播(走馬燈) | ?carousel |
| 插件(項目外和js.css等平級的文件夾) | plugIn | ?工具 | ?tool |
?
?
1)?背景圖片:bg001,bg002,bg003……
2)?一般圖片:img001,img002,img003……
3)?特定圖片:如banner,logo按照具體情況命名
4)?按鈕圖片:btn_submit,btn_cancel…….
?
5.1.?在文檔中引用js
1)?使用外部文件方式引用js;
2)?將引用js的代碼集中放置在一起,可放置在</head>之前或</body>之前,嚴禁在body間分散放置;
3)?使DOM結構和js代碼分離,禁止寫在標記內部;
4)?如果是發布版本,請將多個穩定版本的js文件壓縮、歸類放置到單個文件內,壓縮和最小化js文件,在線packer壓縮工具:http://dean.edwards.name/packer/。
?
5.2.?不直接操作DOM樣式,使用已在樣式表中定義的class來操作DOM樣式
?
5.3.?DOM加載
把需要在DOM加載后立即執行的代碼封裝在同一個函數內執行,不要編寫多個window.onload事件或jQuery的ready()事件。
?
5.4.?嚴禁使用多個library庫
?
5.5.?優化jQuery代碼,提高性能:
1)?選擇器從最近的ID開始繼承或直接使用ID選擇器:$(”#id tag”);
2)?選擇器在使用class前加上標簽名:$(”span.span1”);
3)?盡量使用ID選擇器代替class;
4)?要獲取子元素請使用子選擇器,而不要使用后代選擇器:$(”#id > span”);
5)?緩存jQuery對象,不要在代碼中重復出現相同的選擇器:var btn=$(”#id”);
6)?使用data()存儲臨時變量;
7)?限制直接操作DOM,在更新DOM前應該準備好需要的東西;
8)?避免使用live()方法綁定事件;
9)?在父級元素監聽事件,對目標元素進行操作:
$(”#id”).click(function(e){var input=$(e.target);});
10)?推遲加載拖放、動畫、視覺特效等代碼,把可能會影響頁面加載速度的代碼綁定到$(window).load()事件中。
轉載于:https://www.cnblogs.com/llqwm/p/10024595.html
總結
以上是生活随笔為你收集整理的html:web前端开发规范的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 《软件工程导论》复习知识点总结
- 下一篇: 网络4 交换机终端命令