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