Web前端開發規範手冊

　規範目的

　　為提高團隊協作效率, 便於後臺人員新增功能及前端後期優化維護, 輸出高質量的文件, 特制訂此文件。

　檔案規範

　　檔案命名規則

檔名稱統一用小寫的英文字母、數字和下劃線的組合，其中不得包含漢字、空格和特殊字元；命名原則的指導思想一是使得你自己和工作組的每一個成員能夠方便的理解每一個檔案的意義，二是當我們在資料夾中使用“按名稱排例”的命令時，同一種大類的檔案能夠排列在一起，以便我們查詢、修改、替換、計算負載量等等操作。

　　HTML的命名原則

　　主頁統一使用index.htm、index.html或index.asp檔名（小寫）

　　各子頁命名的原則首先應該以欄目名的英語翻譯取單一單詞為名稱。例如：

關於我們 --> aboutus 
資訊反饋 --> feedback 
產品 --> product

　　如果欄目名稱多而複雜並不好以英文單詞命名，則統一使用該欄目名稱拼音或拼音的首字母表示；

　　每一個目錄中應該包含一個預設的html 檔案，檔名統一用index.htm、index.html或index.asp；

　　圖片的命名原則

　　圖片的名稱分為頭尾兩部分，用下劃線隔開，頭部分表示此圖片的大類性質

　　例如：廣告、標誌、選單、按鈕等等。

　　放置在頁面頂部的廣告、裝飾圖案等長方形的圖片取名： banner

　　標誌性的圖片取名為： logo

　　在頁面上位置不固定並且帶有連結的小圖片我們取名為 button

　　在頁面上某一個位置連續出現，性質相同的連結欄目的圖片我們取名： menu

　　裝飾用的照片我們取名： pic

　　不帶連結表示標題的圖片我們取名： title

　　範例：banner_sohu.png、banner_sina.png、menu_aboutus.png、menu_job.png、title_news.png、logo_police.png、 logo_national.png、pic_people.png

　　滑鼠感應效果圖片命名規範為"圖片名+_+on/off"。

　　例如：menu1_on.png、menu1_off.png

　　javascript的命名原則

　　例如：廣告條的javascript檔名為 ad.js 彈出視窗的javascript檔名為 pop.js

　　動態語言檔案命名原則

　　以性質_描述，描述可以有多個單詞，用“_”隔開，性質一般是該頁面得概要。

　　範例：register_form.asp、register_post.asp、topic_lock.asp

　　檔案存放位置規範

    //專案目錄(都不是必須存在的目錄)
    cn    存放中文HTML檔案
    en    存放英文HTML檔案
    flash    存放Flash檔案
    images    存放圖片檔案
    imagestudio    存放PSD原始檔
    flashstudio    存放flash原始檔
    inc    存放include檔案
    library    存放庫檔案
    media    存放多媒體檔案
    project    存放工程專案資料
    temp    存放客戶原始資料
    js    存放JavaScript指令碼
    css    存放CSS檔案

---

　CSS書寫規範

　　基本原則：

　　CSS樣式可細分為3類：自定義樣式、重新定義HTML樣式、連結狀態樣式。

