前端開發(fā)規(guī)范

Web前端開發(fā)規(guī)范手冊

一、規(guī)范目的

1.1 概述.....................................................................................................................................1二、文件規(guī)范

2.1文件命名規(guī)則.........................................................................................................................12.2文件存放位置..........................................................................................................................22.3css書寫規(guī)范..........................................................................................................................32.4html書寫規(guī)范.........................................................................................................................72.5JavaScript書寫規(guī)范.............................................................................................................112.6圖片規(guī)范...................................................................................................................................122.7注釋規(guī)范...................................................................................................................................13

2.8css瀏覽器兼容.......................................................................................................................13一、規(guī)范目的1.1 概述為提高團(tuán)隊協(xié)作效率,便于后臺人員添加功能及前端后期優(yōu)化維護(hù),增強(qiáng)團(tuán)隊的開發(fā)協(xié)作，提高代碼質(zhì)量和打造開發(fā)基石的編碼風(fēng)格規(guī)范，其中包含了HTML,JavaScript和CSS這幾個部分,我們知道，當(dāng)一個團(tuán)隊開始指定并實行編碼規(guī)范的話，錯誤就會變得更加顯而易見。如果一段特定的代碼不符合規(guī)范的話，它有可能只是代碼風(fēng)格錯誤，而也有可能會是bug。早期指定規(guī)范就使得代碼審核得以更好的開展，并且可以更精確的地定位到錯誤。只要開發(fā)者們能夠保證源代碼源文件都嚴(yán)格遵循規(guī)范，那接下去所使用的混淆、壓縮和編譯工具則可投其所好不盡相同。輸出高質(zhì)量的文檔,特制訂此文檔.本規(guī)范文檔一經(jīng)確認(rèn),前端開發(fā)人員必須按本文檔規(guī)范進(jìn)行前臺頁面開發(fā).本文檔如有不對或者不合適的地方請及時提出,經(jīng)討論決定后可以更改此文檔.一WEB標(biāo)準(zhǔn)1WEB標(biāo)準(zhǔn)WEB標(biāo)準(zhǔn)不是一個標(biāo)準(zhǔn)，而是一系列標(biāo)準(zhǔn)的集合。網(wǎng)頁主要由三部分組成：結(jié)構(gòu)（Structure）、表現(xiàn)（Presentation）和行為（Behavior）。對應(yīng)的標(biāo)準(zhǔn)也分三方面：結(jié)構(gòu)化標(biāo)準(zhǔn)語言主要包括XHTML和XML,表現(xiàn)標(biāo)準(zhǔn)語言主要包括CSS，行為標(biāo)準(zhǔn)主要包括對象模型（如W3CDOM）、ECMAScript等。這些標(biāo)準(zhǔn)大部分由W3C起草和發(fā)布，也有一些是其他標(biāo)準(zhǔn)組織制訂的標(biāo)準(zhǔn)，比如ECMA（EuropeanComputerManufacturersAssociation）的ECMAScript標(biāo)準(zhǔn)。我們來簡單了解一下這些標(biāo)準(zhǔn)：1.11結(jié)構(gòu)標(biāo)準(zhǔn)語言（1）XMLXML是TheExtensibleMarkupLanguage(可擴(kuò)展標(biāo)識語言)的簡寫。目前推薦遵循的是W3C于2000年10月6日發(fā)布的XML1.0，參（）。和HTML一樣，XML同樣來源于SGML，但XML是一種能定義其他語言的語。XML最初設(shè)計的目的是彌補(bǔ)HTML的不足，以強(qiáng)大的擴(kuò)展性滿足網(wǎng)絡(luò)信息發(fā)布的需要，后來逐漸用于網(wǎng)絡(luò)數(shù)據(jù)的轉(zhuǎn)換和描述。（2）XHTMLXHTML是TheExtensibleHyperTextMarkupLanguage可擴(kuò)展標(biāo)識語言的縮寫。目前推薦遵循的是W3C于2000年1月26日推薦XML1.0。XML雖然數(shù)據(jù)轉(zhuǎn)換能力強(qiáng)大，完全可以替代HTML，但面對成千上萬已有的站點，直接采用XML還為時過早。因此，我們在HTML4.0的基礎(chǔ)上，用XML的規(guī)則對其進(jìn)行擴(kuò)展，得到了XHTML。簡單的說，建立XHTML的目的就是實現(xiàn)HTML向XML的過渡。1.12表現(xiàn)標(biāo)準(zhǔn)語言CSS是CascadingStyleSheets層疊樣式表的縮寫。目前推薦遵循的是W3C于1998年5月12日推薦CSS2。W3C創(chuàng)建CSS標(biāo)準(zhǔn)的目的是以CSS取代HTML表格式布局、幀和其他表現(xiàn)的語言。純CSS布局與結(jié)構(gòu)式XHTML相結(jié)合能幫助設(shè)計師分離外觀與結(jié)構(gòu)，使站點的訪問及維護(hù)更加容易。1.13行為標(biāo)準(zhǔn)（1）DOMDOM是DocumentObjectModel文檔對象模型的縮寫，根據(jù)W3CDOM規(guī)范DOM是一種與瀏覽器，平臺，語言的接口，使得你可以訪問頁面其他的標(biāo)準(zhǔn)組件。簡單理解，DOM解決了Netscaped的Javascript和Microsoft的Jscript之間的沖突，給予web設(shè)計師和開發(fā)者一個標(biāo)準(zhǔn)的方法，讓他們來訪問他們站點中的數(shù)據(jù)、腳本和表現(xiàn)層對像。(2)ECMAScriptECMAScript是ECMA(EuropeanComputerManufacturersAssociation)制定的標(biāo)準(zhǔn)腳本語言（JAVAScript）。目前推薦遵循的是ECMAScript262。二、文件規(guī)范

