WEB前端編碼規(guī)范精修訂

上傳人：招*** IP屬地：河北上傳時間：2026-01-21 格式：PDF 頁數(shù)：30 大?。?.96MB 積分：12 舉報(bào) 版權(quán)申訴

已閱讀5頁，還剩25頁未讀，繼續(xù)免費(fèi)閱讀

版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請進(jìn)行舉報(bào)或認(rèn)領(lǐng)

文檔簡介

WEB前端編碼規(guī)范

集團(tuán)屣化工作〃'組#Q8QGGQT-GX8G08Q8-GNQGJ8-MHHGN#

XXXX有限公司

xxxxxxxx管理平臺

Web前端代碼編寫規(guī)范

文件狀態(tài)：文件標(biāo)識：

［，］草稿當(dāng)前版本：

［］正式發(fā)布作者：李光強(qiáng)

［］正在修改完成日期：

XXXXXX

2022年1月

修改歷史

修訂后修訂

編號修訂人修訂內(nèi)容簡述

版本號日期

1李光強(qiáng)起草

第一部份HTML規(guī)范

HTML并非一種編程語言，而是一種標(biāo)記語言，它沒有任何真正的編程語言中的循

環(huán)或者是流程控制語句。然而，HTML代碼的格式和風(fēng)格是非常重要的，因?yàn)橐獣r常對

HTML代碼進(jìn)行維護(hù)和修改，因此HTML代碼必須有很清晰的邏輯結(jié)構(gòu)和布局，而使其

易懂和易于維護(hù)。

HTML語言是不區(qū)分大小寫的，但為改善可讀性，規(guī)定小寫所有字母（除最上一

行引用外）。與HTML不一樣，XHTML對大小寫是敏感的，和＜TITLE＞是不同

的標(biāo)簽。

具體規(guī)范如下:

1.文件定義

<head>

<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>

2.網(wǎng)站head區(qū)代碼規(guī)范：

head區(qū)是指vhead＞和＜/head＞之間的內(nèi)容。必須加入的標(biāo)簽:

公司版權(quán)注釋

文件：

說明：說明本HTML是用于什么功能

作者：李四

時間：2022/1/30

--->

網(wǎng)頁顯示字符集

簡體中文：<metahttp-equiv=℃ontent-Type"content="text/html;

charset=utf-8">

繁體中文：<metahttp-cquiv="Content-Typc"content="text/html;

charset=BIG5">

英語：<metahttp-equiv="Content-Type"content="text/html;charsei=iso-8859-l">

作者與版權(quán)信息

此處用于存儲開辟公司版權(quán)信息，如:

<metaname="author"content="'>

<metaname=ncopyright"content』'版權(quán)所有"/>

網(wǎng)頁的css,javascript規(guī)范

在引用CSS和JS文件時，統(tǒng)一放置在vhead></head>中，先放CSS引用，再放js引

用。

<linkhref=nstyle/"rel="stylesheet"type="text/cssH/>

html4'javascript的書寫：

<scriptlanguage="javascript"type="text/javascript"></script>

網(wǎng)頁標(biāo)題

Title中使用分割，如：設(shè)備管理平臺-運(yùn)維系統(tǒng)。

設(shè)置搜索關(guān)鍵詞

<metaname=Hkeywords"cortent=""/>

GoogleAdWords關(guān)鍵字工具：查詢特定關(guān)鍵詞的常見查詢及擴(kuò)展匹配。

KEYWRODS關(guān)鍵字最多不超過5個建議長度：小于等于100個漢字，如果使用的

網(wǎng)頁編碼是UTF-8,不同關(guān)鍵字之間用英文",“分隔。

網(wǎng)站簡介

<metaname="description"content=n"/>

description是描述網(wǎng)頁內(nèi)容的，因此最好是可以用一句話來概括本網(wǎng)頁的主題內(nèi)容。

description不要超過255個字符，搜索引擎索引普通都會索引Description的前255個

字符，因此，這255個字符是做搜索引擎優(yōu)化的關(guān)鍵。

如果使用的網(wǎng)頁編碼是UTF-8,那末在Description中的標(biāo)點(diǎn)符號最好都使用英文，

例如英文的逗號、句號等。如果是中文的話，那末就使用中文的標(biāo)點(diǎn)符號即可。

其它標(biāo)簽［非必需］

1.設(shè)定網(wǎng)頁的到期時間。一旦網(wǎng)頁過期，必須到服務(wù)器上重新調(diào)閱，這樣有利于頁

面信息。

<metahttp-equiv="expires"8nten』"wed,26feb202208:21:57gmt">

2.禁止瀏覽器從本地機(jī)的緩存中調(diào)閱頁面內(nèi)容。

<metahttp-equiv="pragma"content="no-cache">

3.用來防止別人在框架里調(diào)用你的頁面。

<metahttp-equiv="window-target"content="_top">

