Bajins

# Web

# Flag

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

# 静态博客或文档

API接口文档管理

# 留言社区

留言评论

讨论社区

# CloudFlare

# Workers

代理

Deploy to Cloudflare Workers (opens new window)

# Warp

# 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
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个条件中的任意一个,则被视为跨域.

解决跨域问题的几种方式

CSS →