2.1文件命名規(guī)則文件名稱統(tǒng)一用小寫的英文字母、數(shù)字和下劃線的組合，其中不得包含漢字、空格和特殊字符；命名原則的指導(dǎo)思想一是使得你自己和工作組的每一個成員能夠方便的理解每一個文件的意義，二是當(dāng)我們在文件夾中使用“按名稱排例”的命令時，同一種大類的文件能夠排列在一起，以便我們查找、修改、替換、計算負(fù)載量等等操作。好的網(wǎng)站目錄結(jié)構(gòu)和其命名是讓人和搜索引擎能夠讀懂，在后期利于seo的優(yōu)化。a.HTML的命名原則

引文件統(tǒng)一使用index.htmindex.htmlindex.asp文件名（小寫）

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

關(guān)于我們\aboutus

信息反饋\feedback

產(chǎn)品\product如果欄目名稱多而復(fù)雜并不好以英文單詞命名，則統(tǒng)一使用該欄目名稱拼音或拼音的首字母表示；

每一個目錄中應(yīng)該包含一個缺省的html文件，文件名統(tǒng)一用index.htmindex.htmlindex.asp；

b.圖片的命名原則圖片的名稱分為頭尾兩部分，用下劃線隔開，頭部分表示此圖片的大類性質(zhì)

例如：廣告、標(biāo)志、菜單、按鈕等等。

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

標(biāo)志性的圖片取名為：logo

在頁面上位置不固定并且?guī)в墟溄拥男D片我們?nèi)∶麨閎utton

在頁面上某一個位置連續(xù)出現(xiàn)，性質(zhì)相同的鏈接欄目的圖片我們?nèi)∶簃enu

裝飾用的照片我們?nèi)∶簆ic

不帶鏈接表示標(biāo)題的圖片我們?nèi)∶簍itle

范例：banner_sohu.gifbanner_sina.gifmenu_aboutus.gifmenu_job.giftitle_news.giflogo_police.giflogo_national.gifpic_people.jpg

鼠標(biāo)感應(yīng)效果圖片命名規(guī)范為"圖片名+_+on/off"。

例如：menu1_on.gifmenu1_off.gif

c.javascript的命名原則

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

d.動態(tài)語言文件命名原則

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

范例：register_form.phpregister_post.phptopic_lock.php2.2文件存放位置規(guī)范_Rootcn存放中文HTML文件en存放英文HTML文件images存放圖片文件imagestudio存放PSD源文件flashstudio存放flash源文件inc存放include文件library存放DW庫文件media存放多媒體文件project存放工程項目資料temp存放客戶原始資料js存放JavaScript腳本css存放CSS文件2.3CSS書寫規(guī)范

