Web前端開發規范

文件命名規則.........................................................................................................................

文件存放位置.........................................................................................................................

 css 書寫規范.........................................................................................................................

 html書寫規范........................................................................................................................

JavaScript書寫規范.............................................................................................................

 圖片規范...............................................................................................................................

 注釋規范................................................................................................................................

文件命名規則

    文件名稱統一用小寫的英文字母、數字和下划線的組合，其中不得包含漢字、空格和特殊字符；

　命名原則的指導思想:

　　　　一是每一個文件的名字有意義，

　　　　二是當我們在文件夾中使用“按名稱排例”的命令時，同一種大類的文件能夠排列在一起，以便我們查找、修改、替換、計算負載量等等操作。

a.  HTML的命名原則
　　引文件統一使用index.htm  index.html  index.asp文件名（小寫）
　　各子頁命名的原則首先應該以欄目名的英語翻譯取單一單詞為名稱。例如：
　　　　關於我們 \ aboutus
　　　　信息反饋 \ feedback
　　　　產 品 \ product

　　如果欄目名稱多而復雜並不好以英文單詞命名，則統一使用該欄目名稱拼音或拼音的首字母表示；
　　每一個目錄中應該包含一個缺省的html 文件，文件名統一用index.htm  index.html  index.asp；

b.  圖片的命名原則

　　圖片的名稱分為頭尾兩部分，用下划線隔開，頭部分表示此圖片的大類性質
　　　　例如：廣告、標志、菜單、按鈕等等。
　　　　- 放置在頁面頂部的廣告、裝飾圖案等長方形的圖片取名： banner
　　　　- 標志性的圖片取名為： logo
 　　　　- 在頁面上位置不固定並且帶有鏈接的小圖片我們取名為 button
　　　　- 在頁面上某一個位置連續出現，性質相同的鏈接欄目的圖片我們取名： menu
　　　　- 裝飾用的照片我們取名： pic

 　　　　- 不帶鏈接表示標題的圖片我們取名： title

范例：banner_sohu.gif  banner_sina.gif  menu_aboutus.gif  menu_job.gif  title_news.gif  logo_police.gif   logo_national.gif   pic_people.jpg
　　　　- 鼠標感應效果圖片命名規范為"圖片名+_+on/off"。
例如：menu1_on.gif  menu1_off.gif

 

c.  javascript的命名原則
例如：廣告條的javascript文件名為 ad.js  彈出窗口的javascript文件名為 pop.js

d.  動態語言文件命名原則
以性質_描述，描述可以有多個單詞，用“_”隔開，性質一般是該頁面得概要。
范例：register_form.asp   register_post.asp   topic_lock.asp

 

 

文件存放位置規范

 

_Root
	cn	存放中文HTML文件
	en	存放英文HTML文件
	flash	存放Flash文件
	images	存放圖片文件
	imagestudio	存放PSD源文件
	flashstudio	存放flash源文件
	inc	存放include文件
	library	存放DW庫文件
	media	存放多媒體文件
	project	存放工程項目資料
	temp	存放客戶原始資料
	js	存放JavaScript腳本
	css	存放CSS文件

 

CSS 書寫規范

 

基本原則：

 

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

1. 樣式為設計師自定義的新 CSS 樣式，影響被使用本樣式的區域，用於完成網頁中局部的樣式設定。

　　樣式名 “.”+“相應樣式效果描述的單詞或縮寫”例：“ .shadow ”
　　文字樣式樣式名“.no”+“字號”+“行距”+“顏色縮寫”例：“ .no12 ”、“ .no12-24 ”

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="style/style.css">

 

命名規則：

  頭：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的命名:

  (1)頁面結構

  容器: container

  頁頭：header

  內容：content/container

  頁面主體：main

  頁尾：footer

  導航：nav

  側欄：sidebar

  欄目：column

  頁面外圍控制整體布局寬度：wrapper

  左右中：left right center

 

  (2)導航

  導航：nav

  主導航：mainbav

  子導航：subnav

  頂導航：topnav

  邊導航：sidebar

  左導航：leftsidebar

  右導航：rightsidebar

  菜單：menu

  子菜單：submenu

  標題: title

  摘要: summary

 

  (3)功能

  標志：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;}

 

 

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

 

    不同瀏覽器上字號保持一致，字號建議用點數pt和像素px來定義，

