無論是前端還是後臺代碼，編碼規範尤為重要，尤其是在大型項目中，在開放之初規範代碼、格式和要求將減少大量工作量，有利於代碼的後期維護。
前端單體編碼規格排序表無類別
驗證內容1
頁面設計
列表標題顯示在中央。2頁面設計查詢數據區數據顯示樣式:
1.不定中文，不定英文，不定中英文，不定英文數字向左。
2.固定長度，固定值數據在中心，日期、時間和序列號在中心。
3.金額:右側3***每個文件頭中是否有正確的註釋4 * * * on-每個函數中是否有正確的註釋5 * * * on-每個配置文件的相關內容中是否有註釋6 * * * on-每個邏輯塊中是否有註釋7 * * on-編寫規範中是否有未使用的變量和引用8 * * on。
1.標簽名稱必須使用小寫字母，例如
2.對於不需要自關閉的標簽，不允許自關閉，如輸入、br、img、hr等。
3.HTML5中指定的結束標記不允許省略。10 HTML-編寫標準標簽2:
1標記的使用必須符合標記嵌套規則，例如P不能放在P中，而tbody必須放在table中。
2.HTML標簽的使用應該遵循標簽的語義。公共標簽語義p段
H1，h2，h3，h4，h5，h6-級別標題
強烈強調
ins-插入
刪除-刪除
縮寫-縮寫
代碼-代碼識別
引用-引用源作品的標題
q基準電壓源
壹段或壹長段引語
ul-無序列表
有序列表
Dl、dt、DD-定義表單11 HTML-編寫標準屬性:
1.屬性名必須使用小寫字母；
2.屬性值必須用雙引號括起來；
3.建議使用xxx-作為自定義屬性的前綴，並且建議使用data-作為前綴，例如
1.使用HTML5的DOCTYPE啟用標準模式。建議使用大寫的doctype。
2.頁面必須包含標題標記聲明標題。
3.3.title必須是head的直接子級，並且緊跟在charset聲明之後。
示例《head》
& ltmeta charset =“UTF-8“& gt；
& lttitle & gt頁面標題
& lt/head & gt；13HTML-編寫標準編碼2:
1.使favicon可訪問（將favicon.ico文件放在根目錄中，並使用link指定favicon）。
諸如
2.如果項目是移動的或響應性的，則必須指定頁面的視區。
14 HTML-寫作規範介紹:
1.引入CSS時必須指定rel =“style sheet“，例如
2.無需指定type屬性（帶默認值）即可引入CSS和JavaScript
3.將頁面所需的所有CSS資源引入頭部，JavaScript應放在頁面末尾或異步加載。（將腳本放在頁面中間會阻止頁面的呈現）。15 HTML-編寫標準圖片:
1.img的src值禁止為空。默認的src也應該添加到加載延遲的圖片中（如果src為空，頁面將被重新加載）；
2.避免在img中添加不必要的標題屬性（多余的標題會影響圖片查看體驗並增加頁面大小）；
3.為重要圖片添加alt屬性；
4.有下載需求的圖片通過img標簽實現，無下載需求的圖片通過CSS背景圖實現。
16 HTML-編寫標準格式:
1.帶有文本標題的控件必須使用標簽label將其與標題相關聯；
2.使用button元素時，必須指示type屬性的值；
3.負責主要功能的按鈕應該放在DOM的第壹位（這是推薦的，取決於設計）。17 HTML-編寫標準視頻和音頻:
1.音頻和視頻標簽優先用於定義支持HTML5的瀏覽器中的音頻和視頻元素；
2.僅在必要時打開音頻和視頻的自動播放；
3.提供說明，指出瀏覽器不支持對象標簽中的標簽，例如
1.class，id必須全部是小寫單詞，單詞之間用-（破折號）分隔；
2 .類和id必須表示相應模塊或組件的內容或功能，並且不得使用樣式信息命名，例如命名中單獨出現的左、右、中、紅、黑等單詞；
3 .類必須有前綴（以避免全局汙染），例如g-代表全局風格，m-代表模塊風格，ui-代表組件風格等。，取決於項目規定；
4.不能出現單壹樣式！重要；
5.class不允許僅用於JavaScript選擇某些元素並創建沒有樣式信息的類（使用ID）；
6.元素id必須確保頁面是唯壹的；
7.相同的頁面，不同的標簽，避免使用相同的名稱和id（可以使用相同的標簽）。當壹個規則包含多個選擇器時，每個選擇器聲明必須獨占壹行。21 CSS-書寫規範屬性選擇器中的值必須用雙引號括起來。例如，輸入【name =“ACD“】{ } 22 CSS-書寫標準化當數值為0-1之間的小數時，0的整數部分被省略。例如，不透明度。8 23 CSS- write規範url（）函數中的路徑沒有加引號。比如後臺:URL（BG . png）；24 CSS-當書寫標準長度0時，必須省略單位。例如，padding: 0 5px25 css-編寫規範樣式的代碼應獨立保存在後綴為的文件中。除非特殊情況，否則不應使用CSS和行間樣式。26 CSS-標準RGB顏色值必須以十六進制表示法#rrggbb書寫。不允許Rgb（）。27 CSS-書寫標準顏色:
1.rgb顏色值必須使用十六進制表示法#aabbcc，不允許使用RGB（）；
2.當顏色值可以縮寫時，必須使用縮寫形式；比如#fff、#000
3.顏色值不允許命名的顏色值；不確定的值，如使用紅色綠色。
4.所有顏色值都用小寫英文字母表示。28 CSS-書寫標準字體1:
1中的字體系列名稱。font-family屬性應該使用字體的英文族名，如果有空格，必須用引號括起來，嚴禁使用中文。示例字體系列:“微軟雅黑”；
字體操作系統系列名稱
（中文簡易）Windows SimSun
黑色車身（中等容易黑色車身）Windows SimHei
微軟雅黑
微軟正在入侵Windows系統。
中國黑色Mac/iOS系統
霍利黑體Mac/iOS Hiragino Sans GB
文全義正黑Linux文全義禪黑
文全義微米黑色Linux文全義微黑29 CSS-書寫標準字體2:
1.font-family按照“西文字體在前，中文字體在後”、“效果好（質量高/更符合要求）的字體在前，效果壹般的字體在後”的順序書寫。最後是通用字體系列（襯線字體/無襯線字體）；必須指定。
字體系列示例:Arial，無襯線字體；30 CSS-書寫標準字體大小:
1.在Windows平臺上顯示的中文內容的字體大小不得小於12px；；
2.對於需要在Windows平臺上顯示的中文內容，不要使用非正常字體樣式。31 JS-編寫規範命名:
常見的命名方式:駝峰命名為thissinapple，帕斯卡命名為thissinapple，下劃線命名為this_is_an_apple，下劃線命名為this-is-an-apple。
1.方法/屬性名、變量名、參數名、命名空間和函數名必須由hump命名；
2.類名、枚舉名和構造函數必須用Pascal命名；
3.常量名稱、枚舉屬性:必須使用全大寫下劃線命名法，如is _ debug _ enabled
4.私有（受保護）成員（屬性、函數等）。）:必須以下劃線_開頭；
5 .布爾類型應該以is、has等開頭。以指示其類型；
6.命名也需要註意語義，比如變量名用名詞，函數名用動賓短語，類名用名詞。32 js編寫的標準JavaScript程序應該單獨保存在壹個帶有後綴的文件中。js。33 JS-書寫標準化避免了每行超過80個字符。34 JS-編寫標準化最大限度地減少了全局變量的使用，並且不允許局部變量覆蓋全局變量。35 JS-寫規範化時是否使用* * *通用函數可以使用。36 JS-撰寫規範性聲明:
1.每行最多只包含壹條語句。（分號）在每個簡單句的末尾；
2 .返回聲明
帶有返回值的return語句不應使用（）（括號）將返回值括起來。如果返回表達式，表達式應與return關鍵字在同壹行，以避免誤加點的錯誤；
3.避免使用continue語句，該語句很容易模糊程序的邏輯過程；
4.eval是JavaScript中最容易被濫用的方法，因此要避免使用它。37 JS-要編寫壹個標準的ES5語法，代碼必須包裝到壹個IIFE（立即調用的函數表達式）中，以創建壹個獨立和隔離的域，防止全局名稱空間受到汙染。38 js-在編寫規範代碼時添加js嚴格模式“use strict”39 JS-編寫規範變量聲明:使用var或let聲明變量時，未指定的變量將被隱式聲明為全局變量，這將很難控制變量。40 JS-程序疏通明智地使用了真假判斷。IF（a = = true）不同於IF（a）。這個判斷將通過特殊操作轉換為true或false，以下所有表達式都將返回false: false，0，undefined，null，nan，（空字符串）。41JS-Program dredger避免在循環中創建函數。42 JS-program dredger避免在語句塊中聲明函數，這將在嚴格模式下報告語法錯誤。43 JS-program dredger使用數組和對象文字而不是數組和對象構造函數，數組構造函數很容易在其參數中出錯。44 JS-程序疏通的三元條件判斷（if的壹種快捷方法），它使用布爾表達式字符來分配或返回語句，以避免在復雜情況下使用它們。45 JS-程序疏通字符串使用單引號（‘）而不是雙引號（‘），這在創建HTML字符串時非常有用，例如
var msg =‘這是壹些HTML & ltp class=“有道理“>。& lt/p & gt；‘。46 JS-程序疏通不要多余的程序，以下示例供參考:
有未使用的子程序。
重復初始化
定義未使用的變量47 JS-邏輯正確性沒有奇怪的邏輯（空函數和未處理的分支等。）48 JS-邏輯正確性文本輸入框的字符串長度基於兩點進行限制:1，業務中是否需要；2.數據庫字段長度滿足49 JS邏輯正確性嗎？查詢完成後，查詢條件應保存在相應的輸入框中。50 JS-邏輯正確性對查詢結果進行排序。51 JS-邏輯正確性查詢區域中* *的數量應該是當前查詢的所有數據的總數。去掉前後空格後應該查詢52 JS-邏輯正確性查詢條件輸入框，而不是當前頁面顯示的文章數量。
相信看完這個案例，妳已經掌握了方法。更多精彩請關註Gxl上的其他相關文章！
推薦閱讀:
Safari瀏覽器中選擇下拉列表的文本太長無法換行的解決方案。
HTML和CCS的結合