規(guī)范目的
為提高團(tuán)隊(duì)協(xié)作效率, 便于后臺(tái)人員添加功能及前端后期優(yōu)化維護(hù), 輸出高質(zhì)量的文檔, 特制訂此文檔捕发。
文件規(guī)范
文件命名規(guī)則
文件名稱統(tǒng)一用小寫的英文字母、數(shù)字和下劃線的組合上荡，其中不得包含漢字、空格和特殊字符馒闷；命名原則的指導(dǎo)思想一是使得你自己和工作組的每一個(gè)成員能夠方便的理解每一個(gè)文件的意義酪捡，二是當(dāng)我們在文件夾中使用“按名稱排例”的命令時(shí)，同一種大類的文件能夠排列在一起纳账，以便我們查找逛薇、修改、替換疏虫、計(jì)算負(fù)載量等等操作永罚。
HTML的命名原則
主頁統(tǒng)一使用index.htm啤呼、index.html或index.asp文件名（小寫）
各子頁命名的原則首先應(yīng)該以欄目名的英語翻譯取單一單詞為名稱。例如：

關(guān)于我們 --> aboutus
信息反饋 --> feedback
產(chǎn)品 --> product
如果欄目名稱多而復(fù)雜并不好以英文單詞命名呢袱，則統(tǒng)一使用該欄目名稱拼音或拼音的首字母表示官扣；
每一個(gè)目錄中應(yīng)該包含一個(gè)缺省的html 文件，文件名統(tǒng)一用index.htm羞福、index.html或index.asp惕蹄；

圖片的命名原則
圖片的名稱分為頭尾兩部分，用下劃線隔開治专，頭部分表示此圖片的大類性質(zhì)
例如：廣告卖陵、標(biāo)志、菜單张峰、按鈕等等泪蔫。
放置在頁面頂部的廣告、裝飾圖案等長方形的圖片取名： banner
標(biāo)志性的圖片取名為： logo
在頁面上位置不固定并且?guī)в墟溄拥男D片我們?nèi)∶麨?button
在頁面上某一個(gè)位置連續(xù)出現(xiàn)挟炬，性質(zhì)相同的鏈接欄目的圖片我們?nèi)∶?menu
裝飾用的照片我們?nèi)∶?pic
不帶鏈接表示標(biāo)題的圖片我們?nèi)∶?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
鼠標(biāo)感應(yīng)效果圖片命名規(guī)范為"圖片名+_+on/off"。
例如：menu1_on.png额湘、menu1_off.png

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

動(dòng)態(tài)語言文件命名原則
以性質(zhì)描述卿吐，描述可以有多個(gè)單詞，用“”隔開锋华，性質(zhì)一般是該頁面得概要嗡官。
范例：register_form.asp、register_post.asp毯焕、topic_lock.asp

文件存放位置規(guī)范
//項(xiàng)目目錄(都不是必須存在的目錄)
cn 存放中文HTML文件
en 存放英文HTML文件
flash 存放Flash文件
images 存放圖片文件
imagestudio 存放PSD源文件
flashstudio 存放flash源文件
inc 存放include文件
library 存放庫文件
media 存放多媒體文件
project 存放工程項(xiàng)目資料
temp 存放客戶原始資料
js 存放JavaScript腳本
css 存放CSS文件
CSS書寫規(guī)范
基本原則：

CSS樣式可細(xì)分為3類：自定義樣式衍腥、重新定義HTML樣式、鏈接狀態(tài)樣式纳猫。

