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