,記得轉義下符號類字符如空格-  &-amp; 3.正確的縮進，現在各個全家桶裡的代碼已經配置好了縮排，無太大必要直接使用即可4.css和js強調要使用外鏈形式，現在感覺組件化的東西，寫到每個組件"/> ,記得轉義下符號類字符如空格-  &-amp; 3.正確的縮進，現在各個全家桶裡的代碼已經配置好了縮排，無太大必要直接使用即可4.css和js強調要使用外鏈形式，現在感覺組件化的東西，寫到每個組件">
搜尋

首頁 >web前端 >html教學 >初級前端怎麼能寫出高品質的程式碼

初級前端怎麼能寫出高品質的程式碼

零下一度
零下一度原創
2017-06-24 14:15:451436瀏覽

一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來標記代辦事項。如
      • Apples
      • Oranges

      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多內容尋找可以用#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中文網其他相關文章！

      陳述：
      本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
      上一篇：總結bootstrap前端框架的使用實例下一篇：總結bootstrap前端框架的使用實例

      相關文章

      看更多