HTML編碼規範 - (WEB前端命名規範)

HTML編碼規範

  1  （一）命名規則：
  2 
  3         頭：header    
  4         內容：content/container   
  5         尾：footer   
  6         導航：nav   
  7         側欄：sidebar   
  8         欄目：column   
  9         頁面外圍控制總體佈局寬度：wrapper    
 10         左右中：left right center   
 11         登陸條：loginbar      
 12         標誌：logo       
 13         廣告：banner        
 14         頁面主體：main         
 15         熱點：hot         
 16         新聞：news      
 17         下載：download        
 18         子導航：subnav       
 19         菜單：menu          
 20         子菜單：submenu        
 21         搜索：search        
 22         友情連接：friendlink        
 23         頁腳：footer      
 24         版權：copyright         
 25         滾動：scroll        
 26         內容：content         
 27         標籤頁：tab        
 28         文章列表：list         
 29         提示信息：msg      
 30         小技巧：tips         
 31         欄目標題：title          
 32         加入：joinus          
 33         指南：guild           
 34         服務：service          
 35         註冊：regsiter          
 36         狀態：status        
 37         投票：vote     
 38         合做夥伴：partner      
 39 
 40     (二)註釋的寫法:
 41 
 42         /* Footer */
 43         內容區
 44         /* End Footer */
 45 
 46     (三)id的命名:
 47 
 48         (1)頁面結構
 49         容器: container
 50         頁頭：header
 51         內容：content/container
 52         頁面主體：main
 53         頁尾：footer
 54         導航：nav
 55         側欄：sidebar
 56         欄目：column
 57         頁面外圍控制總體佈局寬度：wrapper
 58         左右中：left right center
 59 
 60     (2)導航
 61 
 62         導航：nav
 63         主導航：mainbav
 64         子導航：subnav
 65         頂導航：topnav
 66         邊導航：sidebar
 67         左導航：leftsidebar
 68         右導航：rightsidebar
 69         菜單：menu
 70         子菜單：submenu
 71         標題: title
 72         摘要: summary
 73 
 74     (3)功能
 75 
 76         標誌：logo
 77         廣告：banner
 78         登錄：login
 79         登陸條：loginbar
 80         註冊：regsiter
 81         搜索：search
 82         功能區：shop
 83         標題：title
 84         加入：joinus
 85         狀態：status
 86         按鈕：btn
 87         滾動：scroll
 88         標籤頁：tab
 89         文章列表：list
 90         提示信息：msg
 91         當前的: current
 92         小技巧：tips
 93         圖標: icon
 94         註釋：note
 95         指南：guild
 96         服務：service
 97         熱點：hot
 98         新聞：news
 99         下載：download
100         投票：vote
101         合做夥伴：partner
102         友情連接：link
103         版權：copyright

