私信我或關(guān)注微信號：獅范兒，回復(fù)：學(xué)習(xí)，獲取免費學(xué)習(xí)資源包。

一、 引言

對于一個多人團(tuán)隊來說，制定一個統(tǒng)一的規(guī)范是必要的，因為個性化的東西無法產(chǎn)生良好的聚合效果，規(guī)范化可以提高編碼工作效率，使代碼保持統(tǒng)一的風(fēng)格，以便于代碼整合和后期維護(hù)。

二、 HTML/CSS規(guī)范

2.1 瀏覽器兼容

根據(jù)公司業(yè)務(wù)要求而定，一般：

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

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

2.2 html代碼規(guī)范

2.2.1聲明與編碼

1、html頭部聲明統(tǒng)一：

2、頁面編碼統(tǒng)一：

2.2.2格式縮進(jìn)

html編碼統(tǒng)一格式化顯示，使用一個Tab鍵進(jìn)行分層縮進(jìn) (2個空格寬度)，使整個頁面結(jié)構(gòu)層次清晰，方便閱讀和修改。

2.2.3 模塊注釋

html較大獨立模塊之間注釋格式統(tǒng)一使用：

…

或者：

…

2.2.4標(biāo)簽與屬性

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

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

// 禁止 或 // 推薦

3、所有標(biāo)簽必須采用合理嵌套。

// 禁止

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

5、img標(biāo)簽中必須添加alt屬性。如：

6、標(biāo)簽在運用時，應(yīng)盡量使用語義化標(biāo)簽，如:

標(biāo)題

用戶名：

在語義不明顯，既可用div也可用p時，應(yīng)優(yōu)先考慮p標(biāo)簽。

2.3 CSS代碼規(guī)范

2.3.1 CSS引用規(guī)范

1、所有CSS均為外部調(diào)用，不得在頁面書寫任何內(nèi)部樣式或行內(nèi)樣式；

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

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

2.3.2 CSS注釋規(guī)范

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

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

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

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

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

2.3.3 CSS書寫規(guī)范

1、樣式書寫不做強(qiáng)約，可分行或單行

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

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

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

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

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

// 不推薦.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的命名應(yīng)語義化，如：回復(fù)框，.replyBox{…}，禁止用拼音縮寫命名，如.hfk{…}。

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

7、用來顯示動態(tài)文本輸入的地方，樣式里必須加上強(qiáng)制英文換行：

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

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

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

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

三、 JavaScript規(guī)范

3.1 JS文件引用

1、引入格式：

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

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

頁面內(nèi)容….

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

創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎勵來咯，堅持創(chuàng)作打卡瓜分現(xiàn)金大獎

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。