4.自動跳轉(zhuǎn)。

5指時間停留5秒。

5.網(wǎng)頁搜索機(jī)器人向?qū)в脕砀嬖V搜索機(jī)器人哪些頁面需要索引，哪些頁面不需要

索引。

<metaname=Hrobots"content="none">

CONTENT的參數(shù)有alknone,index,noindex,follow,nofollowo默認(rèn)是all。6.收藏

夾圖標(biāo)

<linkrel=Hshortcuticon"href='7"type="image/x-icon'7>圖片大小16px*16px

7.定閱RSS瀏覽

是一種描述和同步網(wǎng)站內(nèi)容的格式。用戶可以通過RSS閱讀器定閱。

<linkhref=nntitled新現(xiàn)代教育網(wǎng)"type』'application/rss+xml"rel=

"alternteM/>

完整示例

3.html中元素的書寫：

段落

<body>區(qū)域標(biāo)簽

段落

段落使用vp>標(biāo)簽進(jìn)行定義。

<p>Thisisaparagraph</p>

標(biāo)題

即正文標(biāo)題普通用標(biāo)簽，最好和Ele標(biāo)簽的內(nèi)容有關(guān)聯(lián)。

標(biāo)題使用<hl>至<h6>標(biāo)簽進(jìn)行定義。<hl>定義最大的標(biāo)題。<h6>定義最小的標(biāo)

題。

<h1>Thisisaheading</h1>

<h2>Thisisaheading</h2>

<h3>Thisisaheading</h3>

<h4>Thisisaheading</h4>

<h5>Thisisaheading</h5>

<h6>Thisisaheading</h6>

文章中的小標(biāo)題一定也要加粗。

可以把網(wǎng)頁中的重要內(nèi)容做成這樣。用戶不用登陸這個網(wǎng)頁就可看到更新的內(nèi)容。

字體的設(shè)置標(biāo)簽

換行：<brZ>

字體修飾不要使用vfonl〉<sirong>等進(jìn)行標(biāo)注，普通使用css樣式進(jìn)行字體樣式排版

注意事項(xiàng)

l.vbody>為了保證瀏覽器的兼容性，必須設(shè)置頁面背景：

<bodybgcolor=n#FFFFFF">

2.關(guān)閉所有的標(biāo)簽

o即：一定要有結(jié)束標(biāo)記。

3.屬性值用雙引號””括起來，屬性統(tǒng)一使用小寫

例如：<imgheight="60'width="760"src=',images/"/>

4.給所有的屬性賦值

不正確的寫法：<input.......checked/>

正確的寫法為：<input.......chcckcd="checked'7>

5.標(biāo)簽要合理嵌套

7.特殊字符用編碼標(biāo)識

如y用“&七"表示，”>“用表示o

8.網(wǎng)頁中圖片優(yōu)化

一定要加alt屬性，疝屬性指定了當(dāng)圖片不能顯示的時候就顯示供替換文本。內(nèi)

容最好與關(guān)鍵詞相關(guān)。

如：<imgsrc="images/"alt="網(wǎng)站LOGO"/〉

一些小圖標(biāo)最好用.png或者.gif格式圖片，比如說箭頭，文章列表前的圖標(biāo)等，在

CSS中做成背景。這些小圖標(biāo)最好做一張圖片，用CSS來定位。

9.用結(jié)構(gòu)化的元素輸出內(nèi)容

<ul>

vli>新現(xiàn)代v/li>

</ul>

或者使用

<dl>

</dl>

10.標(biāo)簽要有縮進(jìn)，便于代碼閱讀修改。

11、tr>td必須定義在table之間；

<table>

<tbody>

<tr>

</tr>

</tbody>

</table>

注：收dy絕對不可以省略.

12、button按鈕必須定義在fium之間,否則netscape不支持；

<formaclion="......."method=,,posr*>

<inputlype=''button''name=''but"value="back''>

</form>

13、htinl注釋

(1)每一獨(dú)立部份都要表明注釋。例如；

<!—右邊begin-><!—右邊end―>

<!—左邊begin―><!—左邊end―>

塊代碼的注釋

<!—頭部begin—>

大量代碼塊，使用此種樣式，方便閱讀

<!—頭部end—>

(2)注釋要用描述性語言，能夠清晰的表達(dá)每一部份的意思。

4.HTML元素的排序規(guī)則

能夠使用的HTML元素包括：div、p>uKtable>span、input、select等?；旧蟙iv、

table>uKp都屬于結(jié)構(gòu)性比較強(qiáng)的元素，而span、input則是比較弱的元素，因此不允

許有span嵌套div>table等等的情況浮現(xiàn)，span可以嵌套i叩ut,可以嵌套span。

在寫頁面的時候可以先不考慮界面呈現(xiàn)，按照這樣的規(guī)則，把數(shù)據(jù)直接綁定到

