抓金角银角大王每周末放送装备 - 地下城与勇士官方网站

# 引用于腾讯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; } ``` > **提示** > > 移动端页面不需要设置微软雅黑、宋体等字体，终端浏览器字体取决于设备上的系统字体。