基本原則：CSS樣式可細(xì)分為3類：自定義樣式、重新定義HTML樣式、鏈接狀態(tài)樣式。1.樣式為設(shè)計師自定義的新CSS樣式，影響被使用本樣式的區(qū)域，用于完成網(wǎng)頁中局部的樣式設(shè)定。樣式名“.”+“相應(yīng)樣式效果描述的單詞或縮寫”例：“.shadow”

文字樣式樣式名“.no”+“字號”+“行距”+“顏色縮寫”例：“.no12”、“.no12-24”2.義HTML樣式為設(shè)計師重新定義已有的HTML標(biāo)簽樣式，影響全部的被設(shè)定標(biāo)簽樣式，用于統(tǒng)一網(wǎng)頁中某一標(biāo)簽的樣式定義。樣式名“HTML標(biāo)簽”例：hr{border:1pxdotted#333333}3.態(tài)樣式為設(shè)計師對鏈接不同狀態(tài)設(shè)定特殊樣式，影響被使用本樣式區(qū)域中的鏈接。

該樣式寫法有2種：a.nav:linknav.a:link第一種只能修飾<a>標(biāo)簽中；第二種可以修飾所有包含有<a>標(biāo)簽的其他標(biāo)簽。頁面內(nèi)的樣式加載必須用鏈接方式<linkrel="stylesheet"type="text/css"href="style/style.css">注意細(xì)則：1. 協(xié)作開發(fā)及分工:i會根據(jù)各個模塊,同時根據(jù)頁面相似程序,事先寫好大體框架文件,分配給前端人員實現(xiàn)內(nèi)部結(jié)構(gòu)&表現(xiàn)&行為;共用css文件base.css由i書寫,協(xié)作開發(fā)過程中,每個頁面請務(wù)必都要引入,此文件包含reset及頭部底部樣式,此文件不可隨意修改;2. class與id的使用:id是唯一的并是父級的,class是可以重復(fù)的并是子級的,所以id僅使用在大的模塊上,class可用在重復(fù)使用率高及子級中;id原則上都是由我分發(fā)框架文件時命名的,為JavaScript預(yù)留鉤子的除外;3. 為JavaScript預(yù)留鉤子的命名,請以js_起始,比如:js_hide,js_show;4. class與id命名:大的框架命名比如header/footer/wrapper/left/right之類的在2中由i統(tǒng)一命名.其他樣式名稱由小寫英文&數(shù)字&_來組合命名,如i_comment,fontred,width200;避免使用中文拼音,盡量使用簡易的單詞組合;總之,命名要語義化,簡明化.5. 規(guī)避class與id命名(此條重要,若有不明白請及時與i溝通):a,通過從屬寫法規(guī)避,示例見d;b,取父級元素id/class命名部分命名,示例見d;c,重復(fù)使用率高的命名,請以自己代號加下劃線起始,比如i_clear;d,a,b兩條,適用于在2中已建好框架的頁面,如,要在2中已建好框架的頁面代碼<divid="mainnav"></div>中加入新的div元素,按a命名法則:<divid="mainnav"><divclass="firstnav">...</div></div>,樣式寫法:#mainnav.firstnav{.......}按b命名法則:<divid="mainnav"><divclass="main_firstnav">...</div></div>,

樣式寫法:.main_firstnav{.......}6. 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-vlign、cursor、z-index(層疊順序)、zoom等.所列出的這些屬性只是最常用到的,并不代表全部;7. 書寫代碼前,考慮并提高樣式重復(fù)使用率;8. 充分利用html自身屬性及樣式繼承原理減少代碼量,比如:<ulclass="list"><li>這兒是標(biāo)題列表<span>2010-09-15</span></ul>定義ul.listli{position:relative}ul.listlispan{position:absolute;right:0}即可實現(xiàn)日期居右顯示9. 樣式表中中文字體名,請務(wù)必轉(zhuǎn)碼成unicode碼,以避免編碼錯誤時亂碼;10. 背景圖片請盡可能使用sprite技術(shù),減小http請求,考慮到多人協(xié)作開發(fā),sprite按模塊制作;（sprite是一種網(wǎng)頁圖片應(yīng)用處理方式。就是把網(wǎng)頁中一些背景圖片整合到一張圖片文件中，再利用CSS的“background-image”，“background-repeat”，“background-position”的組合進(jìn)行背景定位，background-position可以用數(shù)字精確的定位出背景圖片的位置）11. 使用table標(biāo)簽時(盡量避免使用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;}tableth,tabletd{padding:0;},base.css文件中會初始化表格樣式)12. 用png圖片做圖片時,要求圖片格式為png-8格式,若png-8實在影響圖片質(zhì)量或其中有半透明效果,請為ie6單獨定義背景:background:none;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=crop,src=’img/bg.png’);13. 避免兼容性屬性的使用,比如text-shadow||css3的相關(guān)屬性;14. 減少使用影響性能的屬性,比如position:absolute||float;15. 必須為大區(qū)塊樣式添加注釋,小區(qū)塊適量注釋;16. 代碼縮進(jìn)與格式:建議單行書寫,可根據(jù)自身習(xí)慣,后期優(yōu)化i會統(tǒng)一處理;命名規(guī)則：