HTML元素的節(jié)點(diǎn)上。

5.九大原則

原則一:

普通要寫兼容多種瀏覽潛的網(wǎng)頁，最省事的方法就先寫適合chrome的樣式，并在

chrome進(jìn)行調(diào)度。測試時可以使用多種瀏覽器。

原則二：

逐步疊加的方式，如果需要用這個樣式的模塊不少，并且會存在些許的不同，千萬

不要把樣式一步寫到位，最好把框架性的先寫好，細(xì)節(jié)性的留到第一個步驟，甚至第三

個步驟，固然最好步驟不要超過三步，這樣很不利于維護(hù)。

由若干個二級定義對一級定義進(jìn)行補(bǔ)充，這樣的既可以減少代碼，又可以減少繁多

的CLASS命名。

不要輕易修改共用的CSS,否則可能會影響其它頁面。

在每一個一級CSS前添加注釋，說明哪些頁面使用了該CSS.,

原則三：

從總到分。順序應(yīng)該是這樣：總體需要用到的A結(jié)構(gòu)>>模塊>>二級模塊>細(xì)節(jié)；

并

且這個文檔最不容易修改的處于最上端，頻繁用于修改的在末端。最忌諱即興發(fā)揮，這

樣寫出的東西經(jīng)不起推敲，稍有變化就要忙得亂成一團(tuán)。結(jié)構(gòu)性的東西應(yīng)該謹(jǐn)慎精細(xì)。

原則四：

盡量把能夠放在一組的小圖標(biāo)或者圖片放在一個圖片文件里，這樣的好處有不少。

1、圖片文件的總量會變??；

2、利于下載，太多的小圖片下載效果是不理想的，往往會發(fā)現(xiàn)這個圖片出來，那

個沒出來，這樣在寫樣式的時候只需要寫一個總體的，對于具體的要顯示的只需要標(biāo)一

個位置，非常省時間，樣式也很精煉；

3、顯而易見，這樣做非常便于管理，替換或者新增的時候工作量很小。

原則五：

切圖的原則，應(yīng)該切大的圖絕不切小，應(yīng)該切小的絕不切大，能夠用顏色代替的絕

不切圖。把一個大圖切成不少份并不一定能夠加快頁面的顯示速度，相反會浪費(fèi)不少不

必要的帶寬。不光要控制圖片文件的多少，還要考慮到這樣切會不會造成頁面增加許多

額外的代碼。

原則六：

圖片使用能名稱表達(dá)圖片意義的名詞命名，盡量不要使用編號命名。

原則七：

涉及多行多列的特殊是列寬有不固定的，堅(jiān)決用表格，千萬不要為了DIV而DIV。

多個圖片規(guī)則羅歹ij時，可以使用<dl><dt></dt><dd></ddx/dl>。

原則八：

盡可能不把樣式直接寫到元素的標(biāo)簽里(除非這人樣式浮現(xiàn)的幾率特殊小，有相當(dāng)

程度的偶然性)。

原則九：

盡量不要用ID來定義或者索引樣式，ID的惟一性比較高，且用ID索引樣式效率非常

低而且兼容性的問題也比較明顯。

6.文件命名原則

前臺文件組織

在前臺頁面文件中，每一個大類功能模塊(子系統(tǒng))單獨(dú)創(chuàng)建一個文件夾，使用與

之相關(guān)的故意義的英文名詞命名。例如有一個系統(tǒng)包括后臺管理(admin)、前臺商城

(shop)>會員中心(member)和商家中心(store)等子系統(tǒng)，文件夾組織：

每一個子系統(tǒng)中應(yīng)該包含一個缺省的html文件，文件名統(tǒng)一用，即當(dāng)用戶缺省訪

問該目錄時，自動加載該頁面。

公用頁面(如登錄、頁頭、頁腳、導(dǎo)航、菜單、信息/錯誤提示等)，可以統(tǒng)一放

在common目錄中。

頁面命名規(guī)則

具有管理功能的頁面，如用名、角色、設(shè)備、日志、文章等的管理，可以歸納為列

表。、新建。、編輯。等幾類操作，所以在頁面組織時，每類模塊單獨(dú)創(chuàng)建一個

文件夾，使用能夠表達(dá)模塊意義的英文名詞命名，并在其中分別創(chuàng)建、、等文件，對應(yīng)

于內(nèi)容列表、添加、編輯等操作。示例：

其它說明：

1.在列表頁面里統(tǒng)一使用“四欄式''顯示風(fēng)格，即列表頁面里必須包括模塊目錄/

位置提示、工具欄（含添加、編輯、刪除、刷新、查詢等操作控件）、表格、分頁操作

等部份。示例：

2.表格用于顯示查詢內(nèi)容，在打開時，必須默認(rèn)加載一定的記錄；表格欄目僅

