本規(guī)范針對網(wǎng)頁開發(fā)人員編寫，在閱讀前請先了解一些XHTML、CSS的基本知識，以方便理解編寫的內(nèi)容。本規(guī)范的目的是為了方便大家在開發(fā)過程中，通用的、易于維護(hù)、高效率的制作WEB界面。由于本規(guī)范編寫者個人水平的局限，可能會出現(xiàn) 錯誤 與 個人習(xí)慣差異的地方，敬請個人讀者多提寶貴見意來完善本規(guī)范的內(nèi)容。
一 命名規(guī)則：
01. 目錄：
除非有特殊情況外，目錄 應(yīng)使用 小寫字母(包含 數(shù)字 下劃線) 的組合，并且以字母開頭其中不得包含漢字、空格與特殊字符，否則在網(wǎng)頁讀取過程中可能會出現(xiàn)錯誤；
目錄命名 請盡量以 英文為指導(dǎo)，不到萬不得已不要以拼音作為目錄名稱，經(jīng)驗(yàn)證明用拼音命名的目錄往往連一個月后的自己都看不懂；
以下為一些常用目錄的推薦英文名稱：
images 放網(wǎng)站不同欄目的頁面都要用到的公共圖片
medias 放 flash、avi、quick time 等多媒體文件
commons 放 js、include 等公共文件
styles 放 css 樣式文件
temps 放一些策劃與設(shè)計(jì)中使用的原始資料與備份文件
在根目錄中原則上應(yīng)該按照首頁的欄目結(jié)構(gòu)，給每一個欄目開設(shè)一個目錄，根據(jù)需要在每一個欄目的目錄中開設(shè)一個 images 和 medias 的子目錄用以放置此欄目專有的圖片和多媒體文件，如果這個欄目的內(nèi)容特別多，又分出很多下級欄目，可以相應(yīng)的再開設(shè)其他目錄。
temps目錄中的文件與網(wǎng)上無關(guān)，請杜絕非內(nèi)容的上傳。
02. 文件：
除非有特殊情況外，文件命名 應(yīng)使用 小寫字母(包含 數(shù)字 下劃線) 的組合， 并且以字母開頭其中不得包含漢字、空格與特殊字符；
文件命名 請盡量以 英文 為指導(dǎo)，不到萬不得已不要以拼音作為目錄名稱；
內(nèi)容不同但屬于同類的，且需定期更新的頁面文件或文本采用，請使用名稱縮寫＋(年份)＋月份＋日期＋序號，如：detail_news060101.html
以下為一些常用文件命名的格式推薦：
首頁類文件 index(_xxxxxx).后綴名 [index_wealth.html]
列表類文件 list(_xxxxxx).后綴名 [list.jsp]
內(nèi)容類文件 detail(_xxxxxx).后綴名 [detail.jsp]
表單類文件 post(_xxxxxx).后綴名 [post.jsp]
表單反饋類文件 result(_xxxxxx).后綴名 [result.jsp]
圖片類文件 文件類型_xxxxx(圖片序號)(背景).后綴名 (詳見以下)
廣告圖片動畫類文件 xxxxxx_widthxheight.后綴名 (詳見以下)
03. 圖片文件：
透明的1x1像素圖片名稱為：c.gif
圖片的分類及命名規(guī)則：
廣告類 banner banner_vnvbiz_500x400.swf | banner_vnvbiz_680x100.swf
標(biāo)志類 logo logo.gif | logo_newyear2007.gif
按鈕類 button button_01.gif | button_01bg.gif
菜單類 menu menu_aboutus.gif | menu_job.gif
裝飾類 pic pic_01.gif | pic_02.gif
欄目類 title title_top01.gif | title_top02bg.gif
二 設(shè)計(jì)規(guī)范：
01. 整體規(guī)范：
主體框架頁面、內(nèi)容頁盡量采用方型結(jié)構(gòu)。禁用長距離的斜線及弧線結(jié)構(gòu)，可允許小范圍內(nèi)的斜線及弧線。但封面頁、專題頁可不受此限制。
設(shè)計(jì)時盡量在方塊區(qū)邊緣、按鈕、標(biāo)題裝飾塊上體現(xiàn)設(shè)計(jì)技巧，拐角可以有曲線變化。拐角塊最大不得超過18像素。同一頁面弧度盡量保持一致。
統(tǒng)一按顯示器分辨率暫為 1024×768px 來設(shè)計(jì)頁面，所以使用最大寬度 900px進(jìn)行設(shè)計(jì)。
網(wǎng)站頁面長度建議1屏半到2屏。原則上長度不超過3屏，寬度不超過1屏。根據(jù)用戶習(xí)慣和網(wǎng)站需要，站點(diǎn)首頁、分欄首頁可設(shè)計(jì)超過3屏。
設(shè)置模塊外間距與內(nèi)間距的時候，建設(shè)使用5px來設(shè)置。
02. 圖片標(biāo)準(zhǔn)尺寸：
除了布局類文件沒有限制外，其它的廣告、產(chǎn)品等圖片，基本滿足以下三種規(guī)格：
1x1 => 正方比例；
4x3 => 黃金比例；
另外還有一種的特定圖片尺寸。
以下為一些常見圖片的推薦尺寸：
全尺寸banner => 468×60px；
半尺寸banner => 234×60px；
產(chǎn)品縮略圖片 => 100×75px；
內(nèi)容圖片 => 50×50px 120×90px
圖片文件大小一般保持在 5k 以內(nèi)；大尺寸的banner文件大小保持在15k 以內(nèi)。
圖片文件在設(shè)計(jì)新注意，盡量使用單一的尾數(shù)值0與5，比如：325 410。這樣有利于提高工作效率。
03. 文字規(guī)范：
網(wǎng)頁中總體上使用：
字體 font-family:Arial, Helvetica, sans-serif
字號 font-size:12px
字色 color:#000
大字體設(shè)置上請多使用雙尾數(shù)值，比如 12px 14px 16px 22px：
一般標(biāo)題宋體 粗體12px
模塊標(biāo)題宋體 粗體14px
內(nèi)容標(biāo)題宋體 粗體16px
文字的行間距也請多使用雙尾數(shù)值：
12號字體常用行間中距 18px│20px│22px
14號宋體常用行間中距 24px│26px│28px
文字的顏色請使用216安全色，方便定義和規(guī)范顏色，即類似于 "#000000 | #CC6666 | #66CCFF"
04. 鏈接規(guī)范：
新聞、信息類通常用新開窗口方式打開。
頂部導(dǎo)航、底部導(dǎo)航通常采取在本頁打開，特殊欄目和功能可新開窗口。
鏈接帶下劃線為鏈接通常的默認(rèn)風(fēng)格，頂部導(dǎo)航或特殊位置為了觀賞性可用樣式表取消下劃線。
鏈接的顏色可配合主題顏色風(fēng)格改變，通常為藍(lán)色、暗藍(lán)色、黑色，但激活后的鏈接顏色、鼠標(biāo)移動其上時的鏈接顏色要同本身顏色進(jìn)行區(qū)分。
三 XHTML制作規(guī)范：
01. 制作規(guī)范總論：
每個網(wǎng)頁都應(yīng)注明 DTD 版本信息，并且放在網(wǎng)頁的最上面。
所有xhtml標(biāo)簽都必須使用小寫，并且必須有屬性值，且加雙引號。
所有xhtml標(biāo)簽都必須閉合。
"網(wǎng)頁大小"定義為網(wǎng)頁的所有文件大小的總和，包括html文件和所有的嵌入的對象。用戶喜歡快的而不是新奇的站點(diǎn)。對于解調(diào)器用戶，網(wǎng)頁大小保持在70K以下為合適，40K以下更好。
為了更好的控制代碼長度與代碼的可讀性，盡量使用手寫代碼來完成書寫，并且使用tab來控制代碼縮進(jìn)（嚴(yán)禁使用空格鍵）。
所有的文件聯(lián)接與鏈接都使用絕對路徑的形式，如：/news/detail.asp?id=1111
在制作頁面時，請先全局性的了解一下頁面的結(jié)構(gòu)，然后按粗放到細(xì)致的順序去完成頁面。最后是同一欄目使用同時制作，從而減少ＣＳＳ的代碼量。
02. 網(wǎng)頁文件通用模板：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Language" contect="zh-CN" />
<title></title>
</head>
<body>
</body>
</html>
03. 頁首head區(qū)代碼規(guī)范：
網(wǎng)站簡介： <meta name="description" content="網(wǎng)站的簡介" />
搜索關(guān)鍵字： <meta name="keywords" content="關(guān)鍵字1,關(guān)鍵字2..." />
搜索機(jī)器人： <meta name="robots" content="all" />(all,none,index,noindex,follow,nofollow)
網(wǎng)頁著作者： <meta name="author" content="" />
網(wǎng)頁版權(quán)注釋： <meta name="copyright" content="" />
網(wǎng)頁定時跳轉(zhuǎn)： <meta http-equiv="refresh" content="10; url=http://yourlink" />
網(wǎng)頁間轉(zhuǎn)換時加入效果：
<meta http-equiv="page-enter" content="revealtrans(duration=10, transition=50)" />
<meta http-equiv="page-exit" content="revealtrans(duration=20, transition=6)" />收藏夾圖片：
<link type="image/x-icon" rel="icon" href="/favicon.ico" />
<link type="image/x-icon" rel="shortcut icon" href="/favicon.ico" />RSS文件代碼：
<link type="application/rss+xml" rel="alternate" title="" href="rss/feed.rss" />
04. CSS調(diào)用規(guī)范：
<link type="text/css" rel="stylesheet" href="style/style.css" />
所有的css的盡量采用外部調(diào)用：
代碼較長的首頁和重要欄目首頁可直接內(nèi)嵌css，避免調(diào)用時間太長，使頁面未及時調(diào)用css風(fēng)格而顯得凌亂。
某些獨(dú)立存在的單頁也可以使用以上的方法。
在類似換模板的css調(diào)用時，請遵守前后順序的規(guī)定。
05. JS調(diào)用規(guī)范：
<script type=" text/javascript" src=" commons/xxxxx.js"></script>
所有的javascript腳本盡量采取外部調(diào)用：
某些獨(dú)立存在的單頁也可以使用直接內(nèi)嵌JS。
JS的編寫每個人都有自己的習(xí)慣用法，這是沒有辦法統(tǒng)一的，所以請?jiān)诰帉憰r多加一點(diǎn)注釋信息，以方便其它同事可以讀懂與修改。
06. img標(biāo)簽規(guī)范：
<img src="" width="" height="" border="0" alt="" />
所有img標(biāo)簽除了程序控制寬高值外，都應(yīng)該 width="" height=""，這樣在圖形文件未被讀取時，保證瀏覽器預(yù)留圖形占用的空間，防止網(wǎng)頁最終顯示時出現(xiàn)抖動現(xiàn)象。
所有帶鏈接的img標(biāo)簽都應(yīng)該 border="0"。
一般img標(biāo)簽都應(yīng)該設(shè)置 alt=""，alt的內(nèi)容盡量貼近圖的內(nèi)容。
07. a標(biāo)簽規(guī)范：
<a href="" title="" class=""></a>
所有a標(biāo)簽都應(yīng)該有 title="" 的值，title的內(nèi)容盡量貼近鏈接的內(nèi)容。
除了默認(rèn)的鏈接ＣＳＳ，其它的特別鏈接都應(yīng)該有自己的class值，以方便其它鏈接調(diào)用。
希望可以使用三段式的ＣＳＳ設(shè)置，未點(diǎn)前 | 點(diǎn)擊中 | 已點(diǎn)后 這三種狀態(tài)，以方便用戶可以清楚的知道那些是已經(jīng)點(diǎn)過的。
一般鏈接到某一目錄下的缺省文件的鏈接路徑不必寫全名，如：
<a href="/aboutus/index.html"> 可以寫為 <a href="/aboutus/">
08. form標(biāo)簽與表單相關(guān)標(biāo)簽規(guī)范：
<form method="post | get" action=""></form>
<input type="text | password | radio | checkbox | submit | button | reset | image | file | hidden" name="" value="" size="" />
maxlength="" // 允許輸入的最大寬值
checked="checked" // radio checkbox類型中的選中
disabled="disabled" // 灰色不可選
readonly="readonly" // 只讀
<select name="" disabled="disabled"></select>
size="" // 拉長轉(zhuǎn)為高度狀態(tài)
multiple="multiple" // 可復(fù)選
<option value="" disabled="disabled"></option>
selected="selected" // 默認(rèn)值
<textarea name="" disabled="disabled" readonly="readonly"></textarea>
rows="" // 高度
cols="" // 寬度
<label for=""></label>
<button type="button | submit | reset" name="" value="" disabled="disabled"></button>
其中灰色文字代表的是可以選擇性輸入的部分。
所有form標(biāo)簽都應(yīng)該有 method="" 的值，默認(rèn)請使用post。
可以使用label標(biāo)簽來關(guān)聯(lián)表單標(biāo)簽。
可以使用table標(biāo)簽來控制表單的內(nèi)容形式。
請盡量把form標(biāo)簽放在table中間使用，如：<table><form><tr><td></td></tr></form></table>
09. table標(biāo)簽規(guī)范：
<table border="0" cellpadding="0" cellspacing="0" width="" height="" rules="groups">
<caption align="" valign=""> </caption>
<thead>
<tr>
<th></th>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td width="" height="" colspan="" rowspan=""></td>
<td width="">
<table border="0" cellpadding="0" cellspacing="0">
<tr><td></td></tr>
</table>
</td>
</tr>
</tbody>
<tfoot>
<tr><td></td></tr>
</tfoot>
</table>
使用div+css并不代表不可以再使用table，只是table不在用于結(jié)構(gòu)與布局。
除了以下幾個table標(biāo)簽屬性外，其它的table標(biāo)簽屬性最好放棄使用，因?yàn)槠浯嬖诩嫒菪詥栴}。
以下為表格的嵌套格式：
1.) 對于單獨(dú)的一個<table>來說，<table><tr>對齊，<td>縮進(jìn)一個tab。
2.) 對于存在<thead> <tbody> <tfoot>的<table>來說，<table> 與<thead><tbody><tfoot>對齊，<tr>縮進(jìn)一個tab。
3.) 如果<td>中沒有任何嵌套的表格，</td>結(jié)束標(biāo)記應(yīng)該與<td>處于同一行，不要換行。
4.) 如果<td>中出現(xiàn)嵌套表格，<td>下面的<table>縮進(jìn)一個tab。
5.) 如果<tr>下內(nèi)有一個<td>，并且<td>沒有任何嵌套，可以讓<tr><td>都處于同一行中。
原則上，不贊同使用超過三次的table嵌套，如出現(xiàn)這樣的樣式，都嘗試使用div等其它方式。
嵌套的表格大小盡量給定width和height數(shù)值，以便于瀏覽器加快解釋的速度，以下為設(shè)置寬高的基本原則，一行或一列都只存在一個width或height的值，做到只需修改一個值就可以讓頁面出現(xiàn)變化：
1.) 對于寬，可以只設(shè)置第一行的td寬。
2.) 對于高，可以只設(shè)置第一列的td高。
td有背景顏色，但無實(shí)質(zhì)性內(nèi)容的設(shè)置：
1.) 定義width<10px 且 不定義height 時，寫入<br />。
2.) 不定義width 且 定義height<10px 時，寫入"<img src= c.gif width=1 height=1>"。
3.) 定義width<10px 且 定義height<10px 時，寫入"<img src= c.gif width=1 height=1>"。
可以使用<caption>來設(shè)置表的描述。
可以使用<thead>來設(shè)置表頭。
可以使用<tbody>來設(shè)置表體。
可以使用<tfoot>來設(shè)置表尾。
10. 列表相關(guān)標(biāo)簽規(guī)范：
<ul>
<li></li>
</ul>
<ol>
<li></li>
</ol>
<menu>
<li></li>
</menu>
<dl>
<dt></dt>
<dd></dd>
</dl>
使用<li>、<dd>等格式控制時必須加注<ul></ul>和<dl></dl>，不準(zhǔn)單獨(dú)使用<li>、<dd>。
在一般情況下，列表中的margin padding 都應(yīng)該在css中設(shè)置為0，list-stype設(shè)置為none。
文字 + 行高 + 列表頭控制 + 列表頭圖片 統(tǒng)一寫入樣式，列表頭符號不加鏈接。
11. 其它：
為swf設(shè)置一個 <param name="wmode" value="transparent" /> 就可以解決swf總是浮動在總最上面的問題了，但同時在制作swf動畫時，按實(shí)際需要設(shè)置一個實(shí)色的底色框。
因?yàn)閙arquee的兼容性問題，所以請暫停使用本標(biāo)簽，可以使用javascript來完成滾動。
font標(biāo)簽也已經(jīng)被w3c拋棄，所以建議用CSS來替換使用。
四 CSS制作規(guī)范：
01. 一般常用CSS樣式的范本：
* { background:#fff; margin:0; padding:0; font-family: Arial, Helvetica, sans-serif; color: #000; }
ul, ol, menu, dl { list-style:none; }
p {text-indent:2em;}
a:link { color:#333; text-decoration:none; }
a:visited { color:#333; text-decoration:none; }
a:hover { color:#C60; text-decoration:underline; }
a:active { color:# C60; text-decoration:underline; }
02. 常用CSS縮寫形式：
字體縮寫：
font : font-style || font-variant || font-weight || font-size || line-height || font-family
font:normal normal normal 12px/18px 宋體;
背景縮寫：
Background : background-color || background-image || background-repeat || background-attachment || background-position
background:red url(images/bg.gif) repeat-y top right;
列表縮寫：
list-style : list-style-image || list-style-position || list-style-type
list-style:url(images/icon.gif) 0 0;
邊框縮寫：
border : border-width || border-style || border-color
border:1px solid black;
Box模形縮寫：
(上)(右)(下)(左) | (上)(左右)(下) | (上下)(左右) 這幾種表現(xiàn)方式。
color縮寫：
如果使用216安全色，就可以使用 #FFF, #F06這樣的表達(dá)形式了。
03. 常用布局形式：
為了兼容IE6、Firefox，在布局的時候請使用以下格式：
居中：margin:0 auto;
居右：margin:0 0 0 auto;
居左：margin:0 auto 0;
左浮動：float:left; clear:left;
右浮動：float:right; clear:right;
04. CSS語意性設(shè)置：
<h1>可以設(shè)置為與網(wǎng)頁的 title 一樣，不過可以通過 display:none; 隱藏，這樣做可以方便搜索引擎的提??；
<h2>可以設(shè)置文章的標(biāo)題；
<h3>可以用于分欄目的標(biāo)題；
<p>可以放置文章的內(nèi)容；
<label>可以與表單框?qū)?yīng)使用；
<menu>可以用來做一層的菜單；
<dl>可以用來做二層的菜單；
05. CSS常用命名規(guī)則：
命名 含義 命名 含義 命名 含義
header 頭部 container 內(nèi)容部分 footer 尾部
nav 導(dǎo)航 menu 菜單 crumb 當(dāng)前位置
left 左側(cè)部分 center 中間部分 right 右側(cè)部分
login 登錄 regsiter 注冊 search 搜索
06. CSS設(shè)置的注意事項(xiàng)：
Hack的問題：您永遠(yuǎn)也不知道下一次瀏覽器升級，它是否還不支持或支持原來的hack代碼，所以為了考慮兼容的問題，請不要使用hack來設(shè)置CSS。
!important的問題：同上，現(xiàn)ie7已經(jīng)支持!important了。
應(yīng)當(dāng)十分注意兼容性，應(yīng)當(dāng)在ie6、ie7、firefox、opera瀏覽器上測驗(yàn)通過。(需要解決ie7與ie6共存的問題)
可以多使用ＣＳＳ的子對象的繼承關(guān)系，但希望繼承關(guān)系不超出三層。
07. CSS設(shè)置小技巧：
在使用border來設(shè)置box的時候，在ie中會出現(xiàn)外邊框消失的問題，所以請?jiān)趚html中設(shè)置box的高度，這樣就可以解決這個問題。另外box設(shè)置高度也可以解決原來需要通過數(shù)據(jù)來撐開box的問題。
在使用padding來設(shè)置box的時候，其實(shí)際寬度 = width + padding[左右]。
在圖片的菜單中，可以放入文字的內(nèi)容，并通過text-indent:-999 隱藏，這樣可以讓不使用CSS的瀏覽器也可以使用菜單的內(nèi)容，同時也方便了搜索引擎的提取。
可以在使用span標(biāo)簽來實(shí)現(xiàn)一些排版的輔助，如：
<ul>
<li>商務(wù)新版上線測試<span>2007.03.09</span></li>
<li>商務(wù)新版上線測試<span>2007.03.09</span></li>
</ul>
然后在CSS定義span為右浮動，來實(shí)現(xiàn)日期與標(biāo)題的分欄顯示效果。
五 搜索引擎優(yōu)化：
使用flash或者圖片作為導(dǎo)航菜單的時候，會影響搜索引擎對其內(nèi)容的搜索，所以可以使用圖片替換文字的方式來做導(dǎo)航菜單，方法見(四06)
每個分欄都應(yīng)該精心設(shè)計(jì)其的meta標(biāo)簽、meta關(guān)鍵字。
六 其它：
01. 通用字符字體：
實(shí)體 表現(xiàn) 含義 實(shí)體 表現(xiàn) 含義
" " 引號 & & &號
< < <號 > > >號
版權(quán)所有 ? ? 注冊
空格
每個網(wǎng)頁都應(yīng)注明 DTD 版本信息，并且放在網(wǎng)頁的最上面。
所有xhtml標(biāo)簽都必須使用小寫，并且必須有屬性值，且加雙引號。
所有xhtml標(biāo)簽都必須閉合。
"網(wǎng)頁大小"定義為網(wǎng)頁的所有文件大小的總和，包括html文件和所有的嵌入的對象。用戶喜歡快的而不是新奇的站點(diǎn)。對于解調(diào)器用戶，網(wǎng)頁大小保持在70K以下為合適，40K以下更好。
為了更好的控制代碼長度與代碼的可讀性，盡量使用手寫代碼來完成書寫，并且使用tab來控制代碼縮進(jìn)（嚴(yán)禁使用空格鍵）。
所有的文件聯(lián)接與鏈接都使用絕對路徑的形式，如：/news/detail.asp?id=1111
在制作頁面時，請先全局性的了解一下頁面的結(jié)構(gòu)，然后按粗放到細(xì)致的順序去完成頁面。最后是同一欄目使用同時制作，從而減少ＣＳＳ的代碼量。
02. 網(wǎng)頁文件通用模板：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Language" contect="zh-CN" />
<title></title>
</head>
<body>
</body>
</html>
03. 頁首head區(qū)代碼規(guī)范：
網(wǎng)站簡介： <meta name="description" content="網(wǎng)站的簡介" />
搜索關(guān)鍵字： <meta name="keywords" content="關(guān)鍵字1,關(guān)鍵字2..." />
搜索機(jī)器人： <meta name="robots" content="all" />(all,none,index,noindex,follow,nofollow)
網(wǎng)頁著作者： <meta name="author" content="" />
網(wǎng)頁版權(quán)注釋： <meta name="copyright" content="" />
網(wǎng)頁定時跳轉(zhuǎn)： <meta http-equiv="refresh" content="10; url=http://yourlink" />
網(wǎng)頁間轉(zhuǎn)換時加入效果：
<meta http-equiv="page-enter" content="revealtrans(duration=10, transition=50)" />
<meta http-equiv="page-exit" content="revealtrans(duration=20, transition=6)" />收藏夾圖片：
<link type="image/x-icon" rel="icon" href="/favicon.ico" />
<link type="image/x-icon" rel="shortcut icon" href="/favicon.ico" />RSS文件代碼：
<link type="application/rss+xml" rel="alternate" title="" href="rss/feed.rss" />
04. CSS調(diào)用規(guī)范：
<link type="text/css" rel="stylesheet" href="style/style.css" />
所有的css的盡量采用外部調(diào)用：
代碼較長的首頁和重要欄目首頁可直接內(nèi)嵌css，避免調(diào)用時間太長，使頁面未及時調(diào)用css風(fēng)格而顯得凌亂。
某些獨(dú)立存在的單頁也可以使用以上的方法。
在類似換模板的css調(diào)用時，請遵守前后順序的規(guī)定。
05. JS調(diào)用規(guī)范：
<script type=" text/javas
所有的javas
某些獨(dú)立存在的單頁也可以使用直接內(nèi)嵌JS。
JS的編寫每個人都有自己的習(xí)慣用法，這是沒有辦法統(tǒng)一的，所以請?jiān)诰帉憰r多加一點(diǎn)注釋信息，以方便其它同事可以讀懂與修改。
06. img標(biāo)簽規(guī)范：
<img src="" width="" height="" border="0" alt="" />
所有img標(biāo)簽除了程序控制寬高值外，都應(yīng)該 width="" height=""，這樣在圖形文件未被讀取時，保證瀏覽器預(yù)留圖形占用的空間，防止網(wǎng)頁最終顯示時出現(xiàn)抖動現(xiàn)象。
所有帶鏈接的img標(biāo)簽都應(yīng)該 border="0"。
一般img標(biāo)簽都應(yīng)該設(shè)置 alt=""，alt的內(nèi)容盡量貼近圖的內(nèi)容。
07. a標(biāo)簽規(guī)范：
<a href="" title="" class=""></a>
所有a標(biāo)簽都應(yīng)該有 title="" 的值，title的內(nèi)容盡量貼近鏈接的內(nèi)容。
除了默認(rèn)的鏈接ＣＳＳ，其它的特別鏈接都應(yīng)該有自己的class值，以方便其它鏈接調(diào)用。
希望可以使用三段式的ＣＳＳ設(shè)置，未點(diǎn)前 | 點(diǎn)擊中 | 已點(diǎn)后 這三種狀態(tài)，以方便用戶可以清楚的知道那些是已經(jīng)點(diǎn)過的。
一般鏈接到某一目錄下的缺省文件的鏈接路徑不必寫全名，如：
<a href="/aboutus/index.html"> 可以寫為 <a href="/aboutus/">
08. form標(biāo)簽與表單相關(guān)標(biāo)簽規(guī)范：
<form method="post | get" act
<input type="text | password | radio | checkbox | submit | button | reset | image | file | hidden" name="" value="" size="" />
maxlength="" // 允許輸入的最大寬值
checked="checked" // radio checkbox類型中的選中
disabled="disabled" // 灰色不可選
readonly="readonly" // 只讀
<select name="" disabled="disabled"></select>
size="" // 拉長轉(zhuǎn)為高度狀態(tài)
multiple="multiple" // 可復(fù)選
<option value="" disabled="disabled"></option>
selected="selected" // 默認(rèn)值
<textarea name="" disabled="disabled" readonly="readonly"></textarea>
rows="" // 高度
cols="" // 寬度
<label for=""></label>
<button type="button | submit | reset" name="" value="" disabled="disabled"></button>
其中灰色文字代表的是可以選擇性輸入的部分。
所有form標(biāo)簽都應(yīng)該有 method="" 的值，默認(rèn)請使用post。
可以使用label標(biāo)簽來關(guān)聯(lián)表單標(biāo)簽。
可以使用table標(biāo)簽來控制表單的內(nèi)容形式。
請盡量把form標(biāo)簽放在table中間使用，如：<table><form><tr><td></td></tr></form></table>
09. table標(biāo)簽規(guī)范：
<table border="0" cellpadding="0" cellspacing="0" width="" height="" rules="groups">
<caption align="" valign=""> </caption>
<thead>
<tr>
<th></th>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td width="" height="" colspan="" rowspan=""></td>
<td width="">
<table border="0" cellpadding="0" cellspacing="0">
<tr><td></td></tr>
</table>
</td>
</tr>
</tbody>
<tfoot>
<tr><td></td></tr>
</tfoot>
</table>
使用div+css并不代表不可以再使用table，只是table不在用于結(jié)構(gòu)與布局。
以下為表格的嵌套格式：
1.) 對于單獨(dú)的一個<table>來說，<table><tr>對齊，<td>縮進(jìn)一個tab。
2.) 對于存在<thead> <tbody> <tfoot>的<table>來說，<table> 與<thead><tbody><tfoot>對齊，<tr>縮進(jìn)一個tab。
3.) 如果<td>中沒有任何嵌套的表格，</td>結(jié)束標(biāo)記應(yīng)該與<td>處于同一行，不要換行。
4.) 如果<td>中出現(xiàn)嵌套表格，<td>下面的<table>縮進(jìn)一個tab。
5.) 如果<tr>下內(nèi)有一個<td>，并且<td>沒有任何嵌套，可以讓<tr><td>都處于同一行中。
原則上，不贊同使用超過三次的table嵌套，如出現(xiàn)這樣的樣式，都嘗試使用div等其它方式。
嵌套的表格大小盡量給定width和height數(shù)值，以便于瀏覽器加快解釋的速度，以下為設(shè)置寬高的基本原則，一行或一列都只存在一個width或height的值，做到只需修改一個值就可以讓頁面出現(xiàn)變化：
1.) 對于寬，可以只設(shè)置第一行的td寬。
2.) 對于高，可以只設(shè)置第一列的td高。
td有背景顏色，但無實(shí)質(zhì)性內(nèi)容的設(shè)置：
1.) 定義width<10px 且 不定義height 時，寫入<br />。
2.) 不定義width 且 定義height<10px 時，寫入"<img src= c.gif width=1 height=1>"。
3.) 定義width<10px 且 定義height<10px 時，寫入"<img src= c.gif width=1 height=1>"。
可以使用<caption>來設(shè)置表的描述。
可以使用<thead>來設(shè)置表頭。
可以使用<tbody>來設(shè)置表體。
可以使用<tfoot>來設(shè)置表尾。
10. 列表相關(guān)標(biāo)簽規(guī)范：
<ul>
<li></li>
</ul>
<ol>
<li></li>
</ol>
<menu>
<li></li>
</menu>
<dl>
<dt></dt>
<dd></dd>
</dl>
使用<li>、<dd>等格式控制時必須加注<ul></ul>和<dl></dl>，不準(zhǔn)單獨(dú)使用<li>、<dd>。
在一般情況下，列表中的margin padding 都應(yīng)該在css中設(shè)置為0，list-stype設(shè)置為none。
文字 + 行高 + 列表頭控制 + 列表頭圖片 統(tǒng)一寫入樣式，列表頭符號不加鏈接。
11. 其它：
為swf設(shè)置一個 <param name="wmode" value="transparent" /> 就可以解決swf總是浮動在總最上面的問題了，但同時在制作swf動畫時，按實(shí)際需要設(shè)置一個實(shí)色的底色框。
因?yàn)閙arquee的兼容性問題，所以請暫停使用本標(biāo)簽，可以使用javas
font標(biāo)簽也已經(jīng)被w3c拋棄，所以建議用CSS來替換使用。
四 CSS制作規(guī)范：
01. 一般常用CSS樣式的范本：
* { background:#fff; margin:0; padding:0; font-family: Arial, Helvetica, sans-serif; color: #000; }
ul, ol, menu, dl { list-style:none; }
p {text-indent:2em;}
a:link { color:#333; text-decoration:none; }
a:visited { color:#333; text-decoration:none; }
a:hover { color:#C60; text-decoration:underline; }
a:active { color:# C60; text-decoration:underline; }
02. 常用CSS縮寫形式：
字體縮寫：
font : font-style || font-variant || font-weight || font-size || line-height || font-family
font:normal normal normal 12px/18px 宋體;
背景縮寫：
Background : background-color || background-image || background-repeat || background-attachment || background-position
background:red url(images/bg.gif) repeat-y top right;
列表縮寫：
list-style : list-style-image || list-style-position || list-style-type
list-style:url(images/icon.gif) 0 0;
邊框縮寫：
border : border-width || border-style || border-color
border:1px solid black;
Box模形縮寫：
(上)(右)(下)(左) | (上)(左右)(下) | (上下)(左右) 這幾種表現(xiàn)方式。
color縮寫：
如果使用216安全色，就可以使用 #FFF, #F06這樣的表達(dá)形式了。
03. 常用布局形式：
為了兼容IE6、Firefox，在布局的時候請使用以下格式：
居中：margin:0 auto;
居右：margin:0 0 0 auto;
居左：margin:0 auto 0;
左浮動：float:left; clear:left;
右浮動：float:right; clear:right;
04. CSS語意性設(shè)置：
<h1>可以設(shè)置為與網(wǎng)頁的 title 一樣，不過可以通過 display:none; 隱藏，這樣做可以方便搜索引擎的提??；
<h2>可以設(shè)置文章的標(biāo)題；
<h3>可以用于分欄目的標(biāo)題；
<p>可以放置文章的內(nèi)容；
<label>可以與表單框?qū)?yīng)使用；
<menu>可以用來做一層的菜單；
<dl>可以用來做二層的菜單；
05. CSS常用命名規(guī)則：
命名 含義 命名 含義 命名 含義
header 頭部 container 內(nèi)容部分 footer 尾部
nav 導(dǎo)航 menu 菜單 crumb 當(dāng)前位置
left 左側(cè)部分 center 中間部分 right 右側(cè)部分
login 登錄 regsiter 注冊 search 搜索
06. CSS設(shè)置的注意事項(xiàng)：
Hack的問題：您永遠(yuǎn)也不知道下一次瀏覽器升級，它是否還不支持或支持原來的hack代碼，所以為了考慮兼容的問題，請不要使用hack來設(shè)置CSS。
!imp
應(yīng)當(dāng)十分注意兼容性，應(yīng)當(dāng)在ie6、ie7、firefox、opera瀏覽器上測驗(yàn)通過。(需要解決ie7與ie6共存的問題)
可以多使用ＣＳＳ的子對象的繼承關(guān)系，但希望繼承關(guān)系不超出三層。
07. CSS設(shè)置小技巧：
在使用border來設(shè)置box的時候，在ie中會出現(xiàn)外邊框消失的問題，所以請?jiān)趚html中設(shè)置box的高度，這樣就可以解決這個問題。另外box設(shè)置高度也可以解決原來需要通過數(shù)據(jù)來撐開box的問題。
在使用padding來設(shè)置box的時候，其實(shí)際寬度 = width + padding[左右]。
在圖片的菜單中，可以放入文字的內(nèi)容，并通過text-indent:-999 隱藏，這樣可以讓不使用CSS的瀏覽器也可以使用菜單的內(nèi)容，同時也方便了搜索引擎的提取。
可以在使用span標(biāo)簽來實(shí)現(xiàn)一些排版的輔助，如：
<ul>
<li>商務(wù)新版上線測試<span>2007.03.09</span></li>
<li>商務(wù)新版上線測試<span>2007.03.09</span></li>
</ul>
然后在CSS定義span為右浮動，來實(shí)現(xiàn)日期與標(biāo)題的分欄顯示效果。
五 搜索引擎優(yōu)化：
使用flash或者圖片作為導(dǎo)航菜單的時候，會影響搜索引擎對其內(nèi)容的搜索，所以可以使用圖片替換文字的方式來做導(dǎo)航菜單，方法見(四06)
每個分欄都應(yīng)該精心設(shè)計(jì)其的meta標(biāo)簽、meta關(guān)鍵字。
六 其它：
01. 通用字符字體：
實(shí)體 表現(xiàn) 含義 實(shí)體 表現(xiàn) 含義
" " 引號 & & &號
< < <號 > > >號
版權(quán)所有 ? ? 注冊
空格