頭：header內(nèi)容：content/container尾：footer導(dǎo)航：nav側(cè)欄：sidebar欄目：column頁面外圍控制整體布局寬度：wrapper左右中：leftrightcenter登錄條：loginbar標(biāo)志：logo廣告：banner頁面主體：main熱點：hot新聞：news下載：download子導(dǎo)航：subnav菜單：menu子菜單：submenu搜索：search友情鏈接：friendlink頁腳：footer版權(quán)：copyright滾動：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ū)/*EndFooter*/(三)id的命名:合理的避免使用ID一般情況下ID不應(yīng)該被應(yīng)用于樣式。ID的樣式不能被復(fù)用并且每個頁面中你只能使用一次ID。使用ID唯一有效的是確定網(wǎng)頁或整個站點中的位置。盡管如此，你應(yīng)該始終考慮使用class，而不是id，除非只使用一次。(1)頁面結(jié)構(gòu)容器:container頁頭：header內(nèi)容：content/container頁面主體：main頁尾：footer導(dǎo)航：nav側(cè)欄：sidebar欄目：column頁面外圍控制整體布局寬度：wrapper左右中：leftrightcenter(2)導(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(3)功能標(biāo)志：logo廣告：banner登陸：login登錄條：loginbar注冊：regsiter搜索：search功能區(qū)：shop標(biāo)題：title加入：joinus狀態(tài)：status按鈕：btn滾動：scroll標(biāo)簽頁：tab文章列表：list提示信息：msg當(dāng)前的:current小技巧：tips圖標(biāo):icon注釋：note指南：guild服務(wù)：service熱點：hot新聞：news下載：download投票：vote合作伙伴：partner友情鏈接：link版權(quán)：copyright\基本樣式：/*CSSDocument*/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ù)pt和像素px來定義，pt一般使用中文宋體的9pt

和11pt，px一般使用中文宋體12px

和14.7px

這是經(jīng)過優(yōu)化的字號，黑體字或者宋體字加粗時，一般選用11pt

和14.7px

的字號比較合適。中英文混排時，我們盡可能的將英文和數(shù)字定義為verdana

和arial

兩種字體。2.4html書寫規(guī)范