顯示用戶常用或者關(guān)心的字段；在顯示時必須對表格內(nèi)容進(jìn)行必要的格式處理；對記錄

常用的操作可以放置于操作欄內(nèi)（如上圖中的操作欄內(nèi)放置有編輯和刪除兩個操作按

鈕）。

3.表格可以統(tǒng)一使用easyuidatagrid或者bootstapdatatableso

.資源文件的命名原則

資源文件包括css、js、圖片等內(nèi)容。所有資源文件統(tǒng)一存儲在web根目錄

resource文件夾中▼示例：

每一個子系統(tǒng)（大類）文件夾命名規(guī)則同規(guī)則。

每一個子系統(tǒng)文件夾中分別包括css、js和images,示例：

多個子系統(tǒng)公共使用的資源，統(tǒng)一存儲在common文件夾中，如常用的js操作，可

以命名為，放置在commoMjs/。

圖片命名規(guī)則

圖片分成兩部份，一是網(wǎng)頁設(shè)計(jì)時使用的靜態(tài)資源，通常不會因系統(tǒng)的運(yùn)行而發(fā)生

變化，另一類是程序生成、用戶上傳、終端上傳的圖片。

(1)靜態(tài)圖片存儲在resources'大類目錄\images中，使用能表達(dá)圖片逝義的英文

些詞命名，不能使用圖片編號命名。網(wǎng)面使用的小圖標(biāo)，可以放置在一個圖片文件中,

使用css裁切和背景方式顯示在頁面中。

(2)動態(tài)圖片存儲在resources'upload目錄中,在其中創(chuàng)建分類圖片目錄。例如，

與系統(tǒng)相關(guān)的圖片存儲在system目錄中，設(shè)備監(jiān)控相關(guān)圖片存儲在management中等。

為了避免同一文件夾中文件數(shù)量限制，在分類目錄中，按上傳日期分成不同的次級目錄,

命名規(guī)則為上傳文件所在的yyyyMM(年度月份)，其中月份使用兩位數(shù)字表示。例如：

上傳的圖片統(tǒng)一使用GUID標(biāo)識進(jìn)行命名，即在上傳時，由接收的java程序自動生

成guid編號+.圖片擴(kuò)展名進(jìn)行命名。

注意：保存圖片時，文件擴(kuò)展名必須保持不變。示例：

7.常用HTML標(biāo)識符

HTML標(biāo)記一覽:

文件標(biāo)記

<IITML>■文件聲明讓瀏覽器知道這是HTML文件

<IIEAD>■開頭提供文件整體資訊

<TITLE>■標(biāo)題定義文件標(biāo)題，將顯示于瀏覽頂端

<B0DY>■本文設(shè)計(jì)文件格式及為文所在

排版標(biāo)記

。一注解一〉O說明標(biāo)記為文件加之說明，但不被顯示

<P>O段落標(biāo)記為字、畫、表格等之間留一空白行

<BR>o換行標(biāo)記令字、畫、表格等顯示于下一行

<IIR>o水平線插入一條水平線

<CENTER>■居中令字、畫、表格等顯示于中間反對

<PRE>?預(yù)設(shè)格式令文件按照原始碼的羅列方式顯示

<DIV>■區(qū)隔標(biāo)記設(shè)定字、畫、表格等的擺放位置

<N0BR>■不折行令文字不因太長而繞行

<WBR>■建議折行預(yù)設(shè)折行部位

字體標(biāo)記

<STRONG>?加重語氣產(chǎn)生字體加粗BOLD的效果

<B>■粗體標(biāo)記產(chǎn)生字體加粗的效果

<EM>■強(qiáng)調(diào)標(biāo)記字體浮現(xiàn)斜體效果

<I>■斜體標(biāo)記字體浮現(xiàn)斜體效果

<TT>■打字字體COURIER字體，字母寬度相同

<U>■加之底線加之底線反對

<II1>?一級標(biāo)題標(biāo)記變粗變大加寬，程度與級數(shù)反比

<H2>■二級標(biāo)題標(biāo)記將字體變粗變大加寬

<H3>■i級標(biāo)題標(biāo)記將字體變粗變大加寬

<H4>■四級標(biāo)題標(biāo)記將字體變粗變大加寬

<H5>■五級標(biāo)題標(biāo)記將字體變粗變大加寬

<H6>■六級標(biāo)題標(biāo)記將字體變粗變大加寬

<FONT>?字形標(biāo)記設(shè)定字形、大小、顏色反對

<BASEFONT>O基準(zhǔn)字形標(biāo)記設(shè)定所有字形、大小、顏色反對

<BIG>?字體加大令字體稍為加大

<SMALL>■字體縮細(xì)令字體稍為縮細(xì)

<STRIKE>■畫線刪除為字體加一刪除線反對

<CODE>■程式碼字體稍為加寬如（TT>

