# Web

# flag

# 框架

# 静态博客或文档

# 面包屑导航

面包屑导航(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>

SizzleCss3结构性定位

语法 说明
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>