網(wǎng)頁制作細(xì)節(jié)----head區(qū)代碼規(guī)范文檔類型：推薦使用HTML5的文檔類型申明：<!DOCTYPEhtml>.head區(qū)是指HTML代碼的<head>和</head>之間的內(nèi)容。必須加入的標(biāo)簽公司版權(quán)注釋<!---ThesiteisdesignedbyEHM,Inc07/2005--->網(wǎng)頁顯示字符集簡體中文：<METAHTTP-EQUIV="Content-Type"CONTENT="text/html;charset=gb2312">繁體中文：<METAHTTP-EQUIV="Content-Type"CONTENT="text/html;charset=utf-8">英語：<METAHTTP-EQUIV="Content-Type"CONTENT="text/html;charset=utf-8">網(wǎng)頁制作者信息<METAname="author"content="">網(wǎng)站簡介<METANAME="DESCRIPTION"CONTENT="xxxxxxxxxxxxxxxxxxxxxxxxxx">搜索關(guān)鍵字<METANAME="keywords"CONTENT="xxxx,xxxx,xxx,xxxxx,xxxx,">網(wǎng)頁的css規(guī)范<LINKhref="../css/style.css"rel="stylesheet"type="text/css">網(wǎng)頁標(biāo)題<title>xxxxxxxxxxxxxxxxxx</title>可以選擇加入的標(biāo)簽設(shè)定網(wǎng)頁的到期時間。一旦網(wǎng)頁過期，必須到服務(wù)器上重新調(diào)閱。<METAHTTP-EQUIV="expires"CONTENT="Wed,26Feb199708：21：57GMT">禁止瀏覽器從本地機(jī)的緩存中調(diào)閱頁面內(nèi)容。<METAHTTP-EQUIV="Pragma"CONTENT="no-cache">用來防止別人在框架里調(diào)用你的頁面。<METAHTTP-EQUIV="Window-target"CONTENT="_top">自動跳轉(zhuǎn)。<METAHTTP-EQUIV="Refresh"CONTENT="5;URL=http：//">5指時間停留5秒網(wǎng)頁搜索機(jī)器人向?qū)?。用來告訴搜索機(jī)器人哪些頁面需要索引，哪些頁面不需要索引。<METANAME="robots"CONTENT="none">CONTENT的參數(shù)有all,none,index,noindex,follow,nofollow。默認(rèn)是all。收藏夾圖標(biāo)<linkrel="ShortcutIcon"href="favicon.ico">所有的javascript的調(diào)用盡量采取外部調(diào)用.<SCRIPTLANGUAGE="JavaScript"SRC="script/xxxxx.js"></SCRIPT>附<body>標(biāo)簽：<body>標(biāo)簽不屬于head區(qū)，這里強(qiáng)調(diào)一下，為了保證瀏覽器的兼容性，必須設(shè)置頁面背景<bodybgcolor="#FFFFFF">網(wǎng)頁制作細(xì)節(jié)----字體

1.在設(shè)定字體樣式時對于文字字號樣式和行間距應(yīng)必須使用CSS樣式表。禁止在頁面中出現(xiàn)<fontsize=?>標(biāo)記。

2.在網(wǎng)頁中中文應(yīng)首選使用宋體。英文和數(shù)字首選使用verdana

和arial

兩種字體。一般使用中文宋體的9pt

和11pt或12px

和14.7px

這是經(jīng)過優(yōu)化的字號，黑體字或者宋體字加粗時，一般選用11pt

和14.7px

的字號比較合適。

3.為了最大程度的發(fā)揮瀏覽器自動排版的功能，在一段完整的文字中請盡量不要使用<br>來人工干預(yù)分段。

4.不同語種的文字之間應(yīng)該有一個半角空格，但避頭的符號之前和避尾的符號之后除外，漢字之間的標(biāo)點要用全角標(biāo)點，英文字母和數(shù)字周圍的括號應(yīng)該使用半角括號。

5.請不要在網(wǎng)頁中連續(xù)出現(xiàn)多于一個的也盡量少使用全角空格（英文字符集下，全角空格會變成亂碼），空白應(yīng)該盡量使用text-indent,padding,margin,hspace,vspace以及透明的gif圖片來實現(xiàn)。

6.行距建議用百分比來定義，常用的兩個行距的值是line-height:120%/150%.

7.排版中我們經(jīng)常會遇到需要進(jìn)行首行縮進(jìn)的處理，不要使用或者全角空格來達(dá)到效果，規(guī)范的做法是在樣式表中定義p{text-indent:2em;}然后給每一段加上<p>標(biāo)記，注意，一般情況下，請不要省略</p>結(jié)束標(biāo)記。網(wǎng)頁制作細(xì)節(jié)----鏈接

1.網(wǎng)站中的鏈接路徑全部采用相對路徑，一般鏈接到某一目錄下的缺省文件的鏈接路徑不必寫全名，如我們不必這樣：<ahref=”aboutus/index.htm”>而應(yīng)該這樣：<ahref=”aboutus/”>，所有內(nèi)頁指向首頁的鏈接寫成<ahref=”/”>

2.在瀏覽器里，當(dāng)我們點擊空鏈接時，它會自動將當(dāng)前頁面重置到首端，從而影響用戶正常的閱讀內(nèi)容，我們用代碼“javascript:void(null)”代替原來的“#”標(biāo)記

網(wǎng)頁制作細(xì)節(jié)----表格

1px表格style="border-collapse:collapse"

實例如下：

<tableborder="1"cellspacing="0"width="32"height="32"style="border-collapse:collapse"

