1.1 首頁命名為index.html / index.htm / index.php等。
1.2 需要制作404頁面。
1.3 文件夾結構合理。
1.4 命名使用英文且有語義性的單詞，并提供參考文檔。
2.1.1 需要提供文檔聲明
2.1.2 設置utf-8的編碼格式，并放置于title之上
2.1.3 合理的填寫html文件中的title、meta等內容
2.1.4 使用外部引入樣式表和JS行為代碼，實現結構、樣式和行為的相分離，降低模塊間的耦合度
2.1.5 合理控制JS文件的引入位置，提升網站的加載速度
2.1.6 根據具體情況合并CSS、JS文件，降低服務器請求次數
2.2.1 書寫HTML代碼的時候，遵循標簽語義化的要求，根據標簽的語義性進行選擇，如布局使用div、標題使用h系列標簽、段落使用p標簽等
歡迎溝通交流~HTML5學堂
2.2.2 HTML代碼要合理嵌套，一般情況下，行元素當中不能包含塊元素，除了段落、標題類型的塊元素當中，既能夠包含塊元素，也能夠包含行元素，而段落或標題類的塊元素只能夠包含文字或行元素。table元素只能夠直接包含thead、tbody、tfoot、caption等元素；ul/ol元素只能直接包含li元素；dl元素當中只能直接包含dt和dd元素；form表單當中只能直接包含filedset和legend，不能直接包含input元素。
2.2.3 合理書寫注釋，代碼縮進合理，不出現多余空行或者空標簽，提升代碼可讀性。
2.2.4 權衡嵌套層級以及擴展性等多個方面后，在適當位置使用三層嵌套技術。
2.2.5 合理書寫a標簽的title、img標簽的title和alt，提升網站的SEO。
3.1.1 CSS規則命名中，一律采用小寫加中劃線的方式，不使用下劃線或大寫字母，命名采用更簡明有語義的英文單詞進行組合，進行合理的縮寫
3.1.2 CSS代碼的書寫順序遵循CSS樣式的渲染順序：顯示屬性-自身屬性-文本屬性-其他。
3.1.3 避免class與id重名，對于class名使用中劃線，而id名遵循小駝峰命名法。
3.1.4 在書寫網頁樣式之前，先進行瀏覽器默認樣式重置。
3.2.1 在CSS代碼當中，盡量的規避掉不同瀏覽器的兼容問題，如果實在避免不了，也需要進行合理解決。
3.2.2 盡可能的少使用hack。
3.2.3 對于CSS3部分屬性，如果需要兼容各個瀏覽器，需要書寫各個瀏覽器前綴。
3.3.1 合理使用樣式的“繼承”（CSS后代選擇器），或者使用樣式的“組合”，減少頁面中的類名，提升通用性。
3.3.2 合理使用群組選擇器，進行代碼的優化。
3.3.3 圖片需要設置大小，防止后臺傳送不正常尺寸圖像造成的失真。
3.3.4 對于數據類部分，在適當的地方增加超出隱藏或者超出顯示為省略號。
3.3.5 需要考慮a標簽的點擊區，通常會對a進行處理：轉化為塊元素并設置高度，或者浮動設置寬高。
3.3.6 合理利用元素的默認樣式，而不再進行冗余設置（如div等元素的寬度默認為占滿父級，就不需要再設置width:100%，對于高度，默認由內容撐開，也不需要設置高度）。
3.3.7 考慮文檔流的變化，對元素進行浮動之后，需要進行及時的清除，采用after偽元素清浮動的方法進行清除。
3.3.8 對盒模型設置時，子級的margin（頂部）通常會影響父級樣式，因此，在父子之間的間距使用父級的內邊距撐開，兄弟級別標簽之間的距離可采用外邊距。
4.1.1 合理命名，遵循基本的命名規范，并遵循命名推薦：屬性/變量以名詞開頭，方法/函數以動詞開頭，遵循小駝峰，構造函數使用大駝峰，常量所有字母均大寫。
4.1.2 所有變量聲明都放在函數的頭部。
4.1.3 所有函數都在使用之前定義。
4.1.4 盡量避免使用全局變量，防止全局作用域被污染。
4.1.5 合理書寫大括號位置、空行位置、注釋等內容，對于聲明變量，可以如下聲明：
4.1.6 利用對象命名空間、匿名函數、協同命名等方法，盡量避免團隊合作時產生的命名沖突。
4.1.7 文件加載完畢之后再進行代碼的執行，合理利用window.onload與jQuery中的$(document).ready。
4.1.8 對于DOM操作，盡可能減少在頁面中查找元素的次數，即用變量存儲查找的元素，之后再需使用，只需要使用變量即可（for循環中常見的長度控制，同理）。
4.2.1 比較數據時，不要使用"相等"（==）運算符，只使用"嚴格相等"（===）運算符。
4.2.2 不要使用隱式的數據類型轉換。
4.2.3 追加字符串時，采用 str += "獨行冰海"; 而不是str = str + "獨行冰海";
4.3.1 獲取標簽使用最為快捷的方法，在PC端原生方法當中，速度比較如下：通過id > 通過類名 > 通過標簽名。如果能夠在小范圍中進行查找時則縮小范圍。
4.3.2 對于樣式的修改與調整，根據具體情況采用style或者類名操作（className），防止style的濫用造成的css文件hover失效。
4.3.3 原生當中，一個元素一種事件只能綁定一次。
4.3.4 可以通過事件委托，減少頁面中類似事件的數量。
4.3.5 在刪除dom節點之前，需要先移除掉該節點上的事件。
4.4.1 對于功能類似的代碼，進行函數的封裝，可以使用面向對象的書寫方法，提升代碼的復用性和擴展性。
4.4.2 盡可能少使用with語句、閉包、eval語句。
4.4.3 在DOM節點相關操作上進行優化，如利用變量存儲查找到的元素，從而防止每次查找時進行頁面重繪、利用文檔碎片等。
4.4.4 盡可能減少頁面中dom元素樣式的修改，防止頁面回流與重繪。
4.4.5 合理使用計時器，防止setInterval造成的內存泄露。
4.4.6 在設置計時器之后需要考慮計時器的清除，以防止計時器的疊加造成的影響。
4.5.1 對于AJAX的異步加載，提供加載的相關提醒。
4.5.2 防止AJAX造成的重復請求。
4.5.3 利用時間戳進行緩存的處理。
4.5.4 對AJAX進行緩存處理。
4.5.5 合理使用AJAX中發送數據的方法，當文檔中允許使用post或get發送時，優選選用get方法。
4.6.1 jQuery等插件的合理引用，處理常見的瀏覽器兼容問題。
4.6.2 根進jQuery的發展，及時更新文件庫，舍棄已經淘汰的方法（如：.toggle()，.live()等）。
5.1 使用背景圖合并技術，將多張背景圖合并到一張圖片上，從而降低頁面與服務器之間的請求次數。
5.2 存儲圖像時根據需求采取不同的格式，對于不需要透明的圖像可以存儲為jpg，需要半透明圖像存儲為png，對于全透明且像素要求不高的圖像可以存儲為gif或png-8。對圖像質量進行控制，保證在顯示效果正常的前提下，存儲為盡可能小的圖像，對于含透明的圖像，需要根據具體顯示質量而選擇。
5.3 對于網頁中特殊的字體，可以使用@font-face進行設置，并根據實際情況修改字體包，防止字體包文件過大。具體設置方法此處不講解了，可以參見文章《網絡字體@font-face 如何處理網頁中的特殊字體》。
5.4 合理使用圖片預加載和圖片懶加載。
6.1 在上線之前對html、css、js文件進行壓縮。
6.2 增加網頁圖標 ico文件，具體增加方法此處也不講解了，可詳見《設置網頁地址欄前面的標志圖標》。
上一篇：如何使用CGI腳本生成網頁？
掃一掃 加微信咨詢
