私信我或關注微信號：獅范兒，回復：學習，獲取免費學習資源包。

一、 引言

對于一個多人團隊來說，制定一個統一的規范是必要的，因為個性化的東西無法產生良好的聚合效果，規范化可以提高編碼工作效率，使代碼保持統一的風格，以便于代碼整合和后期維護。

二、 HTML/CSS規范

2.1 瀏覽器兼容

根據公司業務要求而定，一般：

主流程測試：Chrome 30+、IE9+；

完整測試：Chrome 21、IE8+、360瀏覽器、微信webview/QQ手機瀏覽器。

2.2 html代碼規范

2.2.1聲明與編碼

1、html頭部聲明統一：

2、頁面編碼統一：

2.2.2格式縮進

html編碼統一格式化顯示，使用一個Tab鍵進行分層縮進 (2個空格寬度)，使整個頁面結構層次清晰，方便閱讀和修改。

2.2.3 模塊注釋

html較大獨立模塊之間注釋格式統一使用：

…

或者：

…

2.2.4標簽與屬性

1、由于html標簽和屬性不區別大小寫，所有建議都采用小寫，尤其是自定義標簽和屬性名，否定js中取不到，如：

2、所有html屬性必須添加雙引號(非單引號)。

// 禁止 或 // 推薦

3、所有標簽必須采用合理嵌套。

// 禁止

4、所有等特殊符號(非標簽一部分)用編碼表示。< 編碼成< ，>編碼成>，&編碼成&

5、img標簽中必須添加alt屬性。如：

6、標簽在運用時，應盡量使用語義化標簽，如:

標題

用戶名：

在語義不明顯，既可用div也可用p時，應優先考慮p標簽。

2.3 CSS代碼規范

2.3.1 CSS引用規范

1、所有CSS均為外部調用，不得在頁面書寫任何內部樣式或行內樣式；

2、html頁面引入樣式文件：

統一使用link標簽，少用@import(原生import有加載性能問題)，sass、less、vue.js等文件使用import命令除外(因為最終前端構建工具會將引入文件編譯成一個css文件)。

2.3.2 CSS注釋規范

1、css頭部文檔注釋( 統一加上@charset聲明 )，如下：

@charset "utf-8";/** * @created : 2017/09/15 * @author : Mr.Wang * @version : v1.0 * @desc : XX模塊 */

關于"version"，如果對代碼有修改更新version版本號，并添加相關注釋。

2、內部模塊之間注釋(建議 @模塊英文名，好查找)：

/* @info 商品信息區----------------------------------------------------------------*/.infoArea{}/* 單行注釋 */.specArea{}/* @price 商品價格區----------------------------------------------------------------*/.price{}

2.3.3 CSS書寫規范

1、樣式書寫不做強約，可分行或單行

推薦單行，理由：直觀、模塊之間分隔鮮明，有全局感。

2、樣式中屬性排序規則：先外部 > 再自身 > 后內部，推薦工具( CSScomb )

A.)影響文檔流的屬性(display, position, float, clear, visibility, table-layout等) B.)自身盒模型的屬性(width, height, margin, padding, border等) C.)排版相關屬性(font, line-height, text-align, text-indent, vertical-align等) D.)裝飾性屬性(color, background, opacity, cursor等) E.)生成內容的屬性(content, list-style, quotes等) B.)自身盒模型的屬性(width, height, margin, padding, border等) C.)排版相關屬性(font, line-height, text-align, text-indent, vertical-align等) D.)裝飾性屬性(color, background, opacity, cursor等) E.)生成內容的屬性(content, list-style, quotes等)

2、所有CSS屬性和值必須采用小寫的形式。如：FONT-SIZE:12PX必須改為font-size:12px；

3、關于css背景圖片(關鍵字：合并，縮寫，去引號), 引號不是必須的，而且在某些瀏覽器上加引號反而出錯：

// 不推薦.canbox{ background-color: #ff6600; background-image: url("/img/xxx.png");}// 推薦(合并、去除引號).canbox { background: #f60 url(/img/xxx.png); }

4、屬性為0值，去除單位。

// 不推薦.wrap{ margin: 0px 0px 5px 8px;}// 推薦.wrap { margin: 0 0 5px 8px;}

5、所有CSS的命名應語義化，如：回復框，.replyBox{…}，禁止用拼音縮寫命名，如.hfk{…}。

6、清除浮動時用.clearfix，禁止用無語義的

7、用來顯示動態文本輸入的地方，樣式里必須加上強制英文換行：

word-break: break-all; word-wrap: break-word; overflow-x: hidden;

如果要顯示省略號則不讓其換行：

white-space: nowrap; overflow: hidden; text-overflow: ellipsis;

8、上下相鄰的兩模塊盡量避免混用margin-bottom，margin-top，否則會產生重疊現象。

三、 JavaScript規范

3.1 JS文件引用

1、引入格式：

腳本語言發展至今，也只有js混的最好了，所以type="text/javascript"類型指定可以省去。

2、引入位置：body標簽內最后部(非body外面), 減少因載入腳本而造成其他頁面內容阻塞的問題(js單線程)。

頁面內容….

3、引入方式：html頁面中禁止直接編寫js代碼，統一使用

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的商品详细信息的代码html_Web前端，你该有的代码规范的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。