bordercolor="#000000"cellpadding="0">

<tr>

<td></td>

</tr>

</table>

設(shè)置亮、暗邊框顏色

表格有亮邊框（bordercolorlight）和暗邊框（bordercolordark）兩個屬性可以對表格樣式設(shè)置。

<tableborder="1"width="500"bordercolorlight="#000000"bordercolordark="#FFFFFF">

在寫<table>互相嵌套時，嚴(yán)格按照的規(guī)范，對于單獨的一個<table>來說，<table><tr>對齊，<td>縮進(jìn)兩個半角空格，<td>中如果還有嵌套的表格，<table>也縮進(jìn)兩個半角空格，如果<td>中沒有任何嵌套的表格，</td>結(jié)束標(biāo)記應(yīng)該與<td>處于同一行，不要換行，

如我們注意在源代碼中不應(yīng)有這樣的代碼：

<td><imgsrc=”../images/sample.gif”>

</td>

而應(yīng)該是這樣的：

<td><imgsrc=”../images/sample.gif”></td>

這是因為瀏覽器認(rèn)為換行相當(dāng)于一個半角空格，以上不規(guī)范的寫法相當(dāng)于無意中增加一個半角空格，如果確實有必要增加一個半角空格，也應(yīng)該這樣寫：

<td><imgsrc=”../images/sample.gif”></td>

一個網(wǎng)頁要盡量避免用整個一張大表格，所有的內(nèi)容都嵌套在這個大表格之內(nèi)，因為瀏覽器在解釋頁面的元素時，是以表格為單位逐一顯示，如果一張網(wǎng)頁是嵌套在一個大表格之內(nèi)，那么很可能造成的后果就是，當(dāng)瀏覽者敲入網(wǎng)址，他要先面對一片空白很長時間，然后所有的網(wǎng)頁內(nèi)容同時出現(xiàn)。如果必須這樣做，請使用<tbody>標(biāo)記，以便能夠使這個大表格分塊顯示

網(wǎng)頁制作細(xì)節(jié)----下載速度

首頁Flash網(wǎng)頁大小應(yīng)限定在200K以下，盡可能的使用矢量圖形和Action來減小動畫大小。非首頁靜態(tài)頁面含圖片大小應(yīng)限定在70K左右，盡可能的使用背景顏色替換大塊同色圖片。網(wǎng)頁制作細(xì)節(jié)----include

asp標(biāo)準(zhǔn)寫法<!--#includefile="inc/index_top.asp"-->

jsp標(biāo)準(zhǔn)寫法<%@includefile="../inc/index_top..jsp"%>網(wǎng)頁制作細(xì)節(jié)----Alt和Title

都是提示性語言標(biāo)簽，請注意它們之間的區(qū)別。在我們?yōu)g覽網(wǎng)頁時，當(dāng)鼠標(biāo)停留在圖片對象或文字鏈接上時，在鼠標(biāo)的右下角有時會出現(xiàn)一個提示信息框。對目標(biāo)進(jìn)行一定的注釋說明。在一些場合，它的作用是很重要的。alt用來給圖片來提示的。Title用來給鏈接文字或普通文字提示的。用法如下：<pTitle="給鏈接文字提示">文字</p><ahref="#"Title="給鏈接文字提示">文字</a><imgsrc="圖片.gif"alt="給圖片提示">

網(wǎng)頁制作細(xì)節(jié)----緩存網(wǎng)頁不會被緩存HTM網(wǎng)頁<METAHTTP-EQUIV="pragma"CONTENT="no-cache"><METAHTTP-EQUIV="Cache-Control"CONTENT="no-cache,must-revalidate"><METAHTTP-EQUIV="expires"CONTENT="0">網(wǎng)頁制作細(xì)節(jié)----瀏覽器兼容性

創(chuàng)建站點時，應(yīng)該明白訪問者可能使用各種Web瀏覽器。在已知的其他設(shè)計限制下，盡可能將站點設(shè)計為具有最大的瀏覽器兼容性。

目前使用的Web瀏覽器有二十多種，大多數(shù)已發(fā)行了多個版本。即使您只針對使用NetscapeNavigator和MicrosoftInternetExplorer的大多數(shù)Web用戶，但您應(yīng)明確并不是每個人都在使用這兩種瀏覽器的最新版本。