1. 自定義樣式為設計師自定義的新CSS樣式，影響被使用本樣式的區域，用於完成網頁中區域性的樣式設定。樣式名為“.”+“相應樣式效果描述的單詞或縮寫”，例： .shadow，文字樣式樣式名為“.word”+“字號”+“行距”+“顏色縮寫”，例：.word12、.word12-24、.word12-24-red
2. 重新定義HTML樣式為設計師重新定義已有的HTML標籤樣式，影響全部的被設定標籤樣式，用於統一網頁中某一標籤的樣式定義。樣式名為HTML標籤，例：hr { border: 1px dotted #333333 }
3. 連結狀態樣式為設計師對連結不同狀態設定特殊樣式，影響被使用本樣式區域中的連結，該樣式寫法有2種：a.nav:link、nav.a:link，第一種只能修飾<a>標籤中；第二種可以修飾所有包含有<a>標籤的其他標籤。

頁面內的樣式載入必須用連結方式<link rel="stylesheet" type="text/css" href="xxx/xxx.css">

　　注意細則：

1. 協作開發及分工: Me(前端負責人，主開發人員，以下簡稱Me)會根據各個模組, 同時根據頁面相似程式, 事先寫好大體框架檔案, 分配給前端人員實現內部結構、表現、行為; 共用css檔案base.css由Me書寫, 協作開發過程中, 每個頁面請務必都要引入, 此檔案包含reset及頭部底部樣式, 此檔案不可隨意修改;
2. class與id的使用: id是唯一的並是父級的, class是可以重複的並是子級的, 所以id僅使用在大的模組上, class可用在重複使用率高及子級中; id原則上都是由Me分發框架檔案時命名的, 為JavaScript預留鉤子的除外;
3. 為JavaScript預留鉤子的命名, 請以js_起始, 比如:js_hide、js_show;
4. class與id命名: 大的框架命名比如header/footer/wrapper/left/right之類的在 2 中由Me統一命名.其他樣式名稱由 小寫英文、數字、_來組合命名(不能以數字開頭), 如i_comment, fontred, width200; 避免使用中文拼音, 儘量使用簡易的單片語合; 總之, 命名要語義化, 簡明化.

5. 規避class與id命名(此條重要, 請及時與Me溝通):
   a、 通過從屬寫法規避, 示例見d;
   b、 取父級元素id/class命名部分命名, 示例見d;
   c、 重複使用率高的命名, 請以自己代號加下劃線起始, 比如Me_clear;
   d、 a,b兩條, 適用於在 2 中已建好框架的頁面, 如, 要在 2 中已建好框架的頁面程式碼<div id="mainnav"></div>中加入新的div元素:

   //按a命名法則
   <div id="mainnav"><div class="firstnav">...</div></div>
   //樣式寫法
   #mainnav  .firstnav{.......}
   //按b命名法則
   <div id="mainnav"><div class="main_firstnav">...</div></div> 
   //樣式寫法
   .main_firstnav{.......}

6. css屬性書寫順序, 建議遵循佈局定位屬性-->自身屬性-->文字屬性-->其他屬性. 此條可根據自身習慣書寫, 但儘量保證同類屬性寫在一起. 屬性列舉: 佈局定位屬性主要包括: margin、padding、float（包括clear）、position（相應的 top,right,bottom,left）、display、visibility、overflow等；自身屬性主要包括: width、height、background、border; 文字屬性主要包括：font、color、text-align、text-decoration、text-indent等；其他屬性包括: list-style(列表樣式)、vertical-align、cursor、z-index(層疊順序) 、zoom等，所列出的這些屬性只是最常用到的, 並不代表全部;
7. 書寫程式碼前, 考慮並提高樣式重複使用率;
8. 充分利用html自身屬性及樣式繼承原理減少程式碼量, 比如:<ul class="list"><li>這兒是標題列表<span>2010-09-15</span></ul>，定義ul.list li{position:relative} ul.list li span{position:absolute; right:0}，即可實現日期居右顯示。
9. 樣式表中中文字型名, 請務必轉碼成unicode碼, 以避免編碼錯誤時亂碼;
10. 背景圖片請儘可能使用sprite技術, 減小http請求, 考慮到多人協作開發, sprite按模組製作;
11. 使用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, table td{padding:0;}, 一般base.css檔案中Me會初始化表格樣式)
12. 用png圖片做圖片時, 要求圖片格式為png-8格式,若png-8實在影響圖片質量或其中有半透明效果, 請為ie6單獨定義背景:background:none;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=crop, src=’img/bg.png’);
13. 避免相容性屬性的使用, 比如text-shadow、css3的相關屬性;
14. 減少使用影響效能的屬性, 比如position:absolute、float;
15. 必須為大區塊樣式新增註釋, 小區塊適量註釋;
16. 程式碼縮排與格式: 建議單行書寫, 可根據自身習慣, 後期優化Me會統一處理;

　　命名規則:

