Skip to content

Latest commit

 

History

History
335 lines (244 loc) · 18.9 KB

README.md

File metadata and controls

335 lines (244 loc) · 18.9 KB

Web

[[toc]]

Flag

TypeScript

WebAssembly

  • Mozilla：可以用 Rust + WebAssembly 作为 JavaScript 替代
  • Google：可以用 Dart + WebAssembly 作为 JavaScript 替代
  • Microsoft：可以用 TypeScript/AssemblyScript + WebAssembly 作为 JavaScript 替代

免费域名

框架

静态博客或文档

创建自己的免费网站

VuePress主题

静态部署

CDN

  • 使用固定的版本号：

  • 也可使用语义化版本范围，或标签来代替固定版本号，亦可忽略版本和标签，直接使用最新的版本。

    • unpkg.com/react@^16/umd/react.production.min.js
    • unpkg.com/react/umd/react.production.min.js

  • 如果忽略了文件的路径（例如，使用裸网址 “bare” URL），unpkg 会提供 package.json 里指定的文件，或降级到 main。

    • unpkg.com/d3
    • unpkg.com/jquery
    • unpkg.com/three

注：这种方式会产生一次 302 到最新的文件 URL。好处是自动使用最新版，坏处是多一次性跳转，降低了性能。

  • 在网址最后添加斜线，可以查看一个包内的所有文件列表。
    • unpkg.com/react/
    • unpkg.com/lodash/
fonts.gstatic.com               fonts-gstatic.proxy.ustclug.org
fonts.gstatic.com               gstatic.loli.net
fonts.gstatic.com               gapis.geekzu.org/g-fonts
fonts.googleapis.com            fonts.proxy.ustclug.org
fonts.googleapis.com            fonts.loli.net
fonts.googleapis.com            fonts.geekzu.org
ajax.googleapis.com             ajax.proxy.ustclug.org
ajax.googleapis.com             ajax.loli.net
ajax.googleapis.com             gapis.geekzu.org/ajax
registry-1.docker.io            docker.mirrors.ustc.edu.cn
packages.elastic.co             elastic.proxy.ustclug.org
ppa.launchpad.net               launchpad.proxy.ustclug.org
archive.cloudera.com/cdh5/      cloudera.proxy.ustclug.org/cdh5/
downloads.lede-project.org      lede.proxy.ustclug.org
downloads.openwrt.org           openwrt.proxy.ustclug.org
registry.npmjs.org              npmreg.proxy.ustclug.org
www.npmjs.com                   npm.proxy.ustclug.org
themes.googleusercontent.com    google-themes.proxy.ustclug.org
themes.googleusercontent.com    themes.loli.net
themes.googleusercontent.com    gapis.geekzu.org/g-themes
secure.gravatar.com             gravatar.proxy.ustclug.org
secure.gravatar.com             gravatar.loli.net
secure.gravatar.com/avatar      sdn.geekzu.org/avatar
www.gravatar.com/avatar         fdn.geekzu.org/avatar
[0-2].gravatar.com/avatar       fdn.geekzu.org/avatar
cdnjs.cloudflare.com            cdnjs.loli.net

面包屑导航

面包屑导航（BreadcrumbNavigation），这个概念名词来自一段童话故事“汉塞尔和格莱特”他们在森林里玩耍迷了路， 于是用一路撒面包屑的方式找到了出去的路。所以面包屑导航的作用是告诉访问者他们目前所在网站的位置以及如何返回上一级页面

面包屑导航（BreadcrumbNavigation）的作用及影响，让用户了解目前所在的位置，以及当前页面在整个网站中所在的位置； 体现了网站的架构层级；提高了用户体验；减少返回到上一级页面的操作；不用常常占用屏幕空间；降低跳出率； 有利于蜘蛛对网站的抓取；提供返回各个曾记得快速入口；有利于网站内链的建设。

注意：不管事次导航还是面包屑导航我们都要记住一点，不要堆砌关键词来放在导航栏上面。 关键词一定要自然分布，结合面包屑的导航让用户体验更好，页面更友好与搜索引擎也更友好。

xpath和css选择器

Chrome打开网页F12后下面的调试工具出来后点击Elements左边的那个框框里的鼠标箭头 （或者按Ctrl + Shift + C）， 然后网页会变成蓝色，到网页点击自己要选择的区域，接下来就会自动跳到Elements对应的位置， 在HTML的标签上点击鼠标右键->Copy->COpy selector或者xpath，就能复制选择器了。