您的站點越復(fù)雜（在布局、動畫、多媒體內(nèi)容和交互方面），跨瀏覽器兼容的可能性就越小。例如，并非所有的瀏覽器都可以運行JavaScript。不使用特殊字符的純文本頁面或許能夠在任何瀏覽器中正確顯示，但比起有效地使用圖形、布局和交互的頁面，這樣的頁面在美感上可能要差得多。所以，應(yīng)盡量在最佳效果設(shè)計和最大瀏覽器兼容性設(shè)計之間取得平衡。

所有的HTML標(biāo)簽的屬性都要用單引號或者雙引號括起，即我們應(yīng)該寫<ahref=”url”>而不是<ahref=url>.

圖片處理細(xì)節(jié)----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圖片處理細(xì)節(jié)----LOGO的國際標(biāo)準(zhǔn)規(guī)范

為了便于INTERNET上信息的傳播，一個統(tǒng)一的國際標(biāo)準(zhǔn)是需要的。實際上已經(jīng)有了這樣的一整套標(biāo)準(zhǔn)。其中關(guān)于網(wǎng)站的LOGO，目前有三種規(guī)格：

88*31這是互聯(lián)網(wǎng)上最普遍的LOGO規(guī)格。

120*60這種規(guī)格用于一般大小的LOGO。

120*90這種規(guī)格用于大型LOGO。圖片處理細(xì)節(jié)----頁面修飾圖片處理

圖片經(jīng)過優(yōu)化以加快下載的速度,有較佳的視覺空間效果，用圖要與頁面風(fēng)格、頁面內(nèi)容相符；制作精美，細(xì)節(jié)處理得當(dāng)。2.5JavaScript書寫規(guī)范

全局命名空間污染與IIFE：總是將代碼包裹成一個IIFE(Immediately-InvokedFunctionExpression)，用以創(chuàng)建獨立隔絕的定義域。這一舉措可防止全局命名空間被污染1. 書寫過程中,每行代碼結(jié)束必須有分號;原則上所有功能均根據(jù)XXX項目需求原生開發(fā),以避免網(wǎng)上down下來的代碼造成的代碼污染(沉冗代碼||與現(xiàn)有代碼沖突||...);2. 庫引入:原則上僅引入jQuery庫,若需引入第三方庫,須與團(tuán)隊其他人員討論決定;3. 變量命名:駝峰式命名.原生JavaScript變量要求是純英文字母,首字母須小寫,如iTaoLun;jQuery變量要求首字符為'_',其他與原生JavaScript規(guī)則相同,如:_iTaoLun;另,要求變量集中聲明,避免全局變量.4. 類命名:首字母大寫,駝峰式命名.如ITaoLun;5. 函數(shù)命名:首字母小寫駝峰式命名.如iTaoLun();6. 命名語義化,盡可能利用英文單詞或其縮寫;7. 盡量避免使用存在兼容性及消耗資源的方法或?qū)傩?比如eval()&innerText;8. 后期優(yōu)化中,JavaScript非注釋類中文字符須轉(zhuǎn)換成unicode編碼使用,以避免編碼錯誤時亂碼顯示;9. 代碼結(jié)構(gòu)明了,加適量注釋.提高函數(shù)重用率;10. 注重與html分離,減小reflow,注重性能.2.6圖片規(guī)范

1. 所有頁面元素類圖片均放入img文件夾,測試用圖片放于img/demoimg文件夾;2. 圖片格式僅限于gif||png||jpg;3. 命名全部用小寫英文字母||數(shù)字||_的組合，其中不得包含漢字||空格||特殊字符；盡量用易懂的詞匯,便于團(tuán)隊其他成員理解;另,命名分頭尾兩部分,用下劃線隔開,比如ad_left01.gif||btn_submit.gif;4. 在保證視覺效果的情況下選擇最小的圖片格式與圖片質(zhì)量,以減少加載時間;5. 盡量避免使用半透明的png圖片(若使用,請參考css規(guī)范相關(guān)說明);6. 運用csssprite技術(shù)集中小的背景圖或圖標(biāo),減小頁面http請求,但注意,請務(wù)必在對應(yīng)的spritepsd源圖中劃參考線,并保存至img目錄下.2.7注釋規(guī)范

