页面头部
DOCTYPE 设置
文档类型统一使用html5的doctype：即
<!DOCTYPE html>
页面编码
编码默认使用GBK，特定情况下有指定要求也可以是UTF-8,即
<meta charset="GBK">或者是<meta charset="UTF-8">
TDK
页面标题(Title)
页面名称-产品中文全称-官方网站-腾讯游戏-产品slogan，28个汉字以内，如
<title>抓金角银角大王每周末放送装备 - 地下城与勇士官方网站 - 腾讯游戏</title>
页面关键字(Keywords)
Keywords为产品名、专题名、专题相关名词，之间用英文半角逗号隔开，如
<meta name="keywords" content="英雄联盟,lol,lol新手礼包,lol攻略,lol视频,lol视频攻略,英雄资料,英雄联盟战争学院,明星解说视频,101战争学院,英雄,攻略,WCG,点亮图标,赛事" />
页面描述(Description)
不超过150个字符，描述内容要和页面内容相关。如
<meta name="description" content="英雄联盟官方网站，海量风格各异的英雄，丰富、便捷的物品合成系统，游戏内置的匹配、排行和竞技系统，独创的“召唤师”系统及技能、符文、天赋等系统组合，必将带你进入一个崭新而又丰富多彩的游戏世界。" />
页面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级。
错误示范：
.without-animation .book-body .body-inner .book-header .dropdown .dropdown-menu .buttons{}
2.除非有特定的功能、组件要求等，禁止随意使用id来定义元素样式
3.除非是样式reset需要，禁止对纯元素选择器设置特定样式，避免样式污染
错误示范：
//会导致页面所有的a标签都被加上背景
a{background:url(xxx);}
//后期修改可能会添加一些span标签，如果刚好在div里面，会被污染；不利于后期维护
div span{display:block}
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.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；适合于大多数专题页面
/* 移动端常用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域名下的特定地址。
分离后示例：
/*分离前*/
.bg{background: url(ossweb-img/hd.jpg) no-repeat;}
/*分离后*/
.bg{background: url(//game.gtimg.cn/images/xiangqi/cp/a20150730avatar/hd.jpg) no-repeat;}
注释与命名
注释
1.页面头部需要添加制作时间等信息。
2.在head区域中，title标签下方的注释，按照下方格式分别加上页面设计、页面制作的公司名称，创建的年-月-日
<head>
<title>页面名称-产品中文全称-官方网站-腾讯游戏-产品slogan</title>
<!-- 页面设计：公司名称 | 页面制作：公司名称 | 创建：2017-09-09 -->
</head>
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.命名需要能体现图片的大概用途
bg.jpg //背景图片
mod-bg.jpg //模块背景
sprites.png //精灵图
btn-start.png //开始按钮
ico-play.png //修饰性图片
5.禁止文件名和实际图片内容不符。反面例子：图片名为’weixin-qrcode’，图片内容却是头像。