css元素选择器

语法 说明
* 通用元素选择器，匹配任何元素
E 标签选择器，匹配所有使用E标签的元素
.info class选择器，匹配所有class属性中包含info的元素
#footer id选择器，匹配所有id属性等于footer的元素
E,F 多元素选择器，同时匹配所有E元素或F元素，E和F之间用逗号分隔
E F 后代元素选择器，匹配所有属于E元素后代的F元素，E和F之间用空格分隔
E > F 子元素选择器，匹配所有E元素的子元素F
E + F 毗邻元素选择器，匹配紧随E元素之后的同级元素F （只匹配第一个）
E ~ F 同级元素选择器，匹配所有在E元素之后的同级F元素
E[att='val'] 属性att的值为val的E元素 （区分大小写）
E[att^='val'] 属性att的值以val开头的E元素 （区分大小写）
E[att$='val'] 属性att的值以val结尾的E元素 （区分大小写）
E[att*='val'] 属性att的值包含val的E元素 （区分大小写）
E[att1='v1'][att2*='v2'] 属性att1的值为v1，att2的值包含v2 （区分大小写）
E:contains('xxxx') 内容中包含xxxx的E元素
E:not(s) 匹配不符合当前选择器的任何元素
  • 匹配示例
locator 匹配
css=divcss=div.formdiv <div class="formdiv">
css=#recordlistcss=ul#recordlist <ul id="recordlist">
css=div.subdiv pcss=div.subdiv > ul > p <p>Heading</p>
css=form + div <div class="subdiv">
css=p + licss=p ~ li 二者定位到的都是<li>Cat</li>但是storeCssCount的时候，前者得到1，后者得到4
css=form > input[name=username] <input name="username">
css=input[name$=id][value^=SYS] <input value="SYS123456" name="vid" type="hidden">
css=input:not([name$=id][value^=SYS]) <input name="username" type="text"></input>
css=li:contains('Goa') <li>Goat</li>
css=li:not(contains('Goa')) <li>Cat</li>

Sizzle的Css3结构性定位

语法 说明
E:nth(n)E:eq(n) 在其父元素中的E子元素集合中排在第n+1个的E元素 (第一个n=0)
E:first 在其父元素中的E子元素集合中排在第1个的E元素
E:last 在其父元素中的E子元素集合中排在最后1个的E元素
E:even 在其父元素中的E子元素集合中排在偶数位的E元素 (0,2,4…)
E:odd 在其父元素中的E子元素集合中排在奇数的E元素 (1,3,5…)
E:lt(n) 在其父元素中的E子元素集合中排在n位之前的E元素 (n=2,则匹配0,1)
E:gt(n) 在其父元素中的E子元素集合中排在n位之后的E元素 (n=2，在匹配3,4)
E:only-child 父元素的唯一一个子元素且标签为E
E:empty 不包含任何子元素的E元素，注意，文本节点也被看作子元素
  • 匹配示例
locator 匹配
css=ul > li:nth(0) <li>Cat</li>
css=ul > li:first <li>Cat</li>
css=ul > li:lt(2) <li>Cat</li>
css=ul > *:nth(0)css=ul > :nth(0) <p>Heading</p>
css=ul > :first <p>Heading</p>
css=ul > :even <p>Heading</p>
css=ul > *:lastcss=ul > li:last <li>Goat</li>
css=ul > li:gt(2) <li>Goat</li>
css=ul > li:even Cat, Car
css=ul > li:odd Dog, Goat
css=ul > p:odd [error] not found
css=ul > li:only-childcss=ul > :only-childcss=ul > *:only-child [error] not found (ul没有only-child)
css=div.subdiv > :only-child <ul id="recordlist">… … … …</ul>

保存直聘简历

执行以下JS然后保存页面，打开保存到本地的页面再打印即可

document.querySelector("body").style.margin="0px";
document.querySelector(".header").style.display="none";
document.querySelector(".template-container").style.paddingTop="14px";
document.querySelector(".template-container").style.paddingBottom="0px";
document.querySelector(".preview-box").style.margin="0 auto";
document.querySelector(".preview-box").style.borderRadius="0";
document.querySelector(".preview-box").style.boxShadow="none";
var certificateBox = document.querySelectorAll(".certificate-box .item");
certificateBox[0].style.display="list-item";
certificateBox[0].style.margin="0px";
certificateBox[1].style.display="list-item";
certificateBox[1].style.margin="0px";