一HTML
1.DOCTYPE的聲明,現在基本上都是H5的天下,直接快速鍵產生即可。
2.字符集的聲明,一般是,記得轉義下符號類字符如空格- &-amp;
3.正確的縮進,現在各個全家桶裡的程式碼已經配置好了縮進,無太大必要直接使用即可
4.css和js強調要使用外鏈形式,現在感覺組件化的東西,寫到每個組件裡就可以,使用less等預編譯語言可以更方便的實現換膚等效果
5.正確的標籤嵌套
6.刪除不必要的標籤。例如
這種,從語義上,外層div可以刪除,因為div和ul都是區塊級元素
7.做頁面時定好區域,整站佈局好後,如對小區域塊進行調整,直接在body或離著近的大區域塊定義一個單獨的類(id也行),在做樣式處理
8.省略圖片、樣式、腳本以及其他媒體檔案URL 的協議部分(http:,https:)除非這兩種無法滿足。如
9.使用兩個空格縮排(非必須盡量統一)實現程式碼格式化
10.標籤名,屬性,屬性值盡量使用小寫
11.元素中的內容,減少不必要的空格,內容結尾的空格也不要。
12.加入適當的註釋,描述作用
13.加入TODO來標記代辦事項。如
14.h5中單標籤不要閉合形式,直接寫標籤。如
不要寫成
;
不要寫成
15.標籤(除單一標籤)有開始就要有閉合
16.對於像圖片、影片、canvas 動畫等多媒體元素,確保提供其他可存取的內容。如
17.引用樣式表時,type預設指定text/css,可以省略。引用腳本時,type預設指定text/javascript,可以省略
18.屬性值使用雙引號
19.發佈的程式碼要壓縮
二CSS
1.reset的使用。首先明確它的作用,因為各個瀏覽器的預設屬性值有所不同需要做相容性考慮。不要使用全域reset,因為效率低。
2.屬性的順序,改變佈局的寫在前面,如display,margin,padding,position,其他寫在後面(可以按字母順序排列)
3.定義有意義的id和class名稱,簡短而明確,多單字使用連接符號
4.id盡量定義在大區塊,在區塊中在尋找元素,如
...n多內容 div>尋找可以用#content .title-color{color:red}
5.使用簡寫屬性,如font-family: palatino, georgia, serif;font-size: 100%;line-height: 1.6;寫成font: 100%/1.6 palatino, georgia, serif;
6.屬性值為0時單位不要加,如padding:0 15px;
7.值在-1和1中間時,0可以省略,如font-size:.8em
8.顏色值使用十六進制,如color: #ebc而不是color: #eebbcc
9.每個樣式以分號(;)結束
# 10 .選擇器和{}之間應該有空格,屬性名稱和屬性值之間應該有空格(記得code時格式化就可以)
11.屬性值用單引號,URI不要加引號
12.分段註釋,沒必要每個樣式都註釋(除非易模糊)
13.利用好繼承,在父元素上定義樣式,子元素繼承樣式。可以繼承的屬性,如font-開頭,text-開頭,line-height
14.當表示不存在時候,盡量使用display:none而不是visibility:hidden,因為前者瀏覽器解析不佔內存後者會在記憶體開啟空間
15.避免使用@import
16.發佈的程式碼要壓縮
以上是初級前端怎麼能寫出高品質的程式碼的詳細內容。更多資訊請關注PHP中文網其他相關文章!