一位前輩寫的HTML規(guī)范【轉】
當前位置：點晴教程→知識管理交流
→『 技術文檔交流 』
九大原則
原則一：一般要寫兼容IE6,IE7和FIREFOX的網(wǎng)頁，最省事的方法就先寫適合IE7的樣式，因為IE7和FIREFOX很接近，這樣判斷瀏覽器兼容的工作量就能減小到最少。 原則二：逐步疊加的方式，如果需要用這個樣式的模塊很多，并且會存在些許的不同，千萬不要把樣式一步寫到位，最好把框架性的先寫好，細節(jié)性的留到第二個步驟，甚至第三個步驟，當然最好步驟不要超過三步，這樣很不利于維護。由若干個二級定義對一級定義進行補充，這樣的既可以減少代碼，又可以減少繁多的CLASS命名。 原則三：從總到分。順序應該是這樣：總體需要用到的>>結構>>模塊>>二級模塊>>細節(jié)；并且這個文檔最不容易修改的處于最上端，頻繁用于修改的在末端。最忌諱即興發(fā)揮，這樣寫出的東西經(jīng)不起推敲，稍有變化就要忙得亂成一團。結構性的東西應該慎重精細。 原則四：盡量把能夠放在一組的小圖標或者圖片放在一個圖片文件里，這樣的好處有很多。 1、 圖片文件的總量會變小； 2、利于下載，太多的小圖片下載效果是不理想的，常常會發(fā)現(xiàn)這個圖片出來，那個沒出來，這樣在寫樣式的時候只需要寫一個總體的，對于具體的要顯示的只需要標一個位置，非常省時間，樣式也很精煉； 3、 顯而易見，這樣做非常便于管理，替換或新增的時候工作量很小。 原則五：切圖的原則，應該切大的圖絕不切小，應該切小的絕不切大，能夠用顏色代替的絕不切圖。把一個大圖切成很多份并不一定能夠加快頁面的顯示速度，相反會浪費很多不必要的帶寬。不光要控制圖片文件的多少，還要考慮到這樣切會不會造成頁面增加許多額外的代碼。 原則六：圖片的命名規(guī)則，定一個規(guī)則，準備用一輩子。這樣以后你看CSS文檔的時候，你只要看到某個圖片名稱的時候，你不需要看太多你就知道這個圖片的用途、位置；這樣可以最大限度的保證樣式的重用性。 原則七：在該不該用表格的問題上，我的態(tài)度是，涉及多行多列的特別是列寬有不固定的，堅決用表格，這個沒啥好討論的，千萬不要為了DIV而DIV，用一大陀CSS去模仿一個表格是很極端的行為。當然也有例外的，需要靈活處理，但千萬別模仿什么表格。 原則八：盡可能不把樣式直接寫到元素的標簽里（除非這個樣式出現(xiàn)的機率特別小，有相當程度的偶然性），把樣式直接寫到元素標簽里是一種工作范疇意義上的無政府行為，非常不負責。 原則九：盡量不要用ID來定義或索引樣式，ID的唯一性比較高，且用ID索引樣式效率非常低而且兼容性的問題也比較明顯。 總之所有的一切都為了精簡，為了效率，也為了重用。 頁面規(guī)范 樣式和程序不一樣，樣式主要是為了界面呈現(xiàn)，因此樣式的命名和界面的表現(xiàn)是緊密聯(lián)系在一起的。這邊我主要寫一個放大的結構，基本上這個結構會滿足90%的需求。但是如果要做到精煉，還是要根據(jù)具體的需求來調(diào)整，避免過多的冗余。 1. 文件定義：必須是 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 2. 全局包括：字符編碼，文字大小，字體，背景，行距；鏈接最好不要放到全局里定義，IE6環(huán)境下會有奇怪的問題； 3. 公用的包括：button（按鈕），input（輸入框），textArea（文本域），space（間隔）； 4. 根據(jù)頁面的結構，頁面大致分為五個部分：頂部、左欄、中欄、右欄、底部；CLASS的名稱分別定義為：top, left, middle, right, bottom ； 5. divBtn, divBtnL, divBtnM, divBtnR（DIV模擬按鈕），menu, menuL, menuM, menuR（菜單） <div class="divBtn"> <div class="divBtnL"></div> <div class="divBtnM">默認</div> <div class="divBtnR"></div> </div> <div class="divBtnOv"> <div class="divBtnL"></div> <div class="divBtnM">懸停</div> <div class="divBtnR"></div> </div> <div class="divBtnSe"> <div class="divBtnL"></div> <div class="divBtnM">選中</div> <div class="divBtnR"></div> </div> <div class="divBtnSv"> <div class="divBtnL"></div> <div class="divBtnM">選中狀態(tài)下懸停</div> <div class="divBtnR"></div> </div> 由父節(jié)點直接控制子節(jié)點，菜單的四種狀態(tài)和divBtn類似，divBtn的結構也可以是完全嵌套型的，節(jié)點相應地可以增減，視需求而定，但是CLASS的定義不變。 6. 分頁的基本結構。 <div class="pager"> <a class="pageFir" href="javascript:;"> </a><!--首頁--> <a class="pagePre" href="javascript:;"> </a><!--上一頁--> <span class="pageNum"> <a class="pageSe" href="javascript:;">1</a><!--選中頁--> <a href="javascript:;">2</a> <a href="javascript:;">3</a> <a href="javascript:;">4</a> <a href="javascript:;">5</a> </span> <a class="pageNxt" href="javascript:;"> </a><!--下一頁--> <a class="pageLst" href="javascript:;"> </a><!--末頁--> <span class="pageIpt"><input maxLength="3" value="" /></span><!--跳轉框--> <a class="pageBtn" href="javascript:;"> </a><!--跳轉按鈕--> </div> 注：“ ”不可以省略。 7. 頁面是由模塊組成，模塊的基本結構是一個九宮格（這個九宮格的結構和網(wǎng)上的說法不太一樣，有多種變化，但我們樣式的命名不變）：modTL, modTM, modTR, modML, modMM, modMR, modBL, modBM, modBR.。彈出框的基礎結構也是由九宮格組成：optTL, optTM, optTR, optML, optMM, optMR, optBL, optBM, optBR.。 <div class="mod mod2 …"><!--這里可以附加更多CLASS來改變整體的表現(xiàn)--> <div class="modTL"></div><!--這里可以插入圖標--> <div class="modTM"></div><!--這里可以插入標題--> <div class="modTR"></div><!--這里可以插入操作按鈕--> <div class="modML"> <div class="modMM"> <div class="modMR"></div> </div> </div> <div class="modBL"></div> <div class="modBM"></div> <div class="modBR"></div> </div> 彈出框和mod的結構一致 8. 表格，基本上我們定義表格也會依照最直觀的方式給它定義樣式。如例： <table border="0" cellpadding="0" cellspacing="0" class="table"> <tbody> <tr class="th"> <td class="td1">名稱</td> <td class="td3">改名</td> <td class="td3">刪除</td> </tr> <tr class="tr"> <td class="td1">名稱</td> <td class="td3">改名</td> <td class="td3">刪除</td> </tr> <tr class="trOv"> <td class="td1">名稱</td> <td class="td3">改名</td> <td class="td3">刪除</td> </tr> <tr class="trSe"> <td class="td1">名稱</td> <td class="td3">改名</td> <td class="td3">刪除</td> </tr> </tbody> </table> 注：tbody絕對不可以省略。不要對這樣的命名表示不理解，正如我先前所說，CLASS和程序不一樣，樣式最大的優(yōu)越性是可以無限制地公用，并且可以通過父級控制各種呈現(xiàn)。因此定義的名稱不要和具體的目標聯(lián)系起來，不要管它用來做什么，你只要知道它是個什么就夠了。 9. 組合規(guī)則 a) 元素的界面呈現(xiàn)狀態(tài)分為四種：默認、懸停、選中、選中的懸停狀態(tài)。如有個CLASS名稱叫“xx”，那它的四種狀態(tài)分別為：xx, xxOv, xxSe, xxSv 。 b) 如果寫一個結構，這個結構具有一定意義上的公用性和廣泛性，那我們在定義CLASS名稱的時候就要考慮這組樣式的名稱的統(tǒng)一，如：menu, menuL, menuM, menuR。 10. HTML元素的排序規(guī)則，一般我們使用的HTML元素包括：div, p, ul, table, span, input, select?；旧蟙iv, table, ul, p都屬于結構性比較強的元素，而span, input則是比較弱的元素，因此不允許有span嵌套div, table等等的情況出現(xiàn)，span可以嵌套input, 可以嵌套span。程序員在寫頁面的時候可以先不考慮界面呈現(xiàn)，按照這樣的規(guī)則，把數(shù)據(jù)直接綁定到HTML元素的節(jié)點上。 該文章在 2010/12/15 0:11:27 編輯過 |
關鍵字查詢
相關文章
正在查詢... 
|
400 186 1886
