关于前端文件命名与编写规范(一)
頁面頭部
DOCTYPE 設置
文檔類型統一使用html5的doctype：即
頁面編碼
編碼默認使用GBK，特定情況下有指定要求也可以是UTF-8,即
TDK
頁面標題(Title)
頁面名稱-產品中文全稱-官方網站-騰訊游戲-產品slogan，28個漢字以內，如
<title>抓金角銀角大王每周末放送裝備 - 地下城與勇士官方網站 - 騰訊游戲</title>頁面關鍵字(Keywords)
Keywords為產品名、專題名、專題相關名詞，之間用英文半角逗號隔開，如
頁面描述(Description)
不超過150個字符，描述內容要和頁面內容相關。如
頁面Meta
PC端Meta
<meta charset="gbk" /> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="robots" content="all"> <meta name="author" content="Tencent-CP" /> <meta name="Copyright" content="Tencent" /> <meta name="Description" content="頁面的描述內容" /> <meta name="Keywords" content="頁面關鍵字" />移動端Meta
<meta charset="gbk" /> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"> <!-- 為了防止頁面數字被識別為電話號碼，可根據實際需要添加： --> <meta name="format-detection" content="telephone=no"> <!-- 讓添加到主屏幕的網頁再次打開時全屏展示，可添加： --> <meta content="yes" name="mobile-web-app-capable"> <meta content="yes" name="apple-mobile-web-app-capable"> <meta name="robots" content="all"> <meta name="author" content="Tencent-CP" /> <meta name="Copyright" content="Tencent" /> <meta name="Description" content="頁面的描述內容" /> <meta name="Keywords" content="頁面關鍵字" />頁面跳轉
如為雙端頁面，需要自動判斷跳轉，PC訪問移動端頁面，跳轉到對應的PC專題上，反之亦然。PC端添加：
(function() { if(/Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent)){var a=document.referrer,b={"baidu.com":"seo_baidu","sogou.com":"seo_sogou","sm.cn":"seo_sm","so.com":"seo_360","bing.com":"seo_bing","google.com":"seo_google"},c;for(c in b){if(-1!=a.indexOf(c)){a=b[c];if(window.sessionStorage){sessionStorage.setItem("channel",a)}else{var d=d||0,b="";0!=d&&(b=new Date,b.setTime(b.getTime()+1000*d),b="; expires="+b.toGMTString());document.cookie="channel="+escape(a)+b+"; path=/"}break}}window.location.href="/m/"+location.search}; })();移動端添加：
if(!/Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent)) {window.location.href = "PC端專題地址"+location.search; }HTML標簽
1.標簽必須合法且閉合、嵌套正確，標簽名需小寫
2.標簽語法無錯誤，需要符合語義化
3.標簽的自定義屬性以data-開頭，如：
4.除非有特定的功能、組件要求等，禁止隨意使用id來定義元素樣式
鏈接
1.給 標簽加上title屬性
2.標簽的href屬性必須寫上鏈接地址，暫無的加上javascript:alert(‘敬請期待！’)
3.非本專題的頁面間跳轉，采用打開新窗口模式：target="_blank"
https協議自適應
將調用靜態域名 ossweb-img.qq.com 以及 game.gtimg.cn 的外部請求，寫法上一律去掉協議http:部分，采用自適應的寫法。具體方法如下：
<style> //CSS背景圖片 .bg{background: url(//game.gtimg.cn/images/cf/cp/a20161021sqjs/hd.jpg) no-repeat;} </style> //鏈接URL <a href="//cf.qq.com/main.shtml">進入官網</a> //圖片SRC <img src="//game.gtimg.cn/images/cf/web201610/logo.png"> //JS鏈接 <script src="//ossweb-img.qq.com/images/js/title.js"></script>flash
頁面禁止使用flash，動畫使用video、CSS3、canvas等方式實現，低版本瀏覽器使用背景圖片降級
選擇器
1.禁止使用層級過深的選擇器，最多3級。
錯誤示范：
2.除非有特定的功能、組件要求等，禁止隨意使用id來定義元素樣式
3.除非是樣式reset需要，禁止對純元素選擇器設置特定樣式，避免樣式污染
錯誤示范：
reset示例
PC端
body,dl,dd,ul,ol,h1,h2,h3,h4,h5,h6,p,form,header,section,article,footer{margin:0;} body,button,input,select,textarea{font:12px/1.5 tahoma,'\5FAE\8F6F\96C5\9ED1',sans-serif} h1,h2,h3,h4,h5,h6{font-size:100%} em,b{font-style:normal} a{text-decoration:none} a:hover{text-decoration:underline} img{border:0} body{padding-top:42px} button,input,select,textarea{font-size:100%;outline:none} table{border-collapse:collapse;border-spacing:0} td,th,ul,ol{padding:0}移動端
有較多文字的文章類頁面：
如果頁面無文字，或者不希望文字被長按選中，可使用下面的reset；適合于大多數專題頁面
/* 移動端常用reset.css (無文字版本) */ /* reset */ html,body,div,p,ul,li,dl,dt,dd,em,i,span,a,img,input,h1,h2,h3,h4,h5 {margin:0;padding:0} a,img,input {border:none;} body{font: 14px/1.75 -apple-system, "Helvetica Neue", Helvetica, Arial, sans-serif;-webkit-tap-highlight-color: rgba(0,0,0,0);} a {text-decoration:none;} ul,li{list-style: none} a, img {-webkit-touch-callout: none; /* 禁止長按鏈接與圖片彈出菜單 */} html, body {-webkit-user-select: none; /* 禁止選中文本（如無文本選中需求，此為必選項） */user-select: none; }移動端頁面不需要設置微軟雅黑、宋體等字體，終端瀏覽器字體取決于設備上的系統字體。
圖片處理
本章將介紹圖片的優化、以及圖片地址如何替換為上線后的CDN服務器地址。
圖片優化
1.圖片體積不能超過300K
2.JPG圖片必須壓縮，一般80%品質即可，保證文字清晰
3.JPG圖片必須使用漸進式圖片：使用Photoshop的“存儲為web所用格式”時候，勾選“連續”
4.透明PNG圖片必須使用壓縮工具壓縮后提供
圖片標簽
1.PC端img圖片必須填寫width、height、alt屬性
2.移動端必須填寫alt屬性
3.alt不能為無意義字符，需要能表現出圖片的含義，如圖片為道具圖，則應該為道具的名稱
4.alt值是用于給讀屏器或者搜索引擎抓取使用
合理切圖
1.需要變動的文字禁止切到圖片中，如果不確定是否需要變動，請咨詢接口人
2.需要程序后臺動態生成的圖片，如道具圖片、頭像、獎品，必須單獨切割出來
3.裝飾性圖片合并成精靈圖，減少頁面請求
圖片地址分離
1.專題完成，需進行圖片地址分離
2.把圖片放到ossweb-img文件夾里面，圖片引用的時候src為game.gtimg.cn域名下的特定地址。
分離后示例：
注釋與命名
注釋
1.頁面頭部需要添加制作時間等信息。
2.在head區域中，title標簽下方的注釋，按照下方格式分別加上頁面設計、頁面制作的公司名稱，創建的年-月-日
3.頁面設計、頁面制作填寫具體公司名稱，創建：填寫頁面創建的時間。
4.禁止注釋中出現制作者的個人信息，如姓名、QQ號、郵箱等。
5.合理的注釋有助于后期維護。
6.較長的的HTML文件，請在板塊之間加入注釋，使得結構更清晰：
... <!-- 活動板塊 開始 --> <div class="part-act"> ... </div> <!-- 活動板塊 結束 --> ...如果是需要和后臺開發聯調的自定義函數。請注明函數的調用方式，包括函數的用途、參數類型等
// 轉盤初始化 // 參數1：是獎品的個數，數字類型 // 參數2：用來旋轉的圓盤元素，可為dom元素 或 選擇器字符串 var panel=new PanelLotery({length:8,el:'#ltpanel' });命名
樣式命名
1.class、id都需小寫
2.命名使用英文，禁止使用特殊字符
3.樣式名不能包含ad、guanggao、ads、gg是廣告含義的關鍵詞，避免元素被網頁拓展、插件屏蔽
4.名稱間隔使用-符號
5.涉及數據、交互等需要聯調的部分，禁止通過id選擇器定義樣式，以免開發過程中id名變化，引起頁局錯亂
6.類名命名需要語義化，參考下面的示例：
.wrap{} //外層容器.mod-box{} //模塊容器.btn-start{} //開始.btn-download-ios{} //ios下載.btn-download-andriod{} //安卓下載.btn-head-nav1{} //頭部導航鏈接1.btn-news-more{} //更多新聞.btn-play{} //播放視頻.btn-ico{} //按鈕ico.btn-lottery{} //開始抽獎.side-nav{} //側欄導航.side-nav-btn1{} //側欄導航-鏈接1 .btn-more{} //更多圖片命名
1.圖片名稱必須小寫，禁止使用特殊字符、中文
2.使用英文或拼音縮寫，禁止特殊字符
3.名稱間隔使用-符號
4.命名需要能體現圖片的大概用途
5.禁止文件名和實際圖片內容不符。反面例子：圖片名為’weixin-qrcode’，圖片內容卻是頭像。
總結
以上是生活随笔為你收集整理的关于前端文件命名与编写规范(一)的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Premiere 2.0至Premier
- 下一篇： ffmpeg 将视频分割为小段