1. html注釋:注釋格式<!--這兒是注釋-->,'--'只能在注釋的始末位置,不可置入注釋文字區(qū)域;2. css注釋:注釋格式/*這兒是注釋*/;3. JavaScript注釋,單行注釋使用'//這兒是單行注釋',多行注釋使用/*這兒有多行注釋*/;2.8瀏覽器兼容性CSShack一、標(biāo)識區(qū)別：

區(qū)別IE6,IE7,IE8,FF。

1.IE都能識別*;標(biāo)準(zhǔn)瀏覽器(如FF)不能識別*；2.IE6能識別*，但不能識別!important;IE6在樣式前面加_3.IE7能識別*，也能識別!important;4.IE8能識別\9例如：background:red

\9;5.firefox不能識別*，但能識別!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)色.

5.現(xiàn)在ie還沒有兼容圓角屬性標(biāo)簽（border-radidus），如果確實需要，使用背景圖。DIV+CSSie6ie7ff的兼容性問題在網(wǎng)站設(shè)計的時候，應(yīng)該注意css樣式兼容不同瀏覽器問題，特別是對完全使用DIVCSS設(shè)計的網(wǎng)，就應(yīng)該更注意IE6IE7FF對CSS樣式的兼容，不然，你的網(wǎng)亂可能出去不想出現(xiàn)的效果！所有瀏覽器通用height:100px;IE6專用_height:100px;IE6專用*height:100px;IE7專用*+height:100px;IE7、FF共用height:100px!important;一、CSS兼容以下兩種方法幾乎能解決現(xiàn)今所有兼容.1,!important(不是很推薦，用下面的一種感覺最安全)隨著IE7對!important的支持,!important方法現(xiàn)在只針對IE6的兼容.(注意寫法.記得該聲明位置需要提前.)代碼:<style>#wrapper{width:100px!important;/*IE7+FF*/width:80px;/*IE6*/}</style>2,IE6/IE77對FireFox<from針對firefoxie6ie7的css樣式>*+html與*html是IE特有的標(biāo)簽,firefox暫不支持.而*+html又為IE7特有標(biāo)簽.代碼:<style>#wrapper{width:120px;}/*FireFox*/*html#wrapper{width:80px;}/*ie6fixed*/*+html#wrapper{width:60px;}/*ie7fixed,注意順序*/</style>注意:*+html對IE7的兼容必須保證HTML頂部有如下聲明：代碼:<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN""">二、萬能float閉合(非常重要!)可以用這個解決多個div對齊時的間距不對，關(guān)于clearfloat的原理可參見[HowToClearFloatsWithoutStructuralMarkup]將以下代碼加入GlobalCSS中,給需要閉合的div加上class=”clearfix”即可,屢試不爽.代碼:<style>/*ClearFix*/.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden;}.clearfix{display:inline-block;}/*HidefromIEMac\*/.clearfix{display:block;}/*EndhidefromIEMac*//*endofclearfix*/</style>三、其他兼容技巧(相當(dāng)有用)1,FF下給div設(shè)置padding后會導(dǎo)致width和height增加,但I(xiàn)E不會.(可用!important解決)2,居中問題.1).垂直居中.將line-height設(shè)置為當(dāng)前div相同的高度,再通過vetical-align:middle.(注意內(nèi)容不要換行.)2).水平居中.margin:0auto;(當(dāng)然不是萬能)3,若需給a標(biāo)簽內(nèi)內(nèi)容加上樣式,需要設(shè)置display:block;(常見于導(dǎo)航標(biāo)簽)4,FF和IE對BOX理解的差異導(dǎo)致相差2px的還有設(shè)為float的div在ie下margin加倍等問題.5,ul標(biāo)簽在FF下面默認(rèn)有l(wèi)ist-style和padding.最好事先聲明,以避免不必要的麻煩.(常見于導(dǎo)航標(biāo)簽和內(nèi)容列表)6,作為外部wrapper的div不要定死高度,最好還加上overflow:hidden.以達(dá)到高度自適應(yīng).7,關(guān)于手形光標(biāo).cursor:pointer.而hand只適用于IE.貼上代碼:兼容代碼:兼容最推薦的模式。/*FF*/.submitbutton{float:left;width:40px;height:57px;margin-top:24px;margin-right:12px;}/*IE6*/*html.submitbutton