代码规范

9f4de1ca · 221900331郑江涛 · b373c063 · 9f4de1ca
隐藏空白更改
内联并排

Showing with 267 addition and 0 deletion

221900305_221900331/2022/代码规范.md 221900305_221900331/2022/代码规范.md +267 -0

未找到文件。
--- a/221900305_221900331/2022/代码规范.md
+++ b/221900305_221900331/2022/代码规范.md
+# 引用于腾讯TGideas文档库
+
+http://tgideas.qq.com/doc/index.html
+
+
+
+# 页面头部
+
+本章将介绍页面的`<head>`标签含有的内容。包含页面的基本信息、SEO优化、双端页面跳转等。
+
+## DOCTYPE 设置
+
+文档类型统一使用html5的doctype：
+
+Copy
+
+```html
+<!DOCTYPE html>
+```
+
+## 页面编码
+
+编码默认使用GBK，特定情况下有指定要求也可以是UTF-8
+
+Copy
+
+```html
+<meta charset="GBK">
+```
+
+Copy
+
+```html
+<meta charset="UTF-8">
+```
+
+## TDK
+
+>  **注意** 请修改为对应项目的内容，禁止直接复制使用
+
+**页面标题(Title)**
+
+页面名称-产品中文全称-官方网站-腾讯游戏-产品slogan，28个汉字以内
+
+Copy
+
+```html
+ <title>抓金角银角大王每周末放送装备 - 地下城与勇士官方网站 - 腾讯游戏</title>
+```
+
+**页面关键字(Keywords)**
+
+Keywords为产品名、专题名、专题相关名词，之间用英文半角逗号隔开
+
+Copy
+
+```html
+ <meta name="keywords" content="英雄联盟,lol,lol新手礼包,lol攻略,lol视频,lol视频攻略,英雄资料,英雄联盟战争学院,明星解说视频,101战争学院,英雄,攻略,WCG,点亮图标,赛事" />
+```
+
+**页面描述(Description)**
+
+不超过150个字符，描述内容要和页面内容相关。
+
+Copy
+
+```html
+<meta name="description" content="英雄联盟官方网站，海量风格各异的英雄，丰富、便捷的物品合成系统，游戏内置的匹配、排行和竞技系统，独创的“召唤师”系统及技能、符文、天赋等系统组合，必将带你进入一个崭新而又丰富多彩的游戏世界。" />
+```
+
+## 页面Meta
+
+PC端Meta：
+
+Copy
+
+```html
+<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：
+
+Copy
+
+```html
+<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端添加：
+
+Copy
+
+```javascript
+(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};
+})();
+```
+
+>  **注意**
+> `window.location.href` 跳转地址 `/m/` ，默认为移动端官网地址；
+> 如是专题或其他需求，需要根据实际情况将 `/m/` 替换为相对应的移动端地址；
+
+移动端添加：
+
+Copy
+
+```javascript
+if(!/Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent)) {
+    window.location.href = "PC端专题地址"+location.search;
+}
+```
+
+# HTML规范
+
+## HTML标签
+
+1. 标签必须合法且闭合、嵌套正确，标签名需小写
+2. 标签语法无错误，需要符合语义化
+3. 标签的自定义属性以`data-`开头，如：`<a href="#" data-num='18'></a>`
+4. 除非有特定的功能、组件要求等，禁止随意使用id来定义元素样式
+
+## 链接
+
+1. 给 `<a>` 标签加上title属性
+2. `<a>`标签的`href`属性必须写上链接地址，暂无的加上`javascript:alert('敬请期待！')`
+3. 非本专题的页面间跳转，采用打开新窗口模式：`target="_blank"`
+
+## https协议自适应
+
+将调用静态域名 `ossweb-img.qq.com` 以及 `game.gtimg.cn` 的外部请求，写法上一律去掉协议`http:`部分，采用自适应的写法。具体方法如下：
+
+Copy
+
+```html
+<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等方式实现，低版本浏览器使用背景图片降级。
+
+# CSS规范
+
+## 选择器
+
+1. CSS类名命名参考[注释与命名](https://tgideas.qq.com/doc/frontend/spec/common/name.html#命名)
+
+2. 禁止使用层级过深的选择器，最多3级。
+
+   错误示范：
+
+   ```nocopy
+    .without-animation .book-body .body-inner .book-header .dropdown .dropdown-menu .buttons{}
+    .without-animation .book-body .body-inner .book-header .dropdown .dropdown-right .buttons{}
+    .without-animation .book-body .body-inner .book-header .pull-left .dropdown-menu .buttons{}
+    .without-animation .book-body .body-inner .book-header .pull-left .dropdown-right .buttons{}
+    .without-animation .book-body .body-inner .book-header .font-settings .dropdown-menu .buttons{}
+    .without-animation .book-body .body-inner .book-header .font-settings .dropdown-right .buttons{}
+    .without-animation .book-body .body-inner .book-header .js-toolbar-action .dropdown-menu .buttons{}
+    .without-animation .book-body .body-inner .book-header .js-toolbar-action .dropdown-right .buttons{}
+   ```
+
+3. 除非有特定的功能、组件要求等，禁止随意使用id来定义元素样式
+
+4. 除非是样式reset需要，禁止对纯元素选择器设置特定样式，避免样式污染
+
+   错误示范：
+
+   ```nocopy
+    //会导致页面所有的a标签都被加上背景
+    a{background:url(xxx);}
+   
+    //后期修改可能会添加一些span标签，如果刚好在div里面，会被污染；不利于后期维护
+    div span{display:block}
+   ```
+
+## reset示例
+
+### PC端
+
+Copy
+
+```css
+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}
+```
+
+### 移动端
+
+有较多文字的文章类页面：
+
+Copy
+
+```css
+/* 移动端常用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;}
+a {text-decoration:none;}
+ul,li{list-style: none}
+```
+
+如果页面无文字，或者不希望文字被长按选中，可使用下面的reset；适合于大多数专题页面
+
+Copy
+
+```css
+/* 移动端常用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;
+}
+```
+
+>  **提示**
+>
+> 移动端页面不需要设置微软雅黑、宋体等字体，终端浏览器字体取决于设备上的系统字体。
\ No newline at end of file