自定義樣式為設(shè)計(jì)師自定義的新CSS樣式婆咸，影響被使用本樣式的區(qū)域，用于完成網(wǎng)頁中局部的樣式設(shè)定芜辕。樣式名為“.”+“相應(yīng)樣式效果描述的單詞或縮寫”尚骄，例： .shadow，文字樣式樣式名為“.word”+“字號”+“行距”+“顏色縮寫”侵续，例：.word12倔丈、.word12-24憨闰、.word12-24-red
重新定義HTML樣式為設(shè)計(jì)師重新定義已有的HTML標(biāo)簽樣式，影響全部的被設(shè)定標(biāo)簽樣式需五，用于統(tǒng)一網(wǎng)頁中某一標(biāo)簽的樣式定義起趾。樣式名為HTML標(biāo)簽，例：hr { border: 1px dotted #333333 }
鏈接狀態(tài)樣式為設(shè)計(jì)師對鏈接不同狀態(tài)設(shè)定特殊樣式警儒，影響被使用本樣式區(qū)域中的鏈接，該樣式寫法有2種：a.nav:link眶根、nav.a:link蜀铲，第一種只能修飾<a>標(biāo)簽中；第二種可以修飾所有包含有<a>標(biāo)簽的其他標(biāo)簽属百。
頁面內(nèi)的樣式加載必須用鏈接方式<link rel="stylesheet" type="text/css" href="xxx/xxx.css">
注意細(xì)則：

協(xié)作開發(fā)及分工: Me(前端負(fù)責(zé)人记劝，主開發(fā)人員，以下簡稱Me)會(huì)根據(jù)各個(gè)模塊, 同時(shí)根據(jù)頁面相似程序, 事先寫好大體框架文件, 分配給前端人員實(shí)現(xiàn)內(nèi)部結(jié)構(gòu)族扰、表現(xiàn)厌丑、行為; 共用css文件base.css由Me書寫, 協(xié)作開發(fā)過程中, 每個(gè)頁面請務(wù)必都要引入, 此文件包含reset及頭部底部樣式, 此文件不可隨意修改;
class與id的使用: id是唯一的并是父級的, class是可以重復(fù)的并是子級的, 所以id僅使用在大的模塊上, class可用在重復(fù)使用率高及子級中; id原則上都是由Me分發(fā)框架文件時(shí)命名的, 為JavaScript預(yù)留鉤子的除外;
為JavaScript預(yù)留鉤子的命名, 請以js_起始, 比如:js_hide、js_show;
class與id命名: 大的框架命名比如header/footer/wrapper/left/right之類的在 2 中由Me統(tǒng)一命名.其他樣式名稱由 小寫英文渔呵、數(shù)字怒竿、_來組合命名(不能以數(shù)字開頭), 如i_comment, fontred, width200; 避免使用中文拼音, 盡量使用簡易的單詞組合; 總之, 命名要語義化, 簡明化.
規(guī)避class與id命名(此條重要, 請及時(shí)與Me溝通):
a、 通過從屬寫法規(guī)避, 示例見d;
b扩氢、 取父級元素id/class命名部分命名, 示例見d;
c耕驰、 重復(fù)使用率高的命名, 請以自己代號加下劃線起始, 比如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{.......}
css屬性書寫順序, 建議遵循布局定位屬性-->自身屬性-->文本屬性-->其他屬性. 此條可根據(jù)自身習(xí)慣書寫, 但盡量保證同類屬性寫在一起. 屬性列舉: 布局定位屬性主要包括: margin录豺、padding朦肘、float（包括clear）、position（相應(yīng)的 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等后裸，所列出的這些屬性只是最常用到的, 并不代表全部;
書寫代碼前, 考慮并提高樣式重復(fù)使用率;
充分利用html自身屬性及樣式繼承原理減少代碼量, 比如:<ul class="list"><li>這兒是標(biāo)題列表<span>2010-09-15</span></ul>瑰钮，定義ul.list li{position:relative} ul.list li span{position:absolute; right:0}，即可實(shí)現(xiàn)日期居右顯示微驶。
樣式表中中文字體名, 請務(wù)必轉(zhuǎn)碼成unicode碼, 以避免編碼錯(cuò)誤時(shí)亂碼;
背景圖片請盡可能使用sprite技術(shù), 減小http請求, 考慮到多人協(xié)作開發(fā), sprite按模塊制作;
使用table標(biāo)簽時(shí)(盡量避免使用table標(biāo)簽), 請不要用width/height/cellspacing/cellpadding等table屬性直接定義表現(xiàn), 應(yīng)盡可能的利用table自身私有屬性分離結(jié)構(gòu)與表現(xiàn), 如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會(huì)初始化表格樣式)
用png圖片做圖片時(shí), 要求圖片格式為png-8格式,若png-8實(shí)在影響圖片質(zhì)量或其中有半透明效果, 請為ie6單獨(dú)定義背景:background:none;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=crop, src=’img/bg.png’);
避免兼容性屬性的使用, 比如text-shadow浪谴、css3的相關(guān)屬性;
減少使用影響性能的屬性, 比如position:absolute、float;
必須為大區(qū)塊樣式添加注釋, 小區(qū)塊適量注釋;
代碼縮進(jìn)與格式: 建議單行書寫, 可根據(jù)自身習(xí)慣, 后期優(yōu)化Me會(huì)統(tǒng)一處理;
命名規(guī)則:
頭：header
內(nèi)容：content/container
尾：footer
導(dǎo)航：nav
側(cè)欄：sidebar
欄目：column
頁面外圍控制整體布局寬度：wrapper
左右中：left right center
登錄條：loginbar
標(biāo)志：logo
廣告：banner
頁面主體：main
熱點(diǎn)：hot
新聞：news
下載：download
子導(dǎo)航：subnav
菜單：menu
子菜單：submenu
搜索：search
友情鏈接：friendlink
頁腳：footer
版權(quán)：copyright
滾動(dòng)：scroll
內(nèi)容：content
標(biāo)簽頁：tab
文章列表：list
提示信息：msg
小技巧：tips
欄目標(biāo)題：title
加入：joinus
指南：guild
服務(wù)：service
注冊：regsiter
狀態(tài)：status
投票：vote
合作伙伴：partner