<KBD>?鍵盤字字體稍為加寬，單一空白

<SAMP>■范例字體稍為加寬如（n>

<VAR>■變數(shù)斜體效果

<CITE>?傳記引述斜體效果

<BLOCKQl：OTE>?引述文字區(qū)塊縮排字體

<DFN>?述語定義斜體效果

<ADDRESS>■地址標(biāo)記斜體效果

<SUB>?下標(biāo)字下標(biāo)字

<SUP>■上標(biāo)字指數(shù)（平方、立方等）

清單標(biāo)記

<0L>■順序清單清單項(xiàng)目將以數(shù)字、字母順序羅列

<UL>■無序清單清單項(xiàng)目將以圓點(diǎn)羅列

<LI>o清單項(xiàng)目每一標(biāo)記標(biāo)示一項(xiàng)清單項(xiàng)目

<MENU>■選單清單清單項(xiàng)目將以圓點(diǎn)羅列，如<UL>反對

<DIR>?目錄清單清單項(xiàng)目將以圓點(diǎn)羅列，如<UL>反對

\DL>■定義清單清單分兩層浮現(xiàn)

<DT>O定義條目標(biāo)示該項(xiàng)定義的標(biāo)題

<DD>O定義內(nèi)容標(biāo)示定義內(nèi)容

表格標(biāo)記

<TABLE>■表格標(biāo)記設(shè)定該表格的各項(xiàng)參數(shù)

<CAPTION>■表格標(biāo)題做成一打通列以填入表格標(biāo)題

<TR>■表格列設(shè)定該表格的列

<TD>■表格欄設(shè)定該表格的欄

<TII>■表格標(biāo)頭相等于<TD>,但其內(nèi)之字體味變粗

表單標(biāo)記

<FORM>?表單標(biāo)記決定單一表單的運(yùn)作模式

<TEXTAREA>■文字區(qū)塊提供文字方盒以輸入較大量文字

<INPUT>O輸入標(biāo)記決定輸入形式

<SELECT>■選擇標(biāo)記建立POP-UP卷動清單

<OPTTON>o選項(xiàng)每一標(biāo)記標(biāo)示一個選項(xiàng)

圖形標(biāo)記

'<IMG>o圖形標(biāo)記用以插入圖形及設(shè)定圖形屬性

連結(jié)標(biāo)記

<A>■連結(jié)標(biāo)記加入連結(jié)

<BASE>O基準(zhǔn)標(biāo)記可將相對URL轉(zhuǎn)絕對及指定連結(jié)目標(biāo)

框架標(biāo)記

<FRAMESET>■框架設(shè)定設(shè)定框架

<FRAME>o框窗設(shè)定設(shè)定框窗

<IFRAME>o頁內(nèi)框架于網(wǎng)頁中間插入框架IE

<NOFRAMES>■不支援框架設(shè)定當(dāng)瀏覽器不支援框架時的提示

影像地圖

Q!AP>■影像地圖名稱設(shè)定影像地圖名稱

<AREA>o連結(jié)區(qū)域設(shè)定各連結(jié)區(qū)域

多媒體

|<BGSOUND>o背景聲音十背景播放聲音或者音樂IE

<EMBED>o多媒體加入聲音、音樂或者影像

其他標(biāo)記

<MARQUEE>■走動文字令文字?jǐn)[布走動IE

<BL1NK>■閃爍文字閃爍文字NC

<ISINDEX>°頁內(nèi)尋覓器可輸入關(guān)鍵字尋覓于該一頁反對

<META>o開頭定義讓瀏覽器知道這是HTML文件

<LINK>O關(guān)系定義定義該文件與其他URL的關(guān)系

STYLESHEET

<STYLE>?樣式表控制網(wǎng)頁版面

<SPAN>?自訂標(biāo)記獨(dú)立使用或者與樣式表同用

注：

??表示該標(biāo)記屬圍堵標(biāo)記，即需要關(guān)閉標(biāo)記如</標(biāo)記九

.O表示該標(biāo)記屬空標(biāo)記，即不需要關(guān)閉標(biāo)記。

?1E表示該標(biāo)記只合月于INTERNETEXPLORERo

?NC表示該標(biāo)記只合用于NETSCAPECOMMUNICATOR。

?反對表示該標(biāo)記不為W3C所贊同，通常這標(biāo)記是IE或者NC自訂，且己為眾

所

支持，只是HTML標(biāo)準(zhǔn)中有其它同功能或者更好的選擇。

棄用表示該標(biāo)記己為W3C所棄用，是過時的標(biāo)記，但HTML具向下兼容的特性，不

用耽心新瀏覽器不支援舊標(biāo)記。

第二部份

1.基本書寫規(guī)范

所有的CSS的盡量采用外部調(diào)用

<LINKhref="7slyIe/Mrel=nstylesheet"lype="text/cssu>

書寫時重定義的最先，偽類其次，自定義最后（其中a:linka:visiteda:hover

a:actived要按照順序?qū)懀┍阌谧约汉退碎喿x。

