我的願景
成為業內知名的web前端開發工程師
整理一些前端開發規範文檔
這份文檔已經寫了差不多一年了，最近也更新過了，作為一個有組織和紀律的團隊，規範是必須的，畢竟每個coder都有自己的一套風格和規範，為了以後團隊的和諧發展，結合前端業界的開發經驗，故而寫出了一個相對是大而簡潔的文檔，希望能夠對你也有所啟發。下面簡要的摘錄我的文件，詳細的可以在本文底部下載PDF文檔。
第一部分：檔案規格
1. tpl, css, js, img檔案均歸檔至<系統開發規範>約定的目錄中;
2. tpl檔案命名: 英文命名, 尾碼.html,請重新命名與php檔案同名, 以方便後端添加功能時尋找對應頁面;
3. css檔案命名: 英文命名, 尾碼.css. 共用base.css, 首頁index.css, 其他頁面依實際模組需求命名.;
4. Js檔案命名: 英文命名, 尾碼.js. 共用common.js, 其他依實際模組需求命名.
第二部分：HTML書寫規範
1. 文件類型聲明及編碼: 統一為html5宣告類型; 編碼統一為, 書寫時利用IDE實現層次分明的縮排;
2. 非特殊情況下樣式檔案必須外鏈至<head></head>之間;非特殊情況下JavaScript檔案必須外鏈至頁面底部;
3 引入JS庫檔案, 檔案名稱須包含庫名稱及版本號碼及是否為壓縮版, 比如jquery-1.7.1.min.js; 引入外掛程式, 檔案名稱格式為庫名稱+外掛程式名稱, 比如jQuery.cookie.js;
4. 所有編碼均遵循xhtml標準, 標籤 & 屬性 & 屬性命名 必須由小寫字母及底線數字組成, 且所有標籤必須閉合; 屬性值必須用雙引號包括;
5. 充分利用無相容性問題的html自身標籤, 比如span, em, strong, optgroup, label,等等; 需要為html元素添加自訂屬性的時候, 首先要考慮下有沒有預設的已有的合適標籤去設定, 如果沒有, 可以使用須以”data-”為首碼來添加自訂屬性，避免使用”data:”等其他命名方式;
6. 語義化html, 如 標題根據重要性用h(同一頁面只能有一個h1), 段落標記用p, 列表用ul, 內嵌元素中不可嵌套區塊層級元素;
7. 儘可能減少div嵌套
8. 書寫連結地址時, 必須避免重新導向，例如：href=”http://www.example.com/”, 即須在URL地址後面加上“/”；
9. 在頁面中盡量避免使用style屬性,即style=”…”，應該盡量使用class或者id來定義新的樣式，然後再對應的css檔案裡面修改;
一、 網頁製作細節
---- head區代碼規範
head區是指HTML代碼的<head>和</head>之間的內容。
必須加入的標籤：
•公司著作權注釋 <!--- The site is designed by EHM,Inc 07/2005 --->；
•網頁顯示字元集。
簡體中文：<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=gb2312">
繁體中文：<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">
英 語：<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">
•網頁製作者資訊 <META name="author" content="webmaster@maketown.com">
•網站簡介 <META NAME="DESCRIPTION" CONTENT="xxxxxxxxxxxxxxxxxxxxxxxxxx">
•搜尋索引鍵 <META NAME="keywords" CONTENT="xxxx,xxxx,xxx,xxxxx,xxxx,">
• 網頁的css規範 <LINK href="../css/style.css" rel="stylesheet" type="text/css">
•網頁標題 <title>xxxxxxxxxxxxxxxxxx</title>
可以選擇加入的標籤：
•設定網頁的到期時間。一旦網頁到期，必須到伺服器上重新調閱。
<META HTTP-EQUIV="expires" CONTENT="Wed, 26 Feb 1997 08：21：57 GMT">
•禁止瀏覽器從本地機的緩衝中調閱頁面內容。
<META HTTP-EQUIV="Pragma" CONTENT="no-cache">
•用來防止別人在架構裡調用你的頁面。
<META HTTP-EQUIV="Window-target" CONTENT="_top">
•自動跳轉。
<META HTTP-EQUIV="Refresh" CONTENT="5;URL=http：//www.yahoo.com"> 5指時間停留5秒
•網頁搜尋機器人嚮導。用來告訴搜尋機器人哪些頁面需要索引，哪些頁面不需要索引。
<META NAME="robots" CONTENT="none">CONTENT的參數有all,none,index,noindex,follow,nofollow。預設是all。
•收藏夾表徵圖 www.111cn.net
<link rel = "Shortcut Icon" href="favicon.ico">
•所有的javascript的調用盡量採取外部調用。
<SCRIPT LANGUAGE="JavaScript" SRC="script/xxxxx.js"></SCRIPT>
•附<body>標籤：
<body>標籤不屬於head區，這裡強調一下，為了保證瀏覽器的相容性，必須設定頁面背景<body bgcolor="#FFFFFF">
二、網頁製作細節 ---- 字型
•在設定字型樣式時對於文字字型大小樣式和行間距應必須使用CSS樣式表。禁止在頁面中出現 <font size=?> 標記。
•在網頁中中文應首選使用宋體。英文和數字首選使用verdana 和arial 兩種字型。一般使用中文宋體的9pt 和11pt 或12px 和14.7px 這是經過最佳化的字型大小，黑體字或者宋體字加粗時，一般選用11pt 和14.7px 的字型大小比較合適。
•為了最大程度的發揮瀏覽器自動排版的功能，在一段完整的文字中請盡量不要使用<br> 來人工幹預分段。
•不同語種的文字之間應該有一個半形空格，但避頭的符號之前和避尾的符號之後除外，漢字之間的標點要用全形標點，英文字母和數字周圍的括弧應該使用半形括弧。
•請不要在網頁中連續出現多於一個的 也盡量少使用全形空格（英文字元集下，全形空格會變成亂碼），空白應該盡量使用 text-indent, padding, margin, hspace, vspace 以及透明的gif 圖片來實現。
•行距建議用百分比來定義，常用的兩個行距的值是line-height:120%/150%.
•排版中我們經常會遇到需要進行首行縮排的處理，不要使用 或者全形空格來達到效果，規範的做法是在樣式表中定義 p { text-indent: 2em; } 然後給每一段加上 <p> 標記，注意，一般情況下，請不要省略 </p> 結束標記 。
三、網頁製作細節 ---- 連結
•網站中的連結路徑全部採用相對路徑，一般連結到某一目錄下的預設檔案的連結路徑不必寫全名，如我們不必這樣：<a href=”aboutus/index.htm”> 而應該這樣：<a href=”aboutus/”>，所有內頁指向首頁的連結寫成<a href=”/”>
•在瀏覽器裡，當我們點擊空連結時，它會自動將當前頁面重設到首端，從而影響使用者正常的閱讀內容，我們用代碼“javascript:void(null)”代替原來的“#”標記
四、網頁製作細節 ---- 表格
1px表格 style="border-collapse: collapse"
執行個體如下：
<table border="1" cellspacing="0" width="32" height="32" style="border-collapse: collapse" bordercolor="#000000" cellpadding="0">
<tr>
<td></td>
</tr>
</table>
設定亮、暗邊框顏色：表格有亮邊框（bordercolorlight）和暗邊框（bordercolordark）兩個屬性可以對錶格樣式設定。
<table border="1" width="500" bordercolorlight="#000000" bordercolordark="#FFFFFF">
在寫 <table> 互相嵌套時，嚴格按照的規範，對於單獨的一個<table>來說，<table><tr>對齊，<td> 縮排兩個半形空格，<td> 中如果還有嵌套的表格，<table>也縮排兩個半形空格，如果<td>中沒有任何嵌套的表格，</td> 結束標記應該與 <td> 處於同一行，不要換行，如我們注意在原始碼中不應有這樣的代碼：
<td><img src=”../images/sample.gif”> </td>
而應該是這樣的：
<td><img src=”../images/sample.gif”></td>
這是因為瀏覽器認為換行相當於一個半形空格，以上不規範的寫法相當於無意中增加一個半形空格，如果確實有必要增加一個半形空格，也應該這樣寫：
<td><img src=”../images/sample.gif”> </td>
一個網頁要盡量避免用整個一張大表格，所有的內容都嵌套在這個大表格之內，因為瀏覽器在解釋頁面的元素時，是以表格為單位逐一顯示，如果一張網頁是嵌套在一個大表格之內，那麼很可能造成的後果就是，當瀏覽者敲入網址，他要先面對一片空白很長時間，然後所有的網頁內容同時出現。如果必須這樣做，請使用 <tbody>標記，以便能夠使這個大表格分塊顯示
五、網頁製作細節 ---- 下載速度
首頁Flash 網頁大小應限定在 200K 以下，儘可能的使用向量圖形和Action來減小動畫大小。非首頁靜態頁面含圖片大小應限定在 70K 左右，儘可能的使用背景顏色替換大塊同色圖片。
六、網頁製作細節 ---- include
asp標準寫法：<!--#include file="inc/index_top.asp" -->
jsp 標準寫法：<%@ include file="../inc/index_top..jsp" %>
七、網頁製作細節 ---- Alt和Title
都是提示性語言標籤，請注意它們之間的區別。
在我們瀏覽網頁時，當滑鼠停留在圖片對象或文字連結上時，在滑鼠的右下角有時會出現一個提示資訊框。對目標進行一定的注釋說明。在一些場合，它的作用是很重要的。
alt 用來給圖片來提示的。Title用來給連結文字或普通文字提示的。用法如下：
<p Title="給連結文字提示">文字</p>
<a href="#" Title="給連結文字提示">文字</a>
<img src="圖片.gif" alt="給圖片提示">
八、網頁製作細節 ---- 緩衝
網頁不會被緩衝
•HTM網頁
<META HTTP-EQUIV="pragma" CONTENT="no-cache">
<META HTTP-EQUIV="Cache-Control" CONTENT="no-cache, must-revalidate">
<META HTTP-EQUIV="expires" CONTENT="0">
•ASP網頁
Response.Expires = -1
Response.ExpiresAbsolute = Now() - 1
九、網頁製作細節 ---- 瀏覽器安全色性
建立網站時，應該明白訪問者可能使用各種 網頁瀏覽器。在已知的其他設計限制下，儘可能將網站設計為具有最大的瀏覽器安全色性。
目前使用的 網頁瀏覽器有二十多種，大多數已發行了多個版本。即使您只針對使用 Netscape Navigator 和 Microsoft Internet Explorer 的大多數 Web 使用者，但您應明確並不是每個人都在使用這兩種瀏覽器的最新版本。
您的網站越複雜（在布局、動畫、多媒體內容和互動方面），跨瀏覽器安全色的可能性就越小。例如，並非所有的瀏覽器都可以運行JavaScript。不使用特殊字元的純文字頁面或許能夠在任何瀏覽器中正確顯示，但比起有效地使用圖形、布局和互動的頁面，這樣的頁面在美感上可能要差得多。所以，應盡量在最佳效果設計和最大瀏覽器安全色性設計之間取得平衡。
所有的HTML 標籤的屬性都要用單引號或者雙引號括起，即我們應該寫 <a href=”url”> 而不 是 <a href=url>.
十、圖片處理細節 ---- banner
•全尺寸banner為468X60px，半尺寸banner為234X60px，小banner為88X31px。
•另外120X90，120X60也是小表徵圖的標準尺寸。全尺寸banner不超過14K。
•普遍的banner尺寸760X100，750X120，468X60，468X95，728X90，585X140
•次級頁的pip尺寸360X300，336X280
•遊標:100X100或120X120
十一、圖片處理細節 ---- LOGO的國際標準規範
為了便於INTERNET上資訊的傳播，一個統一的國際標準是需要的。實際上已經有了這樣的一整套標準。其中關於網站的LOGO，目前有三種規格：
•88*31 這是互連網上最普遍的LOGO規格。
•120*60 這種規格用於一般大小的LOGO。
•120*90 這種規格用於大型LOGO。
十二、圖片處理細節 ---- 頁面修飾圖片處理
圖片經過最佳化以加快下載的速度,有較佳的視覺空間效果，用圖要與頁面風格、頁面內容相符；製作精美，細節處理得當
第三部分：CSS規範
1. 編碼統一為utf-8;
2.公用檔案：協作開發過程中，會引入預設的base.css(裡麵包括了css reset、常用的css間距，css字型，css大小等，詳細參見base.css)；
3. class與id命名: ,樣式名稱由 小寫英文 、 數字 和 _ 來組合命名, 如i_comment, fontred, width200; 避免使用中文拼音, 盡量使用簡易的單片語合；命名要語義化, 簡明化。
4. 為JavaScript預留鉤子的命名, 盡量使用id屬性，可以更快的擷取到dom。
5. 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; 我所列出的這些屬性只是最常用到的, 並不代表全部;
6. 書寫代碼前, 考慮並提高樣式重複使用率;
7. 背景圖片請儘可能使用sprite技術, 減小http請求, 考慮到多人協作開發, sprite按模組製作;
8. 必須為大區塊樣式添加註釋, 小區塊適量注釋;
9. 代碼縮排與格式: 建議單行書寫, 可根據自身習慣, 後期最佳化會統一處理;
常用的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;
另, 要求變數集中聲明, 避免全域變數.
4. 類命名: 首字母大寫, 駝峰式命名. 如 ITaoLun;
5. 函數命名: 首字母小寫駝峰式命名. 如iTaoLun();
6. 命名語義化, 儘可能利用英文單詞或其縮寫;
7. 盡量避免使用存在相容性及消耗資源的方法或屬性, 比如eval_r() & innerText;
8. 後期最佳化中, JavaScript非注釋類中文字元須轉換成unicode編碼使用, 以避免編碼錯誤時亂碼顯示;
9. 代碼結構明了, 加適量注釋. 提高函數重用率;
10. 注重與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注釋, 單行注釋使用’//這兒是單行注釋’ ,多行注釋使用 ;/**/
第七部分：開發及測試載入器約定（見文檔，下同）
第八部分：其他規範
第九部分：瀏覽器css hack
文檔說明
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