注釋的寫法:
/* Footer /
內(nèi)容區(qū)
/ End Footer /
id的命名:
頁面結(jié)構(gòu)
容器: container
頁頭：header
內(nèi)容：content container
頁面主體：main
頁尾：footer
導(dǎo)航：nav
側(cè)欄：sidebar
欄目：column
頁面外圍控制整體布局寬度：wrapper
左右中：left right center
導(dǎo)航
導(dǎo)航：nav
主導(dǎo)航：mainbav
子導(dǎo)航：subnav
頂導(dǎo)航：topnav
邊導(dǎo)航：sidebar
左導(dǎo)航：leftsidebar
右導(dǎo)航：rightsidebar
菜單：menu
子菜單：submenu
標(biāo)題: title
摘要: summary
功能
標(biāo)志：logo
廣告：banner
登陸：login
登錄條：loginbar
注冊：regsiter
搜索：search
功能區(qū)：shop
標(biāo)題：title
加入：joinus
狀態(tài)：status
按鈕：btn
滾動(dòng)：scroll
標(biāo)簽頁：tab
文章列表：list
提示信息：msg
當(dāng)前的: current
小技巧：tips
圖標(biāo): icon
注釋：note
指南：guild
服務(wù)：service
熱點(diǎn)：hot
新聞：news
下載：download
投票：vote
合作伙伴：partner
友情鏈接：link
版權(quán)：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;}

//重定義的最先因苹，偽類其次苟耻，自定義最后，便于自己和他人閱讀扶檐！
中英文混排時(shí)凶杖，我們盡可能的將英文和數(shù)字定義為verdana 和 arial 兩種字體。
HTML書寫規(guī)范
網(wǎng)頁制作細(xì)節(jié)
head區(qū)代碼規(guī)范
head區(qū)是指HTML代碼的<head>和</head>之間的內(nèi)容款筑。
必須加入的標(biāo)簽:

公司版權(quán)注釋
網(wǎng)頁顯示字符集

簡體中文：<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">
網(wǎng)頁制作者信息 <META name="author" content="luozz@cmgos.com">
網(wǎng)站簡介 <META NAME="DESCRIPTION" CONTENT="xxxxxxxxxxxxxxxxxxxxxxxxxx">
搜索關(guān)鍵字 <META NAME="keywords" CONTENT="xxxx,xxxx,xxx,xxxxx,xxxx,">
網(wǎng)頁的css規(guī)范 <LINK href="xxx/xxx.css" rel="stylesheet" type="text/css">
網(wǎng)頁標(biāo)題 <title>xxxxxxxxxxxxxxxxxx</title>
可以選擇加入的標(biāo)簽:

設(shè)定網(wǎng)頁的到期時(shí)間智蝠。一旦網(wǎng)頁過期，必須到服務(wù)器上重新調(diào)閱奈梳。 <META HTTP-EQUIV="expires" CONTENT="Wed, 26 Feb 1997 08：21：57 GMT">
禁止瀏覽器從本地機(jī)的緩存中調(diào)閱頁面內(nèi)容杈湾。 <META HTTP-EQUIV="Pragma" CONTENT="no-cache">
用來防止別人在框架里調(diào)用你的頁面。<META HTTP-EQUIV="Window-target" CONTENT="_top">
自動(dòng)跳轉(zhuǎn)攘须。<META HTTP-EQUIV="Refresh" CONTENT="5;URL=http://www.keyup.top">5指時(shí)間停留5秒
網(wǎng)頁搜索機(jī)器人向?qū)亍Ｓ脕砀嬖V搜索機(jī)器人哪些頁面需要索引，哪些頁面不需要索引阻课。<META NAME="robots" CONTENT="none"> CONTENT的參數(shù)有all,none,index,noindex,follow,nofollow叫挟。默認(rèn)是all。
收藏夾圖標(biāo) <link rel = "Shortcut Icon" href="favicon.ico">
所有的javascript的調(diào)用盡量采取外部調(diào)用. <SCRIPT LANGUAGE="JavaScript" SRC="script/xxxxx.js"></SCRIPT>
附<body>標(biāo)簽： <body>標(biāo)簽不屬于head區(qū)限煞，這里強(qiáng)調(diào)一下抹恳，為了保證瀏覽器的兼容性，必須設(shè)置頁面背景<body bgcolor="#FFFFFF">
字體
在設(shè)定字體樣式時(shí)對于文字字號樣式和行間距應(yīng)必須使用CSS樣式表署驻。禁止在頁面中出現(xiàn) <font size=?> 標(biāo)記奋献。
在網(wǎng)頁中中文應(yīng)首選使用宋體。英文和數(shù)字首選使用verdana 和arial 兩種字體旺上。一般使用中文宋體的9pt 和11pt 或12px 和14.7px 這是經(jīng)過優(yōu)化的字號瓶蚂，黑體字或者宋體字加粗時(shí)，一般選用11pt 和14.7px 的字號比較合適宣吱。
為了最大程度的發(fā)揮瀏覽器自動(dòng)排版的功能窃这，在一段完整的文字中請盡量不要使用
來人工干預(yù)分段。
不同語種的文字之間應(yīng)該有一個(gè)半角空格征候，但避頭的符號之前和避尾的符號之后除外杭攻，漢字之間的標(biāo)點(diǎn)要用全角標(biāo)點(diǎn)祟敛，英文字母和數(shù)字周圍的括號應(yīng)該使用半角括號。
請不要在網(wǎng)頁中連續(xù)出現(xiàn)多于一個(gè)的空格兆解，也盡量少使用全角空格（英文字符集下馆铁，全角空格會(huì)變成亂碼），空白應(yīng)該盡量使用text-indent, padding, margin, hspace, vspace 以及透明的gif圖片來實(shí)現(xiàn)锅睛。
行距建議用百分比來定義埠巨，常用的兩個(gè)行距的值是line-height:120% line-height:150%。
排版中我們經(jīng)常會(huì)遇到需要進(jìn)行首行縮進(jìn)的處理现拒，不要使用空格或者全角空格來達(dá)到效果乖订，規(guī)范的做法是在樣式表中定義 p { text-indent: 2em; } 然后給每一段加上 <p> 標(biāo)記，注意具练，一般情況下，請不要省略 </p> 結(jié)束標(biāo)記 甜无。
鏈接
網(wǎng)站中的鏈接路徑全部采用相對路徑扛点，一般鏈接到某一目錄下的缺省文件的鏈接路徑不必寫全名，如我們不必這樣：<a href=”aboutus/index.htm”> 而應(yīng)該這樣：<a href=”aboutus/”>岂丘，所有內(nèi)頁指向首頁的鏈接寫成<a href=”/”>
在瀏覽器里陵究，當(dāng)我們點(diǎn)擊空鏈接時(shí)，它會(huì)自動(dòng)將當(dāng)前頁面重置到首端奥帘，從而影響用戶正常的閱讀內(nèi)容铜邮，我們用代碼javascript:void(null)代替原來的“#”標(biāo)記
表格
1px表格style="border-collapse: collapse"
實(shí)例如下：

<table border="1" cellspacing="0" width="32" height="32" style="border-collapse: collapse"
bordercolor="#000000" cellpadding="0">
<tr>
<td></td>
</tr>
</table>
設(shè)置亮、暗邊框顏色
表格有亮邊框（bordercolorlight）和暗邊框（bordercolordark）兩個(gè)屬性可以對表格樣式設(shè)置寨蹋。

<table border="1" width="500" bordercolorlight="#000000" bordercolordark="#FFFFFF">
在寫 <table> 互相嵌套時(shí)松蒜，嚴(yán)格按照的規(guī)范，對于單獨(dú)的一個(gè)<table>來說已旧，<table><tr>對齊秸苗，<td> 縮進(jìn)兩個(gè)半角空格，<td> 中如果還有嵌套的表格运褪，<table>也縮進(jìn)兩個(gè)半角空格惊楼，如果<td>中沒有任何嵌套的表格，</td> 結(jié)束標(biāo)記應(yīng)該與 <td> 處于同一行秸讹，不要換行檀咙，
如我們注意在源代碼中不應(yīng)有這樣的代碼：

<td><img src=”../images/sample.gif”>
</td>
而應(yīng)該是這樣的：

<td><img src=”../images/sample.gif”></td>
這是因?yàn)闉g覽器認(rèn)為換行相當(dāng)于一個(gè)半角空格，以上不規(guī)范的寫法相當(dāng)于無意中增加一個(gè)半角空格璃诀，如果確實(shí)有必要增加一個(gè)半角空格弧可，也應(yīng)該這樣寫：

<td><img src=”../images/sample.gif”> </td>
一個(gè)網(wǎng)頁要盡量避免用整個(gè)一張大表格，所有的內(nèi)容都嵌套在這個(gè)大表格之內(nèi)劣欢，因?yàn)闉g覽器在解釋頁面的元素時(shí)侣诺，是以表格為單位逐一顯示殖演，如果一張網(wǎng)頁是嵌套在一個(gè)大表格之內(nèi)，那么很可能造成的后果就是年鸳，當(dāng)瀏覽者敲入網(wǎng)址趴久，他要先面對一片空白很長時(shí)間，然后所有的網(wǎng)頁內(nèi)容同時(shí)出現(xiàn)搔确。如果必須這樣做彼棍，請使用 <tbody>標(biāo)記，以便能夠使這個(gè)大表格分塊顯示

下載速度
首頁Flash 網(wǎng)頁大小應(yīng)限定在 200K以下膳算，盡可能的使用矢量圖形和Action來減小動(dòng)畫大小座硕。非首頁靜態(tài)頁面含圖片大小應(yīng)限定在70K左右，盡可能的使用背景顏色替換大塊同色圖片涕蜂。
include
asp標(biāo)準(zhǔn)寫法
jsp標(biāo)準(zhǔn)寫法 <%@ include file="../inc/index_top.jsp" %>

Alt和Title
都是提示性語言標(biāo)簽华匾，請注意它們之間的區(qū)別。
在我們?yōu)g覽網(wǎng)頁時(shí)机隙，當(dāng)鼠標(biāo)停留在圖片對象或文字鏈接上時(shí)蜘拉，在鼠標(biāo)的右下角有時(shí)會(huì)出現(xiàn)一個(gè)提示信息框。對目標(biāo)進(jìn)行一定的注釋說明有鹿。在一些場合旭旭，它的作用是很重要的。
alt用來給圖片來提示的葱跋。title用來給鏈接文字或普通文字提示的持寄。
用法如下：

<p Title="給鏈接文字提示">文字</p>
<a href="#" Title="給鏈接文字提示">文字</a>
<img src="圖片.gif" alt="給圖片提示">
緩存
HTM網(wǎng)頁

<META HTTP-EQUIV="pragma" CONTENT="no-cache">
<META HTTP-EQUIV="Cache-Control" CONTENT="no-cache, must-revalidate">
<META HTTP-EQUIV="expires" CONTENT="0">
ASP網(wǎng)頁

Response.Expires = -1
Response.ExpiresAbsolute = Now() - 1
Response.cachecontrol = "no-cache"
瀏覽器兼容性
創(chuàng)建站點(diǎn)時(shí)，應(yīng)該明白訪問者可能使用各種 Web 瀏覽器娱俺。在已知的其他設(shè)計(jì)限制下稍味，盡可能將站點(diǎn)設(shè)計(jì)為具有最大的瀏覽器兼容性。
目前使用的 Web 瀏覽器有二十多種荠卷，大多數(shù)已發(fā)行了多個(gè)版本仲闽。即使您只針對使用 Netscape Navigator 和 Microsoft Internet Explorer 的大多數(shù) Web 用戶，但您應(yīng)明確并不是每個(gè)人都在使用這兩種瀏覽器的最新版本僵朗。
您的站點(diǎn)越復(fù)雜（在布局赖欣、動(dòng)畫、多媒體內(nèi)容和交互方面）验庙，跨瀏覽器兼容的可能性就越小顶吮。例如，并非所有的瀏覽器都可以運(yùn)行JavaScript粪薛。不使用特殊字符的純文本頁面或許能夠在任何瀏覽器中正確顯示悴了，但比起有效地使用圖形、布局和交互的頁面，這樣的頁面在美感上可能要差得多湃交。所以熟空，應(yīng)盡量在最佳效果設(shè)計(jì)和最大瀏覽器兼容性設(shè)計(jì)之間取得平衡。
所有的HTML 標(biāo)簽的屬性都要用單引號或者雙引號括起搞莺，即我們應(yīng)該寫<a href=”url”> 而不是 <a href=url>.
banner
全尺寸banner為468X60px息罗，半尺寸banner為234X60px，小banner為88X31px才沧。
另外120X90迈喉，120X60也是小圖標(biāo)的標(biāo)準(zhǔn)尺寸。全尺寸banner不超過14K温圆。
普遍的banner尺寸760X100挨摸，750X120，468X60岁歉，468X95得运，728X90，585X140
次級頁的pip尺寸360X300锅移，336X280
游標(biāo):100X100或120X120
LOGO的國際標(biāo)準(zhǔn)規(guī)范
為了便于INTERNET上信息的傳播熔掺，一個(gè)統(tǒng)一的國際標(biāo)準(zhǔn)是需要的。實(shí)際上已經(jīng)有了這樣的一整套標(biāo)準(zhǔn)帆啃。其中關(guān)于網(wǎng)站的LOGO，目前有三種規(guī)格：
8831 這是互聯(lián)網(wǎng)上最普遍的LOGO規(guī)格窍帝。
12060 這種規(guī)格用于一般大小的LOGO努潘。
12090 這種規(guī)格用于大型LOGO。
頁面修飾圖片處理
圖片經(jīng)過優(yōu)化以加快下載的速度,有較佳的視覺空間效果坤学，用圖要與頁面風(fēng)格疯坤、頁面內(nèi)容相符；制作精美深浮，細(xì)節(jié)處理得當(dāng)压怠。
JavaScript書寫規(guī)范
書寫過程中, 每行代碼結(jié)束必須有分號; 原則上所有功能均根據(jù)XXX項(xiàng)目需求原生開發(fā), 以避免網(wǎng)上down下來的代碼造成的代碼污染(沉冗代碼 || 與現(xiàn)有代碼沖突 || ...);
庫引入: 原則上僅引入jQuery庫, 若需引入第三方庫, 須與團(tuán)隊(duì)其他人員討論決定;
變量命名: 駝峰式命名. 原生JavaScript變量要求是純英文字母, 首字母須小寫, 如iTaoLun; jQuery變量要求首字符為_, 其他與原生JavaScript 規(guī)則相同, 如: _iTaoLun; 另, 要求變量集中聲明, 避免全局變量.
類命名: 首字母大寫, 駝峰式命名. 如 ITaoLun;
函數(shù)命名: 首字母小寫駝峰式命名. 如iTaoLun();
命名語義化, 盡可能利用英文單詞或其縮寫;
盡量避免使用存在兼容性及消耗資源的方法或?qū)傩? 比如eval() & innerText;
后期優(yōu)化中, JavaScript非注釋類中文字符須轉(zhuǎn)換成unicode編碼使用, 以避免編碼錯(cuò)誤時(shí)亂碼顯示;
代碼結(jié)構(gòu)明了, 加適量注釋. 提高函數(shù)重用率;
注重與html分離, 減小reflow, 注重性能.
圖片規(guī)范
所有頁面元素類圖片均放入img文件夾, 測試用圖片放于img/demoimg文件夾;
圖片格式僅限于gif || png || jpg;
命名全部用小寫英文字母 || 數(shù)字 || _ 的組合，其中不得包含漢字 || 空格 || 特殊字符飞苇；盡量用易懂的詞匯, 便于團(tuán)隊(duì)其他成員理解; 另, 命名分頭尾兩部分, 用下劃線隔開, 比如ad_left01.gif || btn_submit.gif;
在保證視覺效果的情況下選擇最小的圖片格式與圖片質(zhì)量, 以減少加載時(shí)間;
盡量避免使用半透明的png圖片(若使用, 請參考css規(guī)范相關(guān)說明);
運(yùn)用css sprite技術(shù)集中小的背景圖或圖標(biāo), 減小頁面http請求, 但注意, 請務(wù)必在對應(yīng)的sprite psd源圖中劃參考線, 并保存至img目錄下.
注釋規(guī)范
html注釋: 注釋格式 , '--'只能在注釋的始末位置,不可置入注釋文字區(qū)域;
css注釋: 注釋格式 /這兒是注釋/;
JavaScript注釋, 單行注釋使用//這兒是單行注釋 ,多行注釋使用 / 這兒有多行注釋 */;
瀏覽器兼容性 CSS hack
一菌瘫、標(biāo)識(shí)區(qū)別：
區(qū)別IE6,IE7,IE8,FF。

IE都能識(shí)別; 標(biāo)準(zhǔn)瀏覽器(如FF)不能識(shí)別布卡；
IE6能識(shí)別雨让，但不能識(shí)別!important; IE6在樣式前面加_
IE7能識(shí)別，也能識(shí)別!important;
IE8能識(shí)別\9忿等， 例如：background:red \9;
firefox不能識(shí)別栖忠，但能識(shí)別!important;
1．IE6和firefox的區(qū)別：
background:orange;background:blue;
意思就是火狐瀏覽器的背景顏色是橙色,而IE瀏覽器的背景色是藍(lán)色.
2.IE6和IE7的區(qū)別：
background:green !important;background:blue;
意思指的是:IE7的背景顏色是綠色,IE6的背景顏色是藍(lán)色
3.IE7和FF的區(qū)別：
background:orange; *background:green;
意思指的是:火狐瀏覽器的背景顏色是橙色,而IE7的背景顏色是綠色

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