pt一般使用中文宋體的9pt 和11pt，

px一般使用中文宋體12px 和14.7px 這是經過優化的字號，

黑體字或者宋體字加粗時，一般選用11pt 和14.7px 的字號比較合適。

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

 

 html 書寫規范

1. 1.          網頁制作細節 ---- head區代碼規范

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

必須加入的標簽

a)          公司版權注釋  <!--- The site is designed by EHM,Inc 07/2005 --->

b)         網頁顯示字符集

簡體中文：<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">

c)          網頁制作者信息  <META name="author" content="[e-mail]">

d)         網站簡介  <META NAME="DESCRIPTION" CONTENT="xxxxxxxxxxxxxxxxxxxxxxxxxx">

e)          搜索關鍵字  <META NAME="keywords" CONTENT="xxxx,xxxx,xxx,xxxxx,xxxx,">

f)          網頁的css規范  <LINK href="../css/style.css" rel="stylesheet" type="text/css">

g)         網頁標題  <title>xxxxxxxxxxxxxxxxxx</title>

可以選擇加入的標簽

a)          設定網頁的到期時間。一旦網頁過期，必須到服務器上重新調閱。

<META HTTP-EQUIV="expires" CONTENT="Wed, 26 Feb 1997 08：21：57 GMT">

b)         禁止瀏覽器從本地機的緩存中調閱頁面內容。

<META HTTP-EQUIV="Pragma" CONTENT="no-cache">

c)          用來防止別人在框架里調用你的頁面。

<META HTTP-EQUIV="Window-target" CONTENT="_top">

d)         自動跳轉。

<META HTTP-EQUIV="Refresh" CONTENT="5;URL=http：//www.yahoo.com">  5指時間停留5秒

e)          網頁搜索機器人向導。用來告訴搜索機器人哪些頁面需要索引，哪些頁面不需要索引。

<META NAME="robots" CONTENT="none">

CONTENT的參數有all,none,index,noindex,follow,nofollow。默認是all。

f)          收藏夾圖標  <link rel = "Shortcut Icon" href="favicon.ico">

g)         所有的javascript的調用盡量采取外部調用.

<SCRIPT LANGUAGE="JavaScript" SRC="script/xxxxx.js"></SCRIPT>

h)         附<body>標簽：

<body>標簽不屬於head區，這里強調一下，為了保證瀏覽器的兼容性，必須設置頁面背景<body bgcolor="#FFFFFF">

 

 

1. 2.          網頁制作細節 ---- 字體
   1. 在設定字體樣式時對於文字字號樣式和行間距應必須使用CSS樣式表。禁止在頁面中出現 <font size=?> 標記。
   
   2.在網頁中中文應首選使用宋體。英文和數字首選使用verdana 和arial 兩種字體。一般使用中文宋體的9pt 和11pt 或12px 和14.7px 這是經過優化的字號，黑體字或者宋體字加粗時，一般選用11pt 和14.7px 的字號比較合適。
   
   3. 為了最大程度的發揮瀏覽器自動排版的功能，在一段完整的文字中請盡量不要使用<br> 來人工干預分段。
   
   4.不同語種的文字之間應該有一個半角空格，但避頭的符號之前和避尾的符號之后除外，漢字之間的標點要用全角標點，英文字母和數字周圍的括號應該使用半角括號。
   
   5. 請不要在網頁中連續出現多於一個的   也盡量少使用全角空格（英文字符集下，全角空格會變成亂碼），空白應該盡量使用 text-indent, padding, margin, hspace, vspace 以及透明的gif 圖片來實現。
   
   6. 行距建議用百分比來定義，常用的兩個行距的值是line-height:120%/150%.
   
   7. 排版中我們經常會遇到需要進行首行縮進的處理，不要使用   或者全角空格來達到效果，規范的做法是在樣式表中定義 p { text-indent: 2em; } 然后給每一段加上 <p> 標記，注意，一般情況下，請不要省略 </p> 結束標記 。

 

 