頭：header
內容：content/container
尾：footer
導航：nav
側欄：sidebar
欄目：column
頁面外圍控制整體佈局寬度：wrapper
左右中：left right center
登入條：loginbar
標誌：logo
廣告：banner
頁面主體：main
熱點：hot
新聞：news
下載：download
子導航：subnav
選單：menu
子選單：submenu
搜尋：search
友情連結：friendlink
頁尾：footer
版權：copyright
滾動：scroll
內容：content
標籤頁：tab
文章列表：list
提示資訊：msg
小技巧：tips
欄目標題：title
加入：joinus
指南：guild
服務：service
註冊：regsiter
狀態：status
投票：vote
合作伙伴：partner

　　註釋的寫法:

  /* Footer */
  內容區
  /* End Footer */

　　id的命名:

• 頁面結構
  容器: container
  頁頭：header
  內容：content container
  頁面主體：main
  頁尾：footer
  導航：nav
  側欄：sidebar
  欄目：column
  頁面外圍控制整體佈局寬度：wrapper
  左右中：left right center
• 導航
  導航：nav
  主導航：mainbav
  子導航：subnav
  頂導航：topnav
  邊導航：sidebar
  左導航：leftsidebar
  右導航：rightsidebar
  選單：menu
  子選單：submenu
  標題: title
  摘要: summary
• 功能
  標誌：logo
  廣告：banner
  登陸：login
  登入條：loginbar
  註冊：regsiter
  搜尋：search
  功能區：shop
  標題：title
  加入：joinus
  狀態：status
  按鈕：btn
  滾動：scroll
  標籤頁：tab
  文章列表：list
  提示資訊：msg
  當前的: current
  小技巧：tips
  圖示: icon
  註釋：note
  指南：guild
  服務：service
  熱點：hot
  新聞：news
  下載：download
  投票：vote
  合作伙伴：partner
  友情連結：link
  版權：copyright

　　基本樣式：