WEB前端命名規範

   1 1、規範目的
   2 
   3 1.1  概述
   4 
   5 爲提升團隊協做效率, 便於後臺人員添加功能及前端後期優化維護, 輸出高質量的文檔, 特制訂此文檔. 本規範文檔一經確認, 前端開發人員必須按本文檔規範進行前臺頁面開發. 本文檔若有不對或者不合適的地方請及時提出, 經討論決定後能夠更改此文檔.
   6 
   7 2、文件規範
   8 
   9 2.1  文件命名規則
  10 
  11 文件名稱統一用小寫的英文字母、數字和下劃線的組合，其中不得包含漢字、空格和特殊字符；命名原則的指導思想一是使得你本身和工做組的每個成員可以方便的理解每個文件的意義，二是當咱們在文件夾中使用「按名稱排例」的命令時，同一種大類的文件可以排列在一塊兒，以便咱們查找、修改、替換、計算負載量等等操做。
  12 
  13 a.  HTML的命名原則
  14 引文件統一使用index.htm  index.html  index.asp文件名（小寫）
  15 各子頁命名的原則首先應該以欄目名的英語翻譯取單一單詞爲名稱。例如：
  16 關於咱們 \ aboutus
  17 信息反饋 \ feedback
  18 產 品 \ product
  19 
  20 若是欄目名稱多而複雜並很差以英文單詞命名，則統一使用該欄目名稱拼音或拼音的首字母表示；
  21 每個目錄中應該包含一個缺省的html 文件，文件名統一用index.htm  index.html  index.asp；
  22 
  23 b.  圖片的命名原則
  24 
  25 圖片的名稱分爲頭尾兩部分，用下劃線隔開，頭部分表示此圖片的大類性質
  26 例如：廣告、標誌、菜單、按鈕等等。
  27 放置在頁面頂部的廣告、裝飾圖案等長方形的圖片取名： banner
  28 標誌性的圖片取名爲： logo
  29 在頁面上位置不固定而且帶有連接的小圖片咱們取名爲 button
  30 在頁面上某一個位置連續出現，性質相同的連接欄目的圖片咱們取名： menu
  31 裝飾用的照片咱們取名： pic
  32 不帶連接表示標題的圖片咱們取名： title
  33 範例：banner_sohu.gif  banner_sina.gif  menu_aboutus.gif  menu_job.gif  title_news.gif  logo_police.gif   logo_national.gif   pic_people.jpg
  34 鼠標感應效果圖片命名規範爲」圖片名+_+on/off」。
  35 例如：menu1_on.gif  menu1_off.gif
  36 
  37 c.  javascript的命名原則
  38 例如：廣告條的javascript文件名爲 ad.js  彈出窗口的javascript文件名爲 pop.js
  39 
  40 d.  動態語言文件命名原則
  41 以性質_描述，描述能夠有多個單詞，用「_」隔開，性質通常是該頁面得概要。
  42 範例：register_form.asp   register_post.asp   topic_lock.asp
  43 
  44 2.2  文件存放位置規範
  45 
  46 _Root       
  47 cn  存放中文HTML文件
  48 en  存放英文HTML文件
  49 flash   存放Flash文件
  50 images  存放圖片文件
  51 imagestudio 存放PSD源文件
  52 flashstudio 存放flash源文件
  53 inc 存放include文件
  54 library 存放DW庫文件
  55 media   存放多媒體文件
  56 project 存放工程項目資料
  57 temp    存放客戶原始資料
  58 js  存放JavaScript腳本
  59 css 存放CSS文件
  60 2.3  CSS 書寫規範
  61 基本原則：
  62 
  63 CSS樣式可細分爲3類：自定義樣式、從新定義HTML樣式、連接狀態樣式。
  64 
  65 1. 樣式爲設計師自定義的新 CSS 樣式，影響被使用本樣式的區域，用於完成網頁中局部的樣式設定。樣式名 「.」+「相應樣式效果描述的單詞或縮寫」例：「 .shadow 」
  66 文字樣式樣式名「.no」+「字號」+「行距」+「顏色縮寫」例：「 .no12 」 、「 .no12-24 」
  67 
  68 2. 義HTML樣式爲設計師從新定義已有的HTML標籤樣式，影響所有的被設定標籤樣式，用於統一網頁中某一標籤的樣式定義。樣式名「HTML標籤」例：hr { border: 1px dotted #333333 }
  69 
  70 3. 態樣式爲設計師對連接不一樣狀態設定特殊樣式，影響被使用本樣式區域中的連接。
  71 該樣式寫法有2種： a.nav:link    nav.a:link  第一種只能修飾<a>標籤中；第二種能夠修飾全部包含有<a>標籤的其餘標籤。
  72 
  73 頁面內的樣式加載必須用連接方式<link rel=」stylesheet」 type=」text/css」 href=」style/style.css」>
  74 
  75 注意細則：
  76 
  77 1. 協做開發及分工: i會根據各個模塊, 同時根據頁面類似程序, 事先寫好大致框架文件, 分配給前端人員實現內部結構&表現&行爲; 共用css文件base.css由i書寫, 協做開發過程當中, 每一個頁面請務必都要引入, 此文件包含reset及頭部底部樣式, 此文件不可隨意修改;
  78 
  79 2. class與id的使用: id是惟一的並是父級的, class是能夠重複的並是子級的, 因此id僅使用在大的模塊上, class可用在重複使用率高及子級中; id原則上都是由我分發框架文件時命名的, 爲JavaScript預留鉤子的除外;
  80 
  81 3. 爲JavaScript預留鉤子的命名, 請以 js_ 起始, 好比: js_hide, js_show;
  82 
  83 4. class與id命名: 大的框架命名好比header/footer/wrapper/left/right之類的在2中由i統一命名.其餘樣式名稱由 小寫英文 & 數字 & _ 來組合命名, 如i_comment, fontred, width200; 避免使用中文拼音, 儘可能使用簡易的單詞組合; 總之, 命名要語義化, 簡明化.
  84 
  85 5. 規避class與id命名(此條重要, 如有不明白請及時與i溝通):
  86 
  87 a, 經過從屬寫法規避, 示例見d;
  88 
  89 b, 取父級元素id/class命名部分命名, 示例見d;
  90 
  91 c, 重複使用率高的命名, 請以本身代號加下劃線起始, 好比i_clear;
  92 
  93 d, a,b兩條, 適用於在2中已建好框架的頁面, 如, 要在2中已建好框架的頁面代碼<div id=」mainnav」></div>中加入新的div元素,
  94 
  95 按a命名法則: <div id=」mainnav」><div class=」firstnav」>…</div></div>,
  96 
  97 樣式寫法:  #mainnav  .firstnav{…….}
  98 
  99 按b命名法則: <div id=」mainnav」><div class=」main_firstnav」>…</div></div>,
 100 樣式寫法:  .main_firstnav{…….}
 101 
 102 6. css屬性書寫順序, 建議遵循 佈局定位屬性–>自身屬性–>文本屬性–>其餘屬性. 此條可根據自身習慣書寫, 但儘可能保證同類屬性寫在一塊兒. 屬性列舉: 佈局定位屬性主要包括: margin、padding、float（包括clear）、position（相應的 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等.我所列出的這些屬性只是最經常使用到的, 並不表明所有;
 103 
 104 7. 書寫代碼前, 考慮並提升樣式重複使用率;
 105 
 106 8. 充分利用html自身屬性及樣式繼承原理減小代碼量, 好比:
 107 
 108 <ul class=」list」><li>這兒是標題列表<span>2010-09-15</span></ul>
 109 
 110 定義ul.list li{position:relative}  ul.list li span{position:absolute; right:0}
 111 
 112 便可實現日期居右顯示
 113 
 114 9. 樣式表中中文字體名, 請務必轉碼成unicode碼, 以免編碼錯誤時亂碼;
 115 
 116 10. 背景圖片請儘量使用sprite技術, 減少http請求, 考慮到多人協做開發, sprite按模塊製做;
 117 
 118 11. 使用table標籤時(儘可能避免使用table標籤), 請不要用width/ height/cellspacing/cellpadding等table屬性直接定義表現, 應儘量的利用table自身私有屬性分離結構與表現, 如thead,tr,th,td,tbody,tfoot,colgroup,scope; (cellspaing及cellpadding的css控制方法: table{border:0;margin:0;border-collapse:collapse;} table th, table td{padding:0;} , base.css文件中我會初始化表格樣式)
 119 
 120 12. 杜絕使用<meta http-equiv=」X-UA-Compatible」 content=」IE=7″ /> 兼容ie8;
 121 
 122 13. 用png圖片作圖片時, 要求圖片格式爲png-8格式,若png-8實在影響圖片質量或其中有半透明效果, 請爲ie6單獨定義背景:
 123 
 124 background:none;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=crop, src=’img/bg.png’);
 125 
 126 14. 避免兼容性屬性的使用, 好比text-shadow || css3的相關屬性;
 127 
 128 15. 減小使用影響性能的屬性, 好比position:absolute || float ;
 129 
 130 16. 必須爲大區塊樣式添加註釋, 小區塊適量註釋;
 131 
 132 17. 代碼縮進與格式: 建議單行書寫, 可根據自身習慣, 後期優化i會統一處理;
 133 
 134 
 135 
 136 
 137 
 138 命名規則：
 139 
 140 頭：header
 141 
 142 內容：content/container
 143 
 144 尾：footer
 145 
 146 導航：nav
 147 
 148 側欄：sidebar
 149 
 150 欄目：column
 151 
 152 頁面外圍控制總體佈局寬度：wrapper
 153 
 154 左右中：left right center
 155 
 156 登陸條：loginbar
 157 
 158 標誌：logo
 159 
 160 廣告：banner
 161 
 162 頁面主體：main
 163 
 164 熱點：hot
 165 
 166 新聞：news
 167 
 168 下載：download
 169 
 170 子導航：subnav
 171 
 172 菜單：menu
 173 
 174 子菜單：submenu
 175 
 176 搜索：search
 177 
 178 友情連接：friendlink
 179 
 180 頁腳：footer
 181 
 182 版權：copyright
 183 
 184 滾動：scroll
 185 
 186 內容：content
 187 
 188 標籤頁：tab
 189 
 190 文章列表：list
 191 
 192 提示信息：msg
 193 
 194 小技巧：tips
 195 
 196 欄目標題：title
 197 
 198 加入：joinus
 199 
 200 指南：guild
 201 
 202 服務：service
 203 
 204 註冊：regsiter
 205 
 206 狀態：status
 207 
 208 投票：vote
 209 
 210 合做夥伴：partner
 211 
 212 (二)註釋的寫法:
 213 
 214 /* Footer */
 215 
 216 內容區
 217 
 218 /* End Footer */
 219 
 220 (三)id的命名:
 221 
 222 (1)頁面結構
 223 
 224 容器: container
 225 
 226 頁頭：header
 227 
 228 內容：content/container
 229 
 230 頁面主體：main
 231 
 232 頁尾：footer
 233 
 234 導航：nav
 235 
 236 側欄：sidebar
 237 
 238 欄目：column
 239 
 240 頁面外圍控制總體佈局寬度：wrapper
 241 
 242 左右中：left right center
 243 
 244 
 245 
 246 (2)導航
 247 
 248 導航：nav
 249 
 250 主導航：mainbav
 251 
 252 子導航：subnav
 253 
 254 頂導航：topnav
 255 
 256 邊導航：sidebar
 257 
 258 左導航：leftsidebar
 259 
 260 右導航：rightsidebar
 261 
 262 菜單：menu
 263 
 264 子菜單：submenu
 265 
 266 標題: title
 267 
 268 摘要: summary
 269 
 270 
 271 
 272 (3)功能
 273 
 274 標誌：logo
 275 
 276 廣告：banner
 277 
 278 登錄：login
 279 
 280 登陸條：loginbar
 281 
 282 註冊：regsiter
 283 
 284 搜索：search
 285 
 286 功能區：shop
 287 
 288 標題：title
 289 
 290 加入：joinus
 291 
 292 狀態：status
 293 
 294 按鈕：btn
 295 
 296 滾動：scroll
 297 
 298 標籤頁：tab
 299 
 300 文章列表：list
 301 
 302 提示信息：msg
 303 
 304 當前的: current
 305 
 306 小技巧：tips
 307 
 308 圖標: icon
 309 
 310 註釋：note
 311 
 312 指南：guild
 313 
 314 服務：service
 315 
 316 熱點：hot
 317 
 318 新聞：news
 319 
 320 下載：download
 321 
 322 投票：vote
 323 
 324 合做夥伴：partner
 325 
 326 友情連接：link
 327 
 328 版權：copyright\
 329 
 330 基本樣式： 
 331 
 332 /* CSS Document */
 333 
 334 body {margin:0; padding:0; font:12px 「\5B8B\4F53″,san-serif;background:#fff;}
 335 
 336 div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,blockquote,p{padding:0; margin:0;}
 337 
 338 table,td,tr,th{font-size:12px;}
 339 
 340 li{list-style-type:none;}
 341 
 342 img{vertical-align:top;border:0;}
 343 
 344 ol,ul {list-style:none;}
 345 
 346 h1,h2,h3,h4,h5,h6 {font-size:12px; font-weight:normal;}
 347 
 348 address,cite,code,em,th {font-weight:normal; font-style:normal;}
 349 
 350 .fB{font-weight:bold;}
 351 
 352 .f12px{font-size:12px;}
 353 
 354 .f14px{font-size:14px;}
 355 
 356 .left{float:left;}
 357 
 358 .right{float:right;}
 359 
 360 
 361 
 362 a {color:#2b2b2b; text-decoration:none;}
 363 
 364 a:visited {text-decoration:none;}
 365 
 366 a:hover {color:#ba2636;text-decoration:underline;}
 367 
 368 a:active {color:#ba2636;}
 369 
 370 
 371 
 372 重定義的最早，僞類其次，自定義最後，便於本身和他人閱讀！
 373 
 374 
 375 
 376 不一樣瀏覽器上字號保持一致，字號建議用點數pt和像素px來定義，pt通常使用中文宋體的9pt 和11pt，px通常使用中文宋體12px 和14.7px 這是通過優化的字號，黑體字或者宋體字加粗時，通常選用11pt 和14.7px 的字號比較合適。中英文混排時，咱們儘量的將英文和數字定義爲verdana 和arial 兩種字體。
 377 
 378 
 379 
 380 
 381 
 382 2.4  html 書寫規範
 383 
 384 1. 網頁製做細節 —- head區代碼規範
 385 
 386 head區是指HTML代碼的<head>和</head>之間的內容。
 387 
 388 必須加入的標籤
 389 
 390 a) 公司版權註釋  <!— The site is designed by EHM,Inc 07/2005 —>
 391 
 392 b) 網頁顯示字符集
 393 
 394 簡體中文：<META HTTP-EQUIV=」Content-Type」 CONTENT=」text/html; charset=gb2312″>
 395 
 396 繁體中文：<META HTTP-EQUIV=」Content-Type」 CONTENT=」text/html; charset=utf-8″>
 397 
 398 英 語：<META HTTP-EQUIV=」Content-Type」 CONTENT=」text/html; charset=utf-8″>
 399 
 400 c) 網頁製做者信息  <META name=」author」 content=」webmaster@maketown.com」>
 401 
 402 d) 網站簡介  <META NAME=」DESCRIPTION」 CONTENT=」xxxxxxxxxxxxxxxxxxxxxxxxxx」>
 403 
 404 e) 搜索關鍵字  <META NAME=」keywords」 CONTENT=」xxxx,xxxx,xxx,xxxxx,xxxx,」>
 405 
 406 f) 網頁的css規範  <LINK href=」../css/style.css」 rel=」stylesheet」 type=」text/css」>
 407 
 408 g) 網頁標題  <title>xxxxxxxxxxxxxxxxxx</title>
 409 
 410 能夠選擇加入的標籤
 411 
 412 a) 設定網頁的到期時間。一旦網頁過時，必須到服務器上從新調閱。
 413 
 414 <META HTTP-EQUIV=」expires」 CONTENT=」Wed, 26 Feb 1997 08：21：57 GMT」>
 415 
 416 b) 禁止瀏覽器從本地機的緩存中調閱頁面內容。
 417 
 418 <META HTTP-EQUIV=」Pragma」 CONTENT=」no-cache」>
 419 
 420 c) 用來防止別人在框架裏調用你的頁面。
 421 
 422 <META HTTP-EQUIV=」Window-target」 CONTENT=」_top」>
 423 
 424 d) 自動跳轉。
 425 
 426 <META HTTP-EQUIV=」Refresh」 CONTENT=」5;URL=http：//www.yahoo.com」>  5指時間停留5秒
 427 
 428 e) 網頁搜索機器人嚮導。用來告訴搜索機器人哪些頁面須要索引，哪些頁面不須要索引。
 429 
 430 <META NAME=」robots」 CONTENT=」none」>
 431 
 432 CONTENT的參數有all,none,index,noindex,follow,nofollow。默認是all。
 433 
 434 f) 收藏夾圖標  <link rel = 「Shortcut Icon」 href=」favicon.ico」>
 435 
 436 g) 全部的javascript的調用盡可能採起外部調用.
 437 
 438 <SCRIPT LANGUAGE=」JavaScript」 SRC=」script/xxxxx.js」></SCRIPT>
 439 
 440 h) 附<body>標籤：
 441 
 442 <body>標籤不屬於head區，這裏強調一下，爲了保證瀏覽器的兼容性，必須設置頁面背景<body bgcolor=」#FFFFFF」>
 443 
 444 
 445 
 446 2. 網頁製做細節 —- 字體
 447 1. 在設定字體樣式時對於文字字號樣式和行間距應必須使用CSS樣式表。禁止在頁面中出現 <font size=?> 標記。
 448 
 449 2.在網頁中中文應首選使用宋體。英文和數字首選使用verdana 和arial 兩種字體。通常使用中文宋體的9pt 和11pt 或12px 和14.7px 這是通過優化的字號，黑體字或者宋體字加粗時，通常選用11pt 和14.7px 的字號比較合適。
 450 
 451 3. 爲了最大程度的發揮瀏覽器自動排版的功能，在一段完整的文字中請儘可能不要使用<br> 來人工干預分段。
 452 
 453 4.不一樣語種的文字之間應該有一個半角空格，但避頭的符號以前和避尾的符號以後除外，漢字之間的標點要用全角標點，英文字母和數字周圍的括號應該使用半角括號。
 454 
 455 5. 請不要在網頁中連續出現多於一個的   也儘可能少使用全角空格（英文字符集下，全角空格會變成亂碼），空白應該儘可能使用 text-indent, padding, margin, hspace, vspace 以及透明的gif 圖片來實現。
 456 
 457 6. 行距建議用百分比來定義，經常使用的兩個行距的值是line-height:120%/150%.
 458 
 459 7. 排版中咱們常常會遇到須要進行首行縮進的處理，不要使用   或者全角空格來達到效果，規範的作法是在樣式表中定義 p { text-indent: 2em; } 而後給每一段加上 <p> 標記，注意，通常狀況下，請不要省略 </p> 結束標記 。
 460 
 461 
 462 
 463 3. 網頁製做細節 —- 連接
 464 1. 網站中的連接路徑所有采用相對路徑，通常連接到某一目錄下的缺省文件的連接路徑沒必要寫全名，如咱們沒必要這樣：<a href=」aboutus/index.htm」> 而應該這樣：<a href=」aboutus/」>，全部內頁指向首頁的連接寫成<a href=」/」>
 465 
 466 2. 在瀏覽器裏，當咱們點擊空連接時，它會自動將當前頁面重置到首端，從而影響用戶正常的閱讀內容，咱們用代碼「javascript:void(null)」代替原來的「#」標記
 467 
 468 
 469 
 470 4. 網頁製做細節 —- 表格
 471 1px表格 style=」border-collapse: collapse」
 472 實例以下：
 473 <table border=」1″ cellspacing=」0″ width=」32″ height=」32″ style=」border-collapse: collapse」
 474 bordercolor=」#000000″ cellpadding=」0″>
 475 <tr>
 476 <td></td>
 477 </tr>
 478 </table>
 479 設置亮、暗邊框顏色
 480 表格有亮邊框（bordercolorlight）和暗邊框（bordercolordark）兩個屬性能夠對錶格樣式設置。
 481 <table border=」1″ width=」500″ bordercolorlight=」#000000″ bordercolordark=」#FFFFFF」>
 482 
 483 在寫 <table> 互相嵌套時，嚴格按照的規範，對於單獨的一個<table>來講，<table><tr>對齊，<td> 縮進兩個半角空格，<td> 中若是還有嵌套的表格，<table>也縮進兩個半角空格，若是<td>中沒有任何嵌套的表格，</td> 結束標記應該與 <td> 處於同一行，不要換行，
 484 如咱們注意在源代碼中不該有這樣的代碼：
 485 <td><img src=」../images/sample.gif」>
 486 </td>
 487 而應該是這樣的：
 488 <td><img src=」../images/sample.gif」></td>
 489 這是由於瀏覽器認爲換行至關於一個半角空格，以上不規範的寫法至關於無心中增長一個半角空格，若是確實有必要增長一個半角空格，也應該這樣寫：
 490 <td><img src=」../images/sample.gif」> </td>
 491 
 492 一個網頁要儘可能避免用整個一張大表格，全部的內容都嵌套在這個大表格以內，由於瀏覽器在解釋頁面的元素時，是以表格爲單位逐一顯示，若是一張網頁是嵌套在一個大表格以內，那麼極可能形成的後果就是，當瀏覽者敲入網址，他要先面對一片空白很長時間，而後全部的網頁內容同時出現。若是必須這樣作，請使用 <tbody>標記，以便可以使這個大表格分塊顯示
 493 
 494 
 495 
 496 5. 網頁製做細節 —- 下載速度
 497 首頁Flash 網頁大小應限定在 200K 如下，儘量的使用矢量圖形和Action來減少動畫大小。非首頁靜態頁面含圖片大小應限定在 70K 左右，儘量的使用背景顏色替換大塊同色圖片。
 498 
 499 
 500 
 501 6. 網頁製做細節 —- include
 502 asp標準寫法 <!–#include file=」inc/index_top.asp」 –>
 503 jsp 標準寫法 <%@ include file=」../inc/index_top..jsp」 %>
 504 
 505 
 506 
 507 7. 網頁製做細節 —- Alt和Title
 508 都是提示性語言標籤，請注意它們之間的區別。
 509 
 510 在咱們瀏覽網頁時，當鼠標停留在圖片對象或文字連接上時，在鼠標的右下角有時會出現一個提示信息框。對目標進行必定的註釋說明。在一些場合，它的做用是很重要的。
 511 
 512 alt 用來給圖片來提示的。Title用來給連接文字或普通文字提示的。
 513 
 514 用法以下：
 515 
 516 <p Title=」給連接文字提示」>文字</p>
 517 
 518 <a href=」#」 Title=」給連接文字提示」>文字</a>
 519 
 520 <img src=」圖片.gif」 alt=」給圖片提示」>
 521 
 522 8. 網頁製做細節 —- 緩存
 523 
 524 網頁不會被緩存
 525 
 526 HTM網頁
 527 
 528 <META HTTP-EQUIV=」pragma」 CONTENT=」no-cache」>
 529 
 530 <META HTTP-EQUIV=」Cache-Control」 CONTENT=」no-cache, must-revalidate」>
 531 
 532 <META HTTP-EQUIV=」expires」 CONTENT=」0″>
 533 
 534 ASP網頁
 535 
 536 Response.Expires = -1
 537 
 538 Response.ExpiresAbsolute = Now() – 1
 539 
 540 Response.cachecontrol = 「no-cache」
 541 
 542 9. 網頁製做細節 —- 瀏覽器兼容性
 543 建立站點時，應該明白訪問者可能使用各類 Web 瀏覽器。在已知的其餘設計限制下，儘量將站點設計爲具備最大的瀏覽器兼容性。
 544 目前使用的 Web 瀏覽器有二十多種，大多數已發行了多個版本。即便您只針對使用 Netscape Navigator 和 Microsoft Internet Explorer 的大多數 Web 用戶，但您應明確並非每一個人都在使用這兩種瀏覽器的最新版本。
 545 您的站點越複雜（在佈局、動畫、多媒體內容和交互方面），跨瀏覽器兼容的可能性就越小。例如，並不是全部的瀏覽器均可以運行JavaScript。不使用特殊字符的純文本頁面或許可以在任何瀏覽器中正確顯示，但比起有效地使用圖形、佈局和交互的頁面，這樣的頁面在美感上可能要差得多。因此，應儘可能在最佳效果設計和最大瀏覽器兼容性設計之間取得平衡。
 546 全部的HTML 標籤的屬性都要用單引號或者雙引號括起，即咱們應該寫 <a href=」url」> 而不 是 <a href=url>.
 547 
 548 
 549 
 550 10. 圖片處理細節 —- banner
 551 全尺寸banner爲468X60px，半尺寸banner爲234X60px，小banner爲88X31px。
 552 另外120X90，120X60也是小圖標的標準尺寸。全尺寸banner不超過14K。
 553 廣泛的banner尺寸760X100，750X120，468X60，468X95，728X90，585X140
 554 次級頁的pip尺寸360X300，336X280
 555 遊標:100X100或120X120
 556 
 557 
 558 
 559 11. 圖片處理細節 —- LOGO的國際標準規範
 560 爲了便於INTERNET上信息的傳播，一個統一的國際標準是須要的。實際上已經有了這樣的一整套標準。其中關於網站的LOGO，目前有三種規格：
 561 88*31 這是互聯網上最廣泛的LOGO規格。
 562 120*60 這種規格用於通常大小的LOGO。
 563 120*90 這種規格用於大型LOGO。
 564 
 565 
 566 
 567 12. 圖片處理細節 —- 頁面修飾圖片處理
 568 圖片通過優化以加快下載的速度,有較佳的視覺空間效果，用圖要與頁面風格、頁面內容相符；製做精美，細節處理得當。
 569 
 570 
 571 
 572 
 573 
 574 2.5  JavaScript書寫規範
 575 
 576 1. 書寫過程當中, 每行代碼結束必須有分號; 原則上全部功能均根據XXX項目需求原生開發, 以免網上down下來的代碼形成的代碼污染(沉冗代碼 || 與現有代碼衝突 || …);
 577 
 578 2. 庫引入: 原則上僅引入jQuery庫, 若需引入第三方庫, 須與團隊其餘人員討論決定;
 579 
 580 3. 變量命名: 駝峯式命名. 原生JavaScript變量要求是純英文字母, 首字母須小寫, 如iTaoLun; jQuery變量要求首字符爲’_’, 其餘與原生JavaScript 規則相同, 如: _iTaoLun; 另, 要求變量集中聲明, 避免全局變量.
 581 
 582 4. 類命名: 首字母大寫, 駝峯式命名. 如 ITaoLun;
 583 
 584 5. 函數命名: 首字母小寫駝峯式命名. 如iTaoLun();
 585 
 586 6. 命名語義化, 儘量利用英文單詞或其縮寫;
 587 
 588 7. 儘可能避免使用存在兼容性及消耗資源的方法或屬性, 好比eval() & innerText;
 589 
 590 8. 後期優化中, JavaScript非註釋類中文字符須轉換成unicode編碼使用, 以免編碼錯誤時亂碼顯示;
 591 
 592 9. 代碼結構明瞭, 加適量註釋. 提升函數重用率;
 593 
 594 10. 注重與html分離, 減少reflow, 注重性能.
 595 
 596 
 597 
 598 2.6   圖片規範
 599 
 600 1. 全部頁面元素類圖片均放入img文件夾, 測試用圖片放於img/demoimg文件夾;
 601 
 602 2. 圖片格式僅限於gif || png || jpg;
 603 
 604 3. 命名所有用小寫英文字母 || 數字 || _ 的組合，其中不得包含漢字 || 空格 || 特殊字符；儘可能用易懂的詞彙, 便於團隊其餘成員理解; 另, 命名分頭尾兩部分, 用下劃線隔開, 好比ad_left01.gif || btn_submit.gif;
 605 
 606 4. 在保證視覺效果的狀況下選擇最小的圖片格式與圖片質量, 以減小加載時間;
 607 
 608 5. 儘可能避免使用半透明的png圖片(若使用, 請參考css規範相關說明);
 609 
 610 6. 運用css sprite技術集中小的背景圖或圖標, 減少頁面http請求, 但注意, 請務必在對應的sprite psd源圖中劃參考線, 並保存至img目錄下.
 611 
 612 
 613 
 614 
 615 
 616 2.7  註釋規範
 617 
 618 1. html註釋: 註釋格式 <!–這兒是註釋–>, ‘–‘只能在註釋的始末位置,不可置入註釋文字區域;
 619 
 620 2. css註釋: 註釋格式 /*這兒是註釋*/;
 621 
 622 3. JavaScript註釋, 單行註釋使用’//這兒是單行註釋’ ,多行註釋使用 /* 這兒有多行註釋 */;
 623 
 624 
 625 
 626 
 627 
 628 2.8  瀏覽器兼容性 CSS hack
 629 
 630 
 631 
 632 1、標識區別：
 633 區別IE6,IE7,IE8,FF。
 634 1. IE都能識別* ; 標準瀏覽器(如FF)不能識別*；
 635 
 636 2. IE6能識別*，但不能識別 !important; IE6在樣式前面加_
 637 
 638 3. IE7能識別*，也能識別!important;
 639 
 640 4. IE8能識別\ 9 例如：background:red \9;
 641 
 642 5. firefox不能識別*，但能識別!important;
 643 
 644 
 645 
 646 1．IE6和firefox的區別：
 647 background:orange;*background:blue;
 648 意思就是火狐瀏覽器的背景顏色是橙色,而IE瀏覽器的背景色是藍色.
 649 
 650 2. IE6和IE7的區別：
 651 background:green !important;background:blue;
 652 意思指的是:IE7的背景顏色是綠色,IE6的背景顏色是藍色
 653 
 654 3. IE7和FF的區別：
 655 background:orange; *background:green;
 656 意思指的是:火狐瀏覽器的背景顏色是橙色,而IE7的背景顏色是綠色
 657 
 658 4. FF，IE7，IE6的區別：
 659 background:orange;
 660 *background:green !important;
 661 *background:blue;
 662 意思是火狐瀏覽器的的背景橙色,IE7瀏覽器的背景顏色是綠色,而IE6瀏覽器的顏色是藍色.
 663 
 664 2、實踐建議
 665 
 666 (1).  開發平臺的選擇
 667 
 668 在 Firefox 上編寫CSS, 同時兼容其餘瀏覽器的. 這樣作確定會比在 IE 作好再到別的瀏覽器兼容來得容易, 由於 IE 對老標準支持仍是很不錯的, 而 IE 的一些特有功能人家卻不支持. 因此推薦以 Firefox 結合 Firebug 擴展做爲平臺。
 669 
 670 (2).  CSS Hack 的順序
 671 
 672 使用 Firefox 做爲平臺, 只要代碼寫得夠標準, 其實要 Hack 的地方不會不少的, IE 之外的瀏覽器幾乎都不會有問題, 因此能夠暫時忽略,
 673 
 674 順序以下：Firefox -> IE6 -> IE7 -> 其餘
 675 
 676 (3).   Hack 的方法
 677 
 678 說到方法有兩種, 一種是在不一樣文件中處理, 另外一種則是在同一個文件中處理. 其實做用是相同的, 只是出發點不同而已.
 679 
 680 1. 同一文件中處理.
 681 如: id=」bgcolor」的控件要在 IE6中顯示藍色, IE7中顯示綠色, Firefox等其餘瀏覽器中顯示紅色。
 682 
 683 
 684 
 685 IE6不認 !important,也不認 *+html.因此 IE6只能是 blue.
 686 IE7認 !important,也認 *+html,優先度: (*+html + !important) > !important > +html. IE7能夠是 red, blue和 green,但 green的優先度最高.
 687 Firefox和其餘瀏覽器都認 !important. !important優先, Firefox能夠是 red和 blue,但 red優先度高.上述的優先符號均是 CSS3標準容許的,其餘瀏覽器也還有其餘的 Hack方法,但我迄今還沒遇到過 Firefox正常, IE之外的其餘瀏覽器不正常的狀況,因此無可分享.只要代碼規範,相信這種狀況的發生應該是很罕見 (JavaScript除外).
 688 
 689 2. 不一樣文件中處理.
 690 爲何同一文件中能夠處理還要寫在多個文件裏面針對不一樣的瀏覽器?這是爲了欺騙 W3C的驗證工具,其實只須要兩個文件,一個是針對全部瀏覽器的,一個只爲 IE服務.將全部符合 W3C的代碼寫到一個裏面去,而一些 IE中必須的,又不能經過 W3C驗證的代碼 (如: cursor:hand;)放到另外一個文件中,再用下面的方法導入.
 691 
 692 ========================================================================================
 693 
 694 Web 目錄結構規範：
 695 目錄創建的原則：以最少的層次提供最清晰簡便的訪問結構。
 696 目錄的命名以小寫英文字母，下劃線組成。
 697 根目錄通常只存放htm以及其餘必須的系統文件
 698 根目錄下的images用於存放各頁面都要使用的公用圖片。
 699 全部JS等腳本存放在根目錄下的scripts或js目錄
 700 全部CSS文件存放在根目錄下style或css目錄
 701 多語言版本存放於獨立的目錄。例如：簡體中文存放在cn目錄下，繁體中文存放在 tw目錄下，英文存放在en目錄下等。
 702 全部flash, avi, ram, quicktime 等多媒體文件存放在根目錄下的media目錄下。
 703 
 704 
 705 Web UI設計命名規範：
 706 2.1 Web 界面設計最佳尺寸
 707 
 708 960網格系統——web界面設計最佳尺寸
 709 
 710 目前絕大多數顯示器都支持 1024 x 768 及其以上分辨率。爲了有效的利用屏幕寬度同時保證柵格的靈活度，能夠看出960是很是合適的。這樣，在目前主流顯示器下，960就成爲網頁柵格系統中的最佳寬度了。
 711 
 712 
 713 
 714 2.2 網站設計及基本框架結構
 715 
 716 
 717 
 718 Container
 719 「container「 就是將頁面中的全部元素包在一塊兒的部分，這部分還能夠命名爲: 「wrapper「, 「wrap「, 「page「.
 720 
 721 Header
 722 「header」 是網站頁面的頭部區域，通常來說，它包含網站的logo和一些其餘元素。這部分還能夠命名爲:「page-header」 (或 pageHeader).
 723 
 724 Navbar
 725 「navbar「等同於橫向的導航欄，是最典型的網頁元素。這部分還能夠命名爲:「nav」, 「navigation」, 「nav-wrapper」.
 726 
 727 Menu
 728 「Menu」區域包含通常的連接和菜單，這部分還能夠命名爲: 「subNav 「, 「links「，「sidebar-main」.
 729 
 730 Main
 731 「Main」是網站的主要區域，若是是博客的話它將包含的日誌。這部分還能夠命名爲: 「content「, 「main-content」 (或「mainContent」)。
 732 
 733 Sidebar
 734 「Sidebar」 部分能夠包含網站的次要內容，好比最近更新內容列表、關於網站的介紹或廣告元素等…這部分還能夠命名爲: 「subNav 「, 「side-panel「, 「secondary-content「.
 735 
 736 Footer
 737 「Footer」包含網站的一些附加信息，這部分還能夠命名爲: 「copyright「
 738 
 739 
 740 
 741 2.3命名規則注意幾點
 742 
 743 儘可能考慮爲元素命名其自己的做用或」用意」，達到語義化。不要使用表面形式的命名.
 744 如:red/left/big等。
 745 
 746 組合命名規則:
 747 [元素類型]-[元素做用/內容]
 748 
 749 如:搜索按鈕: btn-search、登陸表單:form-login、新聞列表:list-news。
 750 
 751 涉及到交互行爲的元素命名:
 752 凡涉及交互行爲的元素一般會有正常、懸停、點擊和已瀏覽等不一樣樣式，命名可參考如下規則:
 753 
 754 鼠標懸停:：hover   點擊：click   已瀏覽：visited
 755 
 756 如:搜索按鈕: btn-search、btn-search-hover、btn-search-visited
 757 
 758 
 759 
 760 2.4經常使用命名彙總
 761 
 762 名稱  命名規範
 763 頁頭  header、top
 764 登陸條 loginbar
 765 標誌  logo
 766 側欄  sidebar
 767 廣告條 banner
 768 導航: nav
 769 子導航:    subNav
 770 菜單: menu
 771 子菜單:    subMenu
 772 下拉菜單:   dropMenu
 773 工具條:    toolbar
 774 表單: form
 775 欄目: column
 776 箭頭: arrow
 777 搜索: search
 778 搜索按鈕:   btn-search
 779 滾動條:    scroll
 780 內容: content
 781 標籤頁:    tab
 782 文章列表:   list
 783 小技巧:    tips
 784 欄目標題:   title
 785 連接: links
 786 頁腳: footer、end
 787 服務: service
 788 熱點: hot
 789 新聞: news
 790 下載: download
 791 註冊: Register 、reg
 792 狀態: status
 793 按鈕: btn
 794 上傳: upload
 795 登錄: login
 796 投票: vote
 797 合做夥伴:   partner
 798 版權: copyright
 799 網站地圖:   sitemap
 800 
 801 
 802 Web UI圖片命名規範：
 803 圖片名稱分爲頭尾兩兩部分，用下劃線隔開。
 804 頭部分表示此圖片的大類性質。
 805 例如： 放置在頁面頂部的廣告、裝飾圖案等長方形的圖片咱們取名：banner ；標誌性的圖片咱們取名爲：logo ；在頁面上位置不固定而且帶有連接的小圖片咱們取名爲button ；在頁面上作欄目連接的圖片咱們取名：menu ；不帶連接表示標題的圖片咱們取名：title ；裝飾用的照片咱們取名：pic ；依照此原則類推。
 806 
 807 尾部分用來表示圖片的具體含義，用英文字母表示。例如：gif  logo_lntu.gif  button_next.gif  menu_aboutus.gif  title_news.gif  pic_people.jpg
 808 有onmouse效果的圖片，兩張分別在原有文件名後加」_on」和」_off」命名。
 809 多語言的圖片應放到多語言目錄下
 810 
 811 
 812 Web基本框架佈局規範：
 813 Web基本框架佈局規範 經常使用到的Div和Table 兩種
 814 
 815 採用CSS+DIV對網站重構日趨被你們重視起來，有如下優點：
 816 
 817 1：表現和內容相分離 
 818 
 819 將設計部分剝離出來放在一個獨立樣式文件中，HTML文件中只存放文本信息。
 820 
 821 2：提升搜索引擎對網頁的索引效率 
 822 
 823 用只包含結構化內容的HTML代替嵌套的標籤，搜索引擎將更有效地搜索到你的網頁內容，並可能給你一個較高的評價。
 824 
 825 3：提升頁面瀏覽速度 
 826 
 827 對於同一個頁面視覺效果，採用CSS+DIV重構的頁面容量要比TABLE編碼的頁面文件容量小得多，前者通常只有後者的1/2大小。
 828 
 829 還有由於<table>標籤是要等</table>下載好之後才能夠顯示的，因此整個網頁是一會兒跳出來的，這樣讓人感受起來顯示速度很是的慢。而使用css+div,<div> 標籤不用等</div>下載好就能夠顯示裏面的內容的,因此讓人感受打開網頁的速度很是之快。
 830 
 831 4：易於維護和改版 
 832 
 833 你只要簡單的修改幾個CSS文件就能夠從新設計整個網站的頁面。
 834 
 835 從以上的描述來看，採用CSS+DIV對網站重構能夠大大提高網站用戶與搜索引擎的友好度。
 836 
 837 CSS+DIV因此成爲目前網頁佈局主流。
 838 
 839 
 840 
 841 Table最大缺點是代碼臃腫，你至少須要寫下 <table><tr><td>這三個標籤以後，才能開始真正的內容，另外，Table 的各類標籤中還包含了複雜的屬性定義，而 Div 只需 <div>一個標籤。
 842 
 843 頁面渲染性能問題：瀏覽器須要將整個表格徹底讀完後纔會開始渲染。
 844 
 845 不利於搜索引擎優化：搜索引擎喜歡內容與修飾分開。
 846 
 847 可訪問性差：屏幕朗讀軟件和盲文瀏覽器沒法很好地理解 Table 中的內容。
 848 
 849 不夠語義（Semantic）：咱們須要語義的 Web。
 850 
 851 通常table 只用作於數據處理。
 852 
 853 
 854 
 855 CSS樣式書寫規範及優化：
 856 5.1．CSS文件命名規範
 857 
 858 全局樣式：global.css；
 859 
 860 框架佈局：layout.css；
 861 
 862 字體樣式：font.css；
 863 
 864 連接樣式：link.css；
 865 
 866 打印樣式：print.css；
 867 
 868 
 869 
 870 5.2．經常使用類/ID命名規範
 871 
 872 頁　眉：header
 873 
 874 內　容：content
 875 
 876 容　器：container
 877 
 878 頁　腳：footer
 879 
 880 注　釋：note
 881 
 882 ……（更多參照2.4經常使用命名彙總）
 883 
 884 1、經常使用類的命名規則：
 885 
 886 應儘可能以常見英文單詞爲準，作到通俗易懂，並在適當的地方加以註釋。對於二級類/ID命名，則採用組合書寫的模式，後一個單詞的首字母應大寫：諸如「搜索框」則應命名爲「searchInput」、「搜索圖標」命名這「searchIcon」、「搜索按鈕」命名爲「searchBtn」……
 887 
 888 2、輔助圖片用背影圖處理：
 889 
 890 這裏的」輔助圖片」是指那些不是做爲頁面要表達的內容的一部分，而僅僅用於修飾、間隔、提醒的圖片。將其作背影圖處理，能夠在不改動頁面的狀況下經過CSS樣式來進行改動，如：#logo {background:url(images/logo.jpg) #FEFEFE no-repeat right bottom;}
 891 
 892 
 893 
 894 5.3結構與樣式分離：
 895 
 896 在頁面裏只寫入文檔的結構，而將樣式寫於css文件中，經過外部調用CSS樣式表來實現結構與樣式的分離。
 897 
 898 
 899 
 900 5.4、文檔的結構化書寫：
 901 
 902 頁面CSS文檔都應採用結構化的書寫方式，邏輯清晰易於閱讀。如：
 903 
 904 <div id=」mainMenu」>
 905 
 906 <ul>
 907 
 908 <li><a href=」#」 >首頁</a></li>
 909 
 910 <li><a href=」#」 >介紹</a></li>
 911 
 912 <li><a href=」#」 >服務</a></li>
 913 
 914 </ul>
 915 
 916 </div>
 917 
 918 
 919 
 920 /*=====主導航=====*/
 921 
 922 #mainMenu {
 923 
 924 width:100%;
 925 
 926 height:30px;
 927 
 928 background:url(images/mainMenu_bg.jpg) repeat-x;
 929 
 930 }
 931 
 932 #mainMenu ul li {
 933 
 934 float:left;
 935 
 936 line-height:30px;
 937 
 938 margin-right:1px;
 939 
 940 cursor:pointer;
 941 
 942 }
 943 
 944 /*=====主導航結束=====*/
 945 
 946 
 947 
 948 5.5註釋書寫規範
 949 
 950 1、行間註釋：
 951 
 952 直接寫於屬性值後面，如：
 953 
 954 .search{
 955 
 956 border:1px solid #fff;/*定義搜索輸入框邊框*/
 957 
 958 background:url(../images/icon.gif) no-report #333;/*定義搜索框的背景*/
 959 
 960 }
 961 
 962 2、整段註釋：
 963 
 964 分別在開始及結束地方加入註釋，如：
 965 
 966 /*=====搜索條=====*/
 967 
 968 .search {
 969 
 970 border:1px solid #fff;
 971 
 972 background:url(../images/icon.gif) no-repeat #333;
 973 
 974 }
 975 
 976 /*=====搜索條結束=====*/
 977 
 978 
 979 
 980 5.6 CSS樣式屬性代碼優化縮寫
 981 
 982 1、不一樣類有相同屬性及屬性值的縮寫：
 983 
 984 對於兩個不一樣的類，可是其中有部分相同甚至是所有相同的屬性及屬性值時，應對其加以合併縮寫，特別是當有多個不一樣的類而有相同的屬性及屬性值時，合併縮寫能夠減小代碼量並易於控制。如：
 985 
 986 #mainMenu {
 987 
 988 background:url(../images/bg.gif);
 989 
 990 border:1px solid #333;
 991 
 992 width:100%;
 993 
 994 height:30px;
 995 
 996 overflow:hidden;
 997 
 998 }
 999 
