From 9f4de1cab7612e9c142eb1e13490ff29ee9f18f2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?221900331=E9=83=91=E6=B1=9F=E6=B6=9B?= <878604385@qq.com> Date: Thu, 24 Mar 2022 21:08:49 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BB=A3=E7=A0=81=E8=A7=84=E8=8C=83?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ...43\347\240\201\350\247\204\350\214\203.md" | 266 ++++++++++++++++++ 1 file changed, 266 insertions(+) create mode 100644 "221900305_221900331/2022/\344\273\243\347\240\201\350\247\204\350\214\203.md" diff --git "a/221900305_221900331/2022/\344\273\243\347\240\201\350\247\204\350\214\203.md" "b/221900305_221900331/2022/\344\273\243\347\240\201\350\247\204\350\214\203.md" new file mode 100644 index 000000000..29f7d8d7c --- /dev/null +++ "b/221900305_221900331/2022/\344\273\243\347\240\201\350\247\204\350\214\203.md" @@ -0,0 +1,266 @@ +# 引用于腾讯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; +} +``` + +> **提示** +> +> 移动端页面不需要设置微软雅黑、宋体等字体，终端浏览器字体取决于设备上的系统字体。 \ No newline at end of file -- GitLab