為了保證不同瀏覽器上字號保持一致，字號建議用點(diǎn)數(shù)pt和像素px來定義，pt普

通使用中文宋體的9Pt和11即px普通使用中文宋體12Px和這是經(jīng)過優(yōu)化的字號：黑

體字或者宋體字加粗時，普通選用llpx和的字號比較合適。

字體選擇：優(yōu)先使用微軟雅黑，其次為宋體，可以統(tǒng)一在body中定義，而自定義

樣式中，不需要重復(fù)定義字體。如：

CSS推薦模板

body?{font-size:9pt;font-family:Arial,Helveticazsans-serif;color:#333333;text-align:center;

margin:Opx;}

ul?{margin:auto;}

img?{border:Opx;}

a?{font-size:9pt;text-decoration:none;color:#FFFFFF;}

a:hover?{font-size:9pt;text-decoration:underline;color:#990000;}

{font-size:9pt;color:#3366cc;text-decoration:none)

:hover?{font-size:9pt;color:#FF9900;text-decoration:none)

.colorblue,colorblue:hover?{color:#003366?;}.blue?{font-family:"^^";font-size:9pt;lin

e-height:20px;color:#0099FF;letter-spacing:5em}

.colorRed,:hover{color:#FFOOOO;}.colorLimez:hover{color:#00FF00;}.colorGreen/:hover

{color:#008000;}.colorBlue,:hover{color:#0000FF;}.colorOrange,:hover{color:#FFA500;}

為了保證瀏覽器的兼容性，必須設(shè)置頁面背景〈bodybgcoIor="#FFFFFF->

CSS注釋寫法

在定義的css文件頂部添加文件說明、作者、時間等說明，如例：

一級CSS上面必須加之注釋，說明樣式的用處。必要時可以添加作者、創(chuàng)建時

間、修改人、修改時間。示洌：

命名參考

CSS文件名統(tǒng)一使用小寫英文單詞命名。

樣式定義變量統(tǒng)一使用class命名方式，不建議使用id命名方式。如下圖中，使用

'定義的樣式為class命名方式，使用怦，引導(dǎo)的樣式為id命名方式。Id命名方式僅針對于

html中使用id定義的元素，通常復(fù)用性較差。

常用的CSS命名規(guī)則：

頭：header

內(nèi)容：content/conlainer

尾：footer

導(dǎo)航：nav

側(cè)欄：sidebar

容2S：container/box主導(dǎo)航：mainNav子導(dǎo)航：subNav頂導(dǎo)航：

topNav網(wǎng)站標(biāo)志：logo大廣告：banner頁面中部：mainBody菜單：menu

菜單內(nèi)容：menuContent子菜單:subMenu子菜單內(nèi)容:subMenuContent搜

索：search搜索關(guān)鍵字：keyword搜索范圍：range標(biāo)簽文字：tagTitle標(biāo)簽

內(nèi)容：tagContent當(dāng)前標(biāo)簽：tagCurrent/currentTag

標(biāo)題：title

列表：list

當(dāng)前位置：currentPath

圖標(biāo)：icon

注釋：note

登錄：login

注冊：register

欄目：column

列定義：column.Iof3（三列中的第一列）column_2of3（三列中的第二歹U

）column_3of3（三列中的第三列）

直觀命名

當(dāng)在設(shè)計(jì)Web頁面以及需要對一個div進(jìn)行標(biāo)識的時候，最自然的想法就是使用

可以描述元素所在頁面位置的詞匯來對其命名。如：

自上而下分組：top-panel

橫向?qū)Ш剑篽orizontal-nav

左面邊欄：left-side

中心-欄目：center-column

右面：right-col

css復(fù)用

不需要重復(fù)定義可繼承的值，子元素自動繼承父元素的屬性值，象顏色、字體

等，已經(jīng)在父元素中定義過的，在子元素中可以直接繼承，不需要重復(fù)定義，除非是為

了更變當(dāng)前元素樣式不使用父元素的屬性值，但是要注意，瀏覽器可能用一些默認(rèn)值覆

蓋你的定義。

?多重CSS樣式定義

CSS屬性追加惠復(fù)最叵優(yōu)先原則，即一個標(biāo)簽可以同時定義多個class,也可以是

同一個class中重復(fù)定義屬性。例如：

先定義兩個樣式

在頁面代碼中，我們可以這樣調(diào)用：

<divclass=onetwo></div>

當(dāng)應(yīng)用兩個或者多個樣式時，瀏覽器所應(yīng)用的樣式根據(jù)是屬性追加重復(fù)最后優(yōu)

先原則。即兩個或者多個或者重復(fù)的樣式名定義，瀏覽器所應(yīng)用的樣式是按先后順序

的，如果定義了重復(fù)的屬性值，以最后定義的為準(zhǔn)，如果應(yīng)用了兩個或者多個樣式名,

里面不重復(fù)定義的屬性值就追加之去，重復(fù)的屬性值就以最后一個為準(zhǔn)。這里要注意

的是，樣式的先后不是根據(jù)頁面上應(yīng)用的名字順序，而是樣式表里的樣式順序。

作用域

CSS的作用域是通過書寫方式來實(shí)現(xiàn)的更準(zhǔn)確的說法應(yīng)該叫做選擇器如果你深

入了解后，同樣能達(dá)到編程思想中的“命名空間”、"全局”、”私有”、“繼承''等"編程

特性''更能體現(xiàn)他特點(diǎn)的也就是他名字中的“層疊樣式

如下面的P的作用域：

/*作用域：全局*/p{text-indent:2em;}

產(chǎn)作用域：.demo這個類中*/

.demop{color:#000000;}

3.CSS樣式書寫順序

顯示屬性

*display*list-style*position*float*clear

自身屬性

*width*height*margin*padding*border*background

文本屬性

*color*font*text-decoration*text-align*vertical-align*white-space

*othertext*content

4.其它規(guī)范

圖片樣式

禁止用＜imgwidth=height=＞來人為干預(yù)圖片顯示的尺寸，即在HTML代碼中的

＜img＞標(biāo)簽中不要帶上width和height兩個屬性，因?yàn)橹谱鬟^程中，圖片往往需要反復(fù)

的修改。

但是使用CSS控制圖片大小時，當(dāng)網(wǎng)頁還未加載圖片時，不會留出圖片的占位大

小，可能會造成網(wǎng)頁在加載過程中顫動（如果圖片是插在一個固定大小的表格里的，不

會有這個現(xiàn)象），特別是當(dāng)圖片的尺寸較大時，這種現(xiàn)象會很明顯。所以當(dāng)預(yù)料到這種

會明顯導(dǎo)致網(wǎng)頁顫動的情況會發(fā)生時，務(wù)必給＜img＞附上width和height屬性。

換行

為了最大程度的發(fā)揮瀏覽器自動排版的功能，在一段完整的文字中請盡量不要使用

＜br＞來人工干預(yù)分段。

字體

所有的字號都應(yīng)該用樣式表來實(shí)現(xiàn)，禁止在頁面中浮現(xiàn)〈fontsize=＞標(biāo)記。

請不要在網(wǎng)頁中連續(xù)浮現(xiàn)多于一個的也盡量少使用全角空格（英文字符集下，全角

空格會變成亂碼），空白應(yīng)該盡量使用text-indent,padding,margin,hspace,

vspace以及透明的gif圖片來實(shí)現(xiàn)。

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

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

第三部份JavaScript規(guī)范

1.命名規(guī)范

基本原則

規(guī)范的命名能使程序更易閱讀，從而更易于理解。它們也可以提供一些標(biāo)識功能方

面的信息，有助于更好的理解代碼和應(yīng)用。

A使用可以準(zhǔn)確說明變量/函數(shù)/原型(prototype)的完整英文描述符。例如，

firstName,listAllUsers或者CorporateCustomer等，避免使用漢語拼音、不相

關(guān)單詞及漢字進(jìn)行命名。

A采用大小寫混合，提高名字的可讀性。普通應(yīng)該采用小寫字母，但是原型

(protolype)命名時任意單詞的首字母大寫。

A盡量少用縮寫，但如果一定要使用，當(dāng)使用公共縮寫和習(xí)慣縮寫等，如實(shí)

現(xiàn)(implement)可縮寫成impL經(jīng)理(manager)可縮寫成mgr等，嚴(yán)禁濫用

縮寫。

A避免使用長名字(最好不超過25個字母)。

A避免使用相似或者僅在大小寫上有區(qū)別的名字。

A避免使用數(shù)字，但可用2代替to,用4代替fbr等，如：gu2Jspo此外，若元

素id包含數(shù)字則除外

Prototype/Method命名規(guī)范

原型Prototype

所有單詞首字母大寫。使用能切當(dāng)反應(yīng)該原型含義、功能等的詞。普通采用名

1可。

方法Method/函數(shù)Function

方法的命名應(yīng)采用完整的、能夠清晰表達(dá)該方法功能的英文描述符，首字母小

寫，其他單詞的首字母大寫。方法名稱的第一個單詞往往采用一個有強(qiáng)烈動作色采的動

詞口

取值類使用gel前綴，設(shè)值類使用set前綴，判斷類使用is(has)前綴。如下例所

示：

getName()

setSarry()

isLogon()

方法參數(shù)建議順序：（被操作者，操作內(nèi)容，操作標(biāo)志，其他……）。如下例所

示：

functionreplace（sourceStr,

代碼組織與風(fēng)格

代碼組織和風(fēng)格的基本原則是：利于個人開辟，便于相互交流。

因個人習(xí)慣和編輯器等可以設(shè)置而形成自己獨(dú)特的風(fēng)格，但必須先后一致，并符

合木規(guī)范的基本要求和原則，

本章所涉及到的內(nèi)容普通都可在editplus工具編輯環(huán)境中進(jìn)行相應(yīng)設(shè)置。

整體風(fēng)格

整體風(fēng)格可以參考Java篇代碼組織與結(jié)構(gòu)的整體風(fēng)格章節(jié)。

縮排

代碼中以TAB(4個字符)縮進(jìn)，在編輯器中請將TAB設(shè)置為相同的長度，否則在

不同編輯器或者設(shè)置下會導(dǎo)致TAB長度不等而影響整個程序代碼的格式。

所有腳本代碼全部左起空4格位開始，如下：

s文件或者頁面內(nèi)嵌腳五，一律左起空四格再寫

functiontest(){

)

文件布局

外部js文件普通放置在與HTML頁面文件平級的js目錄下。

內(nèi)嵌js,普通應(yīng)放在HTML標(biāo)簽vhead＞內(nèi)，特殊情況也可在＜body＞內(nèi)

3.注釋格式規(guī)范

在每一個JS文件頂部，必須加入文件說明性注釋，示例：

注意：其它基本同JAVA篇的注釋格式規(guī)范章節(jié)。

4.編程規(guī)范

javascript是一種基于對象的、解釋型的腳本語言，它本身不如JAVA那樣嚴(yán)格，因

此編程規(guī)范上可以相對簡化一些?？梢詤⒖糺ava編程翅范。

原型

每一個原型都應(yīng)該定義toString()方法以便輸出實(shí)用信息。

toStringO方法示例:

I★*

*函數(shù)說明：輸出Tree基本信息

functionTree(){

)

return”[Tree]”；

)

方法

基本原則

避免在一個較長的方法里提供多個出口：

if(null==user)...

boolean類型判斷語句盡量不要條件比較值true/false

if(lisCond)...

}捕捉處理。

可預(yù)見錯誤

對可預(yù)見的錯誤不進(jìn)行捕捉處理，而是在錯誤發(fā)生前通過條件判斷避免發(fā)生,

如：

100;

『'JavaScript對象

JavaScript中的所有事物都是對象：字符串、數(shù)值、數(shù)組、函數(shù)…此

外，JavaScript允許自定義對象。

JavaScript對象

JavaScript提供多個內(nèi)建對象，比如String、Date、Array等等。對象

只是帶有屬性和方法的特殊數(shù)據(jù)類型。

訪問對象的屬性

屬性是與對象相關(guān)的值。

訪問對象屬性的語法是：

自定義對象

創(chuàng)建JavaScript對象

本項(xiàng)目中使用對象構(gòu)造器定義對象。

實(shí)例

functionperson(firstname^lastname,age,eyecolor)

=firstname;

=lastname;

=age；

=eyecolor;

創(chuàng)建JavaScript對象實(shí)例

一旦您有了對象構(gòu)造器，就可以創(chuàng)建新的對象實(shí)例，就像這樣:

vanmyFather=newperson("Bill","Gates",56,"blue");

varmyMother=newperson("Steve"Dobs"\AS,"green");

把屬性添加到JavaScript對象

可以通過為對象賦值，向已有對象添加新屬性:

假設(shè)personObj已存在，可以為其添加這些新屬性：firstname、lastname、age

以及eyecolor：

="Gates";

=56;

="blue";

x=；

把方法添加到JavaScript對象

方法只無非是附加在對象上的函數(shù)。

在構(gòu)造器函數(shù)內(nèi)部定義對象的方法：

functionperson(firstname,lastname,age,eyecolor)

{

??■V■■*??*■■*■aw?MBa?*^v?Mv?ww??aBwa?BawMaa?^ww?*<

=firstname;

=lastname;

=age；

=eyecolor;

=changeName;

functionchangeName(name)

{

=name;

}

I?w?wwv?????■??aaaww***?ww????■*???***??■*MMW*?>W*WM*V?WBV?VMV(aaaw**?*n**?wvW*NV?(?■aNwaawwMWVWVWVWVMBMMBavwwnr■

人人文庫> 全部分類> 教育資料 > 輔導(dǎo)培訓(xùn)

溫馨提示

1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
5. 人人文庫網(wǎng)僅提供信息存儲空間，僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負(fù)責(zé)。
6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請與我們聯(lián)系，我們立即糾正。
7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

WEB前端編碼規(guī)范精修訂

文檔簡介

溫馨提示

最新文檔

評論

WEB前端編碼規(guī)范精修訂

文檔簡介

溫馨提示

最新文檔

評論

相關(guān)文檔