1. 3.          網頁制作細節 ---- 鏈接
   1. 網站中的鏈接路徑全部采用相對路徑，一般鏈接到某一目錄下的缺省文件的鏈接路徑不必寫全名，如我們不必這樣：<a href=”aboutus/index.htm”> 而應該這樣：<a href=”aboutus/”>，所有內頁指向首頁的鏈接寫成<a href=”/”>
   
   2. 在瀏覽器里，當我們點擊空鏈接時，它會自動將當前頁面重置到首端，從而影響用戶正常的閱讀內容，我們用代碼“javascript:void(null)”代替原來的“#”標記
   
   
   

 

 

1. 4.          網頁制作細節 ---- 表格
   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>標記，以便能夠使這個大表格分塊顯示
   
   

 

 

1. 5.          網頁制作細節 ---- 下載速度
   首頁Flash 網頁大小應限定在 200K 以下，盡可能的使用矢量圖形和Action來減小動畫大小。非首頁靜態頁面含圖片大小應限定在 70K 左右，盡可能的使用背景顏色替換大塊同色圖片。

 

 

1. 6.          網頁制作細節 ---- include
   asp標准寫法 <!--#include file="inc/index_top.asp" -->
   jsp 標准寫法 <%@ include file="../inc/index_top..jsp" %>

 

 

1. 7.          網頁制作細節 ---- Alt和Title 
   都是提示性語言標簽，請注意它們之間的區別。 

在我們瀏覽網頁時，當鼠標停留在圖片對象或文字鏈接上時，在鼠標的右下角有時會出現一個提示信息框。對目標進行一定的注釋說明。在一些場合，它的作用是很重要的。

alt 用來給圖片來提示的。Title用來給鏈接文字或普通文字提示的。

用法如下：

<p Title="給鏈接文字提示">文字</p>

<a href="#" Title="給鏈接文字提示">文字</a>

<img src="圖片.gif" alt="給圖片提示">

1. 8.          網頁制作細節 ---- 緩存 

網頁不會被緩存

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"

1. 9.          網頁制作細節 ---- 瀏覽器兼容性
   創建站點時，應該明白訪問者可能使用各種 Web 瀏覽器。在已知的其他設計限制下，盡可能將站點設計為具有最大的瀏覽器兼容性。
   目前使用的 Web 瀏覽器有二十多種，大多數已發行了多個版本。即使您只針對使用 Netscape Navigator 和 Microsoft Internet Explorer 的大多數 Web 用戶，但您應明確並不是每個人都在使用這兩種瀏覽器的最新版本。
   您的站點越復雜（在布局、動畫、多媒體內容和交互方面），跨瀏覽器兼容的可能性就越小。例如，並非所有的瀏覽器都可以運行JavaScript。不使用特殊字符的純文本頁面或許能夠在任何瀏覽器中正確顯示，但比起有效地使用圖形、布局和交互的頁面，這樣的頁面在美感上可能要差得多。所以，應盡量在最佳效果設計和最大瀏覽器兼容性設計之間取得平衡。
   所有的HTML 標簽的屬性都要用單引號或者雙引號括起，即我們應該寫 <a href=”url”> 而不 是 <a href=url>.
   
   

 

 

1. 10.       圖片處理細節 ---- banner
   全尺寸banner為468X60px，半尺寸banner為234X60px，小banner為88X31px。
   另外120X90，120X60也是小圖標的標准尺寸。全尺寸banner不超過14K。
   普遍的banner尺寸760X100，750X120，468X60，468X95，728X90，585X140
   次級頁的pip尺寸360X300，336X280
   游標:100X100或120X120

 

 

1. 11.       圖片處理細節 ---- LOGO的國際標准規范
   為了便於INTERNET上信息的傳播，一個統一的國際標准是需要的。實際上已經有了這樣的一整套標准。其中關於網站的LOGO，目前有三種規格：
   88*31 這是互聯網上最普遍的LOGO規格。
   120*60 這種規格用於一般大小的LOGO。
   120*90 這種規格用於大型LOGO。

 

 

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

 

 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注釋, 單行注釋使用'//這兒是單行注釋' ,多行注釋使用 /* 這兒有多行注釋 */;