# 引用于腾讯TGideas文档库
http://tgideas.qq.com/doc/index.html
# 页面头部
本章将介绍页面的`
`标签含有的内容。包含页面的基本信息、SEO优化、双端页面跳转等。
## DOCTYPE 设置
文档类型统一使用html5的doctype:
Copy
```html
```
## 页面编码
编码默认使用GBK,特定情况下有指定要求也可以是UTF-8
Copy
```html
```
Copy
```html
```
## TDK
> **注意** 请修改为对应项目的内容,禁止直接复制使用
**页面标题(Title)**
页面名称-产品中文全称-官方网站-腾讯游戏-产品slogan,28个汉字以内
Copy
```html
抓金角银角大王每周末放送装备 - 地下城与勇士官方网站 - 腾讯游戏
```
**页面关键字(Keywords)**
Keywords为产品名、专题名、专题相关名词,之间用英文半角逗号隔开
Copy
```html
```
**页面描述(Description)**
不超过150个字符,描述内容要和页面内容相关。
Copy
```html
```
## 页面Meta
PC端Meta:
Copy
```html
```
移动端Meta:
Copy
```html
```
## 页面跳转
如为双端页面,需要自动判断跳转,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-`开头,如:``
4. 除非有特定的功能、组件要求等,禁止随意使用id来定义元素样式
## 链接
1. 给 `` 标签加上title属性
2. ``标签的`href`属性必须写上链接地址,暂无的加上`javascript:alert('敬请期待!')`
3. 非本专题的页面间跳转,采用打开新窗口模式:`target="_blank"`
## https协议自适应
将调用静态域名 `ossweb-img.qq.com` 以及 `game.gtimg.cn` 的外部请求,写法上一律去掉协议`http:`部分,采用自适应的写法。具体方法如下:
Copy
```html
//链接URL
进入官网
//图片SRC
//JS链接
```
## 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;
}
```
> **提示**
>
> 移动端页面不需要设置微软雅黑、宋体等字体,终端浏览器字体取决于设备上的系统字体。