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 交换机终端命令