代码规范.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;
}
```

>  **提示**
>
> 移动端页面不需要设置微软雅黑、宋体等字体，终端浏览器字体取决于设备上的系统字体。