1000 #subMenu {
1001 
1002 background:url(../images/bg.gif);
1003 
1004 border:1px solid #333;
1005 
1006 width:100%;
1007 
1008 height:20px;
1009 
1010 overflow:hidden;
1011 
1012 }
1013 
1014 
1015 
1016 兩個不一樣類的屬性值有重複之處，剛能夠縮寫爲：
1017 
1018 #mainMenu,#subMenu {
1019 
1020 background:url(../images/bg.gif);
1021 
1022 border:1px solid #333;
1023 
1024 width:100%;
1025 
1026 overflow:hidden;
1027 
1028 }
1029 
1030 #mainMenu {height:30px;}
1031 
1032 #subMenu {height:20px;}
1033 
1034 
1035 
1036 2、同一屬性的縮寫：
1037 
1038 同一屬性根據它的屬性值也能夠進行簡寫，如：
1039 
1040 .search {
1041 
1042 background-color:#333;
1043 
1044 background-image:url(../images/icon.gif);
1045 
1046 background-repeat: no-repeat;
1047 
1048 background-position:50% 50%;
1049 
1050 }
1051 
1052 .search {
1053 
1054 background:#333 url(../images/icon.gif) no-repeat 50% 50%;
1055 
1056 }
1057 
1058 
1059 
1060 3、內外側邊框的縮寫：
1061 
1062 在CSS中關於內外側邊框的距離是按照上、右、下、左的順序來排列的，當這四個屬性值不一樣時也可直接縮寫，如：
1063 
1064 .btn {
1065 
1066 margin-top:10px;
1067 
1068 margin-right:8px;
1069 
1070 margin-bottom:12px;
1071 
1072 margin-left:5px;
1073 
1074 padding-top:10px;
1075 
1076 padding-right:8px;
1077 
1078 padding-bottom:12px;
1079 
1080 padding-left:8px;
1081 
1082 }
1083 
1084 則可縮寫爲：
1085 
1086 .btn {
1087 
1088 Margin:10px 8px 12px 5px;
1089 
1090 Padding:10px 8px 12px 5px;
1091 
1092 }
1093 
1094 而若是當上邊與下邊、左邊與右邊的邊框屬性值相同時，則屬性值能夠直接縮寫爲兩個，如：
1095 
1096 .btn {
1097 
1098 margin-top:10px;
1099 
1100 margin-right:5px;
1101 
1102 margin-bottom:10px;
1103 
1104 margin-left:5px;
1105 
1106 }
1107 
1108 縮寫爲：.btn {margin:10px 5px;}
1109 
1110 而當上下左右四個邊框的屬性值都相同時，則能夠直接縮寫成一個，如：
1111 
1112 .btn {
1113 
1114 margin-top:10px;
1115 
1116 margin-right:10px;
1117 
1118 margin-bottom:10px;
1119 
1120 margin-left:10px;
1121 
1122 }
1123 
1124 縮寫爲：.btn{margin:10px;}
1125 
1126 
1127 
1128 4、顏色值的縮寫：
1129 
1130 當RGB三個顏色值數值相同時，可縮寫顏色值代碼。如：
1131 
1132 .menu { color:#ff3333;}
1133 
1134 可縮寫爲:.menu {color:#f33;}
1135 
1136 
1137 
1138 5.7 CSS各瀏覽器解決不兼容問題
1139 
1140 由於不一樣瀏覽器對W3C標準的支持不同，各個瀏覽器對於頁面的解釋呈視也不盡相同，好比IE在不少狀況下就與FF存在3px的差距，對於這些差別性，就須要利用css 的hack來進行調整，固然在沒有必要的狀況下，最好不要寫hack來進行調整，避免由於hack而致使頁面出現問題。
1141 
1142 1、 IE六、IE七、Firefox之間的兼容寫法：
1143 
1144 寫法一：
1145 
1146 IE都能識別*;標準瀏覽器(如FF)不能識別*；
1147 
1148 IE6能識別*，但不能識別 !important,
1149 
1150 IE7能識別*，也能識別!important;
1151 
1152 FF不能識別*，但能識別!important;
1153 
1154 根據上述表達，同一類/ID下的CSS 　hack可寫爲：
1155 
1156 .searchInput {
1157 
1158 background-color:#333;/*三者皆可*/
1159 
1160 *background-color:#666　!important; /*僅IE7*/
1161 
1162 *background-color:#999; /*僅IE6及IE6如下*/
1163 
1164 }
1165 
1166 通常三者的書寫順序爲：FF、IE七、IE6.
1167 
1168 寫法二：
1169 
1170 IE6可識別「_」，而IE7及FF皆不能識別，因此當只針對IE6與IE7及FF之間的區別時，可這樣書寫：
1171 
1172 .searchInput {
1173 
1174 background-color:#333;/*通用*/
1175 
1176 _background-color:#666;/*僅IE6可識別*/
1177 
1178 }
1179 
1180 
1181 
1182 寫法三：
1183 
1184 *+html 與 *html 是IE特有的標籤, Firefox 暫不支持。
1185 
1186 .searchInput {background-color:#333;}
1187 
1188 *html .searchInput {background-color:#666;}/*僅IE6*/
1189 
1190 *+html .searchInput {background-color:#555;}/*僅IE7*/
1191 
1192 屏蔽IE瀏覽器：
1193 
1194 select是選擇符，根據狀況更換。第二句是MAC上safari瀏覽器獨有的。
1195 
1196 *:lang(zh) select {font:12px  !important;} /*FF的專用*/
1197 
1198 select:empty {font:12px  !important;} /*safari可見*/
1199 
1200 IE6可識別：
1201 
1202 這裏主要是經過CSS註釋分開一個屬性與值，註釋在冒號前。
1203 
1204 select { display /*IE6不識別*/:none;}
1205 
1206 IE的if條件hack寫法：
1207 
1208 全部的IE可識別：
1209 
1210 <!–[if IE]> Only IE <![end if]–>
1211 
1212 只有IE5.0能夠識別:
1213 
1214 <!–[if IE 5.0]> Only IE 5.0 <![end if]–>
1215 
1216 IE5.0包換IE5.5均可以識別:
1217 
1218 <!–[if gt IE 5.0]> Only IE 5.0+ <![end if]–>
1219 
1220 僅IE6可識別:
1221 
1222 <!–[if lt IE 6]> Only IE 6- <![end if]–>
1223 
1224 IE6以及IE6如下的IE5.x均可識別:
1225 
1226 <!–[if gte IE 6]> Only IE 6/+ <![end if]–>
1227 
1228 僅IE7可識別:
1229 
1230 <!–[if lte IE 7]> Only IE 7/- <![end if]–>
1231 
1232 
1233 
1234 2、清除浮動：
1235 
1236 在Firefox中，當子級都爲浮動時，那麼父級的高度就沒法徹底的包住整個子級，那麼這時用這個清除浮動的HACK來對父級作一次定義，那麼就能夠解決這個問題。
1237 
1238 select:after {
1239 
1240 content:」.」;
1241 
1242 display:block;
1243 
1244 height:0;
1245 
1246 clear:both;
1247 
1248 visibility:hidden;
1249 
1250 }
1251 
1252 
1253 
1254 其餘規範：
1255 js的命名原則以功能的英語單詞爲名。例如：廣告條的js文件名爲：js.
1256 全部的CSS的儘可能採用外部調用.
1257 全部的javascript腳本儘可能採起外部調用.
1258 Web 頁面編碼一概統一用UTF-8編碼：UTF-8是世界性通用代碼，也完美的支持中文編碼，若是咱們作的網站能讓國外用戶正常的訪問，就最好用UTF-8。
1259 字體符號用像素px來定義，px使用中文宋體12px 和14px黑體
1260 字體採用：Arial, Helvetica, sans-serif,宋體。
1261 
1262 全部鏈接使用相對路徑/images/，切記不可以使用絕對路徑。如：../images/
1263 全部文件，目錄，圖片所有以小寫字母命名，禁止用中文命名。
1264 清理無效的連接和圖片