/* CSS Document */
body {margin:0; padding:0; font:12px "\5B8B\4F53",san-serif;background:#fff;}
div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,blockquote,p{padding:0; margin:0;}   
table,td,tr,th{font-size:12px;}
li{list-style-type:none;}
img{vertical-align:top;border:0;}
ol,ul {list-style:none;}
h1,h2,h3,h4,h5,h6 {font-size:12px; font-weight:normal;}
address,cite,code,em,th {font-weight:normal; font-style:normal;}
.fB{font-weight:bold;}
.f12px{font-size:12px;}
.f14px{font-size:14px;}
.left{float:left;}
.right{float:right;}
a {color:#2b2b2b; text-decoration:none;}
a:visited {text-decoration:none;}
a:hover {color:#ba2636;text-decoration:underline;}
a:active {color:#ba2636;}

//重定義的最先，偽類其次，自定義最後，便於自己和他人閱讀！

中英文混排時，我們儘可能的將英文和數字定義為verdana 和 arial 兩種字型。

---

　HTML書寫規範

　　head區程式碼規範

head區是指HTML程式碼的<head>和</head>之間的內容。

　　必須加入的標籤:

• 公司版權註釋 <!--- The site is designed by xxx 04/2018 --->

• 網頁顯示字符集

  簡體中文：<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="luozz@cmgos.com">
• 網站簡介 <META NAME="DESCRIPTION" CONTENT="xxxxxxxxxxxxxxxxxxxxxxxxxx">
• 搜尋關鍵字 <META NAME="keywords" CONTENT="xxxx,xxxx,xxx,xxxxx,xxxx,">
• 網頁的css規範 <LINK href="xxx/xxx.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.keyup.top">5指時間停留5秒
• 網頁搜尋機器人嚮導。用來告訴搜尋機器人哪些頁面需要索引，哪些頁面不需要索引。<META NAME="robots" CONTENT="none"> CONTENT的引數有all,none,index,noindex,follow,nofollow。預設是all。
• 收藏夾圖示 <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% line-height: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 
Response.cachecontrol = "no-cache"

　　瀏覽器相容性

建立站點時，應該明白訪問者可能使用各種 Web 瀏覽器。在已知的其他設計限制下，儘可能將站點設計為具有最大的瀏覽器相容性。
目前使用的 Web 瀏覽器有二十多種，大多數已發行了多個版本。即使您只針對使用 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。

　　頁面修飾圖片處理

圖片經過優化以加快下載的速度,有較佳的視覺空間效果，用圖要與頁面風格、頁面內容相符；製作精美，細節處理得當。

---

　JavaScript書寫規範

1. 書寫過程中, 每行程式碼結束必須有分號; 原則上所有功能均根據XXX專案需求原生開發, 以避免網上down下來的程式碼造成的程式碼汙染(沉冗程式碼 || 與現有程式碼衝突 || ...);
2. 庫引入: 原則上僅引入jQuery庫, 若需引入第三方庫, 須與團隊其他人員討論決定;
3. 變數命名: 駝峰式命名. 原生JavaScript變數要求是純英文字母, 首字母須小寫, 如iTaoLun; jQuery變數要求首字元為_, 其他與原生JavaScript 規則相同, 如: _iTaoLun; 另, 要求變數集中宣告, 避免全域性變數.
4. 類命名: 首字母大寫, 駝峰式命名. 如 ITaoLun;
5. 函式命名: 首字母小寫駝峰式命名. 如iTaoLun();
6. 命名語義化, 儘可能利用英文單詞或其縮寫;
7. 儘量避免使用存在相容性及消耗資源的方法或屬性, 比如eval() & innerText;
8. 後期優化中, JavaScript非註釋類中文字元須轉換成unicode編碼使用, 以避免編碼錯誤時亂碼顯示;
9. 程式碼結構明瞭, 加適量註釋. 提高函式重用率;
10. 注重與html分離, 減小reflow, 注重效能.

---

　圖片規範

1. 所有頁面元素類圖片均放入img資料夾, 測試用圖片放於img/demoimg資料夾;
2. 圖片格式僅限於gif || png || jpg;
3. 命名全部用小寫英文字母 || 數字 || _ 的組合，其中不得包含漢字 || 空格 || 特殊字元；儘量用易懂的詞彙, 便於團隊其他成員理解; 另, 命名分頭尾兩部分, 用下劃線隔開, 比如ad_left01.gif || btn_submit.gif;
4. 在保證視覺效果的情況下選擇最小的圖片格式與圖片質量, 以減少載入時間;
5. 儘量避免使用半透明的png圖片(若使用, 請參考css規範相關說明);
6. 運用css sprite技術集中小的背景圖或圖示, 減小頁面http請求, 但注意, 請務必在對應的sprite psd源圖中劃參考線, 並儲存至img目錄下.

---

　註釋規範

1. html註釋: 註釋格式 <!--這兒是註釋-->, '--'只能在註釋的始末位置,不可置入註釋文字區域;
2. css註釋: 註釋格式 /*這兒是註釋*/;
3. JavaScript註釋, 單行註釋使用//這兒是單行註釋 ,多行註釋使用 /* 這兒有多行註釋 */;

---

　瀏覽器相容性 CSS hack

　　一、標識區別：

　　區別IE6,IE7,IE8,FF。

1. IE都能識別*; 標準瀏覽器(如FF)不能識別*；
2. IE6能識別*，但不能識別!important; IE6在樣式前面加_
3. IE7能識別*，也能識別!important;
4. IE8能識別\9， 例如：background:red \9;
5. firefox不能識別*，但能識別!important;

1．IE6和firefox的區別：
background:orange;*background:blue;
意思就是火狐瀏覽器的背景顏色是橙色,而IE瀏覽器的背景色是藍色.

2.IE6和IE7的區別：
background:green !important;background:blue;
意思指的是:IE7的背景顏色是綠色,IE6的背景顏色是藍色

3.IE7和FF的區別：
background:orange; *background:green;
意思指的是:火狐瀏覽器的背景顏色是橙色,而IE7的背景顏色是綠色

4.FF，IE7，IE6的區別：
background:orange;*background:green !important;*background:blue;
意思是火狐瀏覽器的的背景橙色,IE7瀏覽器的背景顏色是綠色,而IE6瀏覽器的顏色是藍色.