基本Web標準
一個符合基本Web標準的網頁前端代碼，HTML標籤中的標籤名應該全部都是小寫的，屬性的定義需要加上引號，CSS樣式和Javascript代碼不要夾雜在HTML標籤中，而是應該分別單獨存放在CSS樣式文件和Javascript腳本文件中。理想狀態下，一個網頁的前端代碼應該由.html文件、.css文件、.js文件這基本的三部分組成。
HTML代碼規範
- .html文件必須存放在項目工程約定的目錄中。
- .html文件的命名：以模塊 + 功能的結合方式來命名，比如：newsList.html。
- 文檔類型聲明：HTML4中使用<!DOCTYPE HTML PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” ”http://www.w3.org/TR/xhtml/DTD/xhtml1-transitional.dtd”>，但是在HTML5中文檔類型的聲明方式被簡化，直接：<!DOCTYPE html>就可以，同時支持小寫<!doctype html>。
- 統一編碼方式：在<head>中定義<meta charset="UTF-8">。
- 從網站優化的角度來看，一般情況下，CSS文件必須外鏈在<head>標籤中，Javascript文件必須外鏈在<body>標籤結束之前。
- 所有標籤名以及標籤的屬性名全部使用小寫格式，屬性值定義必須加上引號，同時標籤必須閉合，這樣可以使頁面編碼風格更加符合W3C的Web標準，同時也有利於SEO。
- 儘可能使用語義化的HTML標籤，這樣可以減少頁面代碼量，同樣可以更好的有利於SEO。
- 在保證頁面彈性的基礎上儘量減少<div>的嵌套層數。
- 引入頁面中的Javascript庫文件，文件名稱要讓所有開發者能清楚知道庫名稱、版本號、是否壓縮，比如：jquery-1.7.1.min.js。引入的第三方插件庫的Javascript文件名稱同樣也需要讓開發者能清楚知道庫名稱和插件名稱，比如：jquery.cookie.js。
- 標籤中的URL定義是，需要避免重定向，需要在URL地址後面加上”/”，同時爲了有利於SEO，請儘量使用絕對URL而非是相對URL，比如：href=”http://www.baidu.com/”。
- 所有標籤的樣式定義時，一般情況下存放在對應的CSS文件中定義，儘量避免使用style屬性來定義當前標籤的樣式屬性。
- 對於<img>標籤定義的圖片，爲了有利於SEO和爬蟲的抓取，儘量給每一張圖片定義alt屬性。
- 對於HTML中重要的區域模塊和重要的功能部分，必須加上必要的註釋，便於後期其他成員對代碼進行維護。
- 頁面中如果需要使用特殊符號的時候，請使用特殊符號的轉義代碼替代。
- 避免使用已經被淘汰掉的標籤和屬性，多使用HTML5新增加的各種語義化標籤和新增屬性（附錄A中給出了移動網頁的基本結構）。
CSS代碼規範
- css文件必須存放在項目工程約定的目錄中，同時建議對.css文件使用UTF-8的編碼方式。
- 將網站中的所有CSS樣式按照特定的方式進行組織，此處建議使用：基本樣式（base.css） + 通用樣式（common.css） + 頁面樣式（XXXpage.css）。
- 基本樣式：最底層的樣式定義，提供CSS reset 和粒度最小的通用樣式定義。基本樣式是會被所有頁面引用，所以這裏面的樣式定義要力求精簡和通用。當網站成熟的時候，基本樣式是相對比較穩定的，基本上不需要進行維護。（附錄B中給出了推薦的基本樣式，請參照。）
- 通用樣式：提供組件級別的樣式定義，這些組件可以高度重用的。
- 頁面樣式：提供頁面級別的樣式定義。
- 對標籤進行樣式定義時，可以選用標籤的id或者class名稱，但是一般情況下 class，特殊情況除外，因爲id的優先級遠比class要高的多。
- CSS的樣式命名規範：命名時儘量使用英文，避免使用漢語拼音。命名方式有駝峯命名法和劃線命名法兩種。使用這兩種方法都可以將單詞區分開，提高命名的可讀性，但是這兩種方法都不是最好的方式，建議在實際開發過程中，組合使用這兩種方式。
- 駝峯命名法：從第二個單詞開始，每個單詞的首字母大寫，如：dropMenu、subNavMenu。
- 劃線命名法：將每個單詞用“-”或者“_”分隔，如：drop-menu、sub-nav-menu、drop_menu、sub_nav_menu。
- 在定義樣式屬性的時候，建議按照一定的順序進行排列，建議按照：佈局定位屬性→自身屬性→文本屬性→其他屬性。當然，這個順序不是硬性規定，各位開發人員可以根據自己的習慣調整這個順序，但是，要保證同類屬性是要在一起的，這樣便於閱讀和維護。
- 佈局定位屬性：display、position、float、clear、visibility等。
- 自身屬性：width、height、margin、padding、border等。
- 文本屬性：font、line-height、text-align、vertical-align等。
- 其他屬性：color、background等。
- 避免濫用自選擇器，.hello div {}和.hello .divclass {}這兩種方式儘量使用後者。採用繼承的屬性還是新加自定義class根據頁面代碼中的不同情況靈活使用。新加自定義的class便於後期進行維護。
- 兼容性屬性的使用，尤其是CSS3的相關屬性，在使用時，切記針對一些瀏覽器有不同的定義方式。
- 儘量避免影響頁面性能的屬性使用，比如：position:absolute、float等。
- 在CSS文件中，也必須有相關的註釋。
- CSS文件中，代碼的縮進方式團隊要基本保持統一。
Javascript代碼規範
- js文件必須存放在項目工程約定的目錄中，同時建議對.js文件使用UTF-8的編碼方式。
- 代碼書寫過程中，要求每行代碼結束都必須有”;”。
- 原則上項目工程統一引入一個Javascript的庫，比如jQuery的庫，如果需要引起其他庫文件或者第三方插件庫，需要經過團隊成員一致討論決定。
- Javascript中的文件名、類名、函數方法名、變量名等的命名儘量語義化，做到見名知其意。
- 代碼結構需要明瞭，有必要的代碼註釋，儘量提高代碼的重用率。
- 要注重Javascript代碼和HTML代碼的分離，減小reflow，注重頁面的性能。
圖片規範
- 所有頁面元素使用的圖片文件均要放入指定的文件夾中。
- 圖片的格式不要繁雜，僅限於gif、png、jpg。
- 圖片的命名使用英文、數字加上_的組合。圖片名稱中不要出現漢字、空格、特殊字符等。對於圖片的名稱也要做到見名知其意。
- 在保證視覺效果的基礎上要儘量選擇最小的圖片格式和質量，減少頁面加載時間和網絡流量。
- 移動頁面列表圖片，請使用圖片延遲加載技術，初次加載只加載當前屏幕範圍內的圖片，滾動平時時，再按需加載圖片。
- 針對不同的屏幕尺寸、不同的手機系統選擇不同的圖片加載，請使用響應式Web設計中對圖片的具體處理方法。