Skip to content

Files

Latest commit

 

History

History

Web

README.md

Web

[[toc]]

Flag

点击查看浏览器缓存 JS 浏览器缓存

文档博客站点

API接口文档管理

留言社区

留言评论

讨论社区

CDN

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
registry.yarnpkg.com
registry.nodejitsu.com
skimdb.npmjs.com/registry
registry.enpmjs.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，就能复制选择器了。

document.querySelector("body");// 返回文档中匹配指定css选择器的第一个元素
document.querySelectorAll("body");
document.getElementById("id");
document.getElementsByClassName("name");
document.getElementsByName("body");// 返回文档中name属性为指定值的元素
document.getElementsByTagName("a");// 返回文档中指定标签的元素

Xpath基本语法

表达式 描述
nodename 选取此节点的所有子节点
/ 从当前节点选取直接子节点
// 从当前节点选取子孙节点
. 选取当前节点
.. 选取当前节点的父节点
@ 选取属性
* 选取具有给定属性的所有元素
[@attrib] 选取给定属性具有给定值的所有元素
[@attrib='value'] 选取所有具有指定元素的直接子节点
| 选取两个节点，左右两个
book[1] 选取第一个book元素
//li[contains(@attrib,value)] 属于模糊定位。
//li[text()='xxx'] 选取li标签中的值为xxx的元素
//li[last()='xxx'] 选取li标签中的值为xxx的最后一个元素
//li/text() 选取li标签下的文本内容

Xpath定位和Selector定位的区别

定位方式 Xpath Css Selector
find_element_by_id("id值") //*[@id="id值"] #id值
find_element_by_name("name值") //*[@name="name值"] [name="name值"]
find_element_by_class_name("class name") class name .class name
find_element_by_tag_name("标签名") //标签名 标签名
find_element_by_link_text("链接文字") //a[text()="链接文字"] 不支持
find_element_by_partial_link_text("部分链接文字") //a[contains(text(),"部分链接文字")] 不支持
Target CSS 3 XPath
所有元素 * //*
所有的P元素 p //p
所有的p元素的子元素 p > * //p/*
根据ID获取元素 /转义/#id //*[@id= ‘id’]
根据Class获取元素 .class //*[contains(@class, ‘class’)]
拥有某个属性的元素 *[title] //*[@title]
所有P元素的第一个子元素 p > *:first-child //p/*[0]
所有拥有子元素a的P元素 无法实现 //p[a]
下一个兄弟元素 P + * //p/following-sibling::*[0]

跨域/跨源

浏览器的同源策略

同源策略是一个重要的安全策略，它用于限制一个origin的文档或者它加载的脚本如何能与另一个源的资源进行交互。它能帮助阻隔恶意文档，减少可能被攻击的媒介。

如果两个URL的protocol(协议,比如http协议,https协议)、port (端口号)和 host(主机，域名或IP部分) 都相同的话， 则这两个 URL 是同源。这个方案也被称为协议/主机/端口元组，或者直接是 元组。也就是说如果不满足以上3个条件中的任意一个,则被视为跨域.

解决跨域问题的几种方式

  • JSONP 凡是拥有src属性的标签都不受同源策略限制, 缺点是只支持GET请求
  • CORS 需要浏览器和后端同时支持, 后端设置以下请求头就可以开启
    • Access-Control-Allow-Origin 如果值为*表示允许任何域名的访问
    • Access-Control-Allow-Methods 表明服务器允许客户端使用的请求方法
    • Access-Control-Allow-Headers 表明服务器允许请求中携带的头部字段
    • Access-Control-Max-Age 表明响应的有效时间。在有效时间内，浏览器无须为同一请求再次发起预检请求
    • Access-Control-Expose-Headers 服务器允许浏览器访问的头信息白名单
    • Access-Control-Allow-Credentials 指定了当浏览器的credentials设置为true时是否允许浏览器读取response的内容
    # OPTIONS预检命令，预检命令通过时才发送请求
# 检查请求的类型是不是预检命令
if ($request_method = 'OPTIONS') {
    #   表示允许这个域跨域调用（客户端发送请求的域名和端口）
    #   $http_origin动态获取请求客户端请求的域   不用*的原因是带cookie的请求不支持*号
    add_header 'Access-Control-Allow-Origin' $http_origin;
    # Om nom nom cookies
    add_header 'Access-Control-Allow-Credentials' 'true';
    # 指定允许跨域的方法，*代表所有
    add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS, PUT, DELETE';
    # Custom headers and headers various browsers *should* be OK with but aren't
    #add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';
    add_header 'Access-Control-Allow-Headers' $http_access_control_request_headers;
    add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range';
    # Tell client that this pre-flight info is valid for 20 days
    # 预检命令的缓存，如果不缓存每次会发送两次请求
    add_header 'Access-Control-Max-Age' 1728000;
    #add_header 'Content-Type' 'text/plain charset=UTF-8';
    #add_header 'Content-Length' 0;
    return 204;
}
  • postMessage 可以实现跨文本档、多窗口（iframe间通信最完美的办法）、跨域消息传递
  • websocket HTML5的一个持久化的协议，它实现了浏览器与服务器的全双工通信，也是跨域的一种解决方案
  • Nginx 反向代理（其他服务器应用也可），一般用于生产环境
  • webpack-dev-server 使用NodeJS服务器中间件Express代为获取数据，仅用于开发环境