WEB标准不是某一个标准，而是一系列标准的集合。网页主要由三部分组成：结构（Structure）、表现（Presentation）和行为（Behavior）。对应的标准也分三方面：结构化标准语言主要包括XHTML和XML，表现标准语言主要包括CSS，行为标准主要包括对象模型（如W3C DOM）、ECMAScript等。 标签闭合、标签小写、不乱嵌套、提高搜索机器人搜索机率、使用外链css和js脚本、结构行为表现的分离、文件下载与页面速度更快、内容能被更多的用户所访问、内容能被更广泛的设备所访问、更少的代码和组件，容易维护、改版方便，不需要变动页面内容、提供打印版本而不需要复制内容、提高网站易用性。 为什么将css引入放头部，js引入放后面？ style 标签写在 body 后和 body 前有什么区别？ ‘流’是css的一种基本定位和布局机制，HTML默认的布局机制就是’流布局’,是一种自上而下（例如块级元素div），从左到右排列的布局方式。 两种类型 & 区别 W3C盒模型（标准盒模型）: 切换方式 margin | padding 分别适用于什么场合 HTML称为超文本标记语言，是一种标识性的语言。它包括一系列标签．通过这些标签可以将网络上的文档格式统一。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。 HTML存在两种文档类型 如何避免浏览器的怪异模式? 可替换元素：其内容是通过标签类型以及其属性值来决定的。例如： 行内元素： 块级元素： iframe 是一种内联框架，也是一种很常见的网页嵌入方式。 缺点： Css引入方式有4种 内联、内嵌、外链、导入。 通过link和@import引入有什么区别？ id选择器、类选择器、标签选择器、相邻选择器( CSS3新增伪类 Css伪类与伪元素的区别 用户操作伪类 css选择器的解析是从右向左解析，为了避免对所有元素进行解析 各种css选择器 圆角 多列布局 详情 文本效果 线性渐变 transform 样式 过渡 动画 animation flex布局 👉 详情：见文本的‘布局–flex布局’ 媒体查询👉 联系文本的“布局–响应式布局–原理” 不同浏览器的标签默认的padding/margin不同，通过初始化css样式可以解决。 IE下，可以使用获取常规属性的方法来获取自定义属性，也可以使用 Chrome中文界面下默认会将小于12px的文本强制为12px。 超链接访问过后hover样式就不出现，因为被点击访问过的超链接样式不再具有 设置属性 触发BFC方式 4个 BFC的布局规则 6个 BFC的作用 绝对定位 + transform 万能flex布局（个人推荐） 父元素设置相对定位，子元素设置绝对定位，标签通过margin实现自适应居中 万能flex 父元素设置相对定位，子元素设置绝对定位，通过transform实现居中。 父元素设置 flex position + transform （宽高未知） position + margin （宽高确定） 绝对定位设置各个方向为0，通过 当元素设置了浮动后，可以向左向右移动，直到它的外边缘碰到包含它的框或者另外一个浮动元素的边框为止。 优点 缺点 额外标签法（不推荐）：在最后一个浮动标签后，新加一个标签，给其设置 父级添加overflow属性（不推荐）： 使用after伪元素清除浮动（推荐使用） 使用before和after双伪元素清除浮动 设置元素浮动后，display会变成block 详情 是指网站能够兼容多个终端，而不是为每一个终端特地去开发新的一个版本。 左右容器固定，中间容器自适应 flex position + margin float + margin 有一个高度固定的div，里面有两个div，一个高度100px，另一个填补剩下的高度。
方法一 flex 方法二 定位 原理类似于轮播图，整体元素一直排列下去，假设有5个需要展示的全屏页面，那么高度将会是500%，但我们只能展示100%，剩下的内容可以通过transform进行Y轴定位，也可以通过margin-top实现。 搜索引擎后台是一个庞大的数据库，里面存储了大量的关键词，每个关键词对应着多个网页。这些网页由“搜索引擎蜘蛛”或“网络爬虫”在网络上收集的。“蜘蛛”每天在互联网上爬行，对网页的内容进行分析提炼，查找其中的关键词。如果“蜘蛛”认为关键词在数据库中没有且对用户是有用的便存入后台的数据库中，反之，如果“蜘蛛”认为是垃圾信息或重复信息，就舍弃不要。 一个关键字对应多个网址，与关键词最吻合的网址就会排在前面。如果网站内容可以被搜索引擎能识别，那么搜索引擎就会提高该网站的权重，增加对该网站的友好度。这样一个过程我们称之为SEO。 提高网站的权重，增强搜索引擎友好度，以达到提高排名，增加流量，改善（潜在）用户体验，促进销售的作用。 白帽SEO，起到了改良和规范网站设计的作用，使网站对搜索引擎和用户更加友好，并且网站也能从搜索引擎中获取合理的流量，这是搜索引擎鼓励和支持的。 网站结构布局优化 网页代码优化 突出重要内容—合理的设计title、description和keywords 语义化书写HTML代码，符合W3C标准 正文标题要用 当网络速度很慢，或者图片地址失效的时候，就可以体现出alt属性的作用，他可以让用户在图片没有显示的时候知道这个图片的作用。同时为图片设置高度和宽度，可提高页面的加载速度。 表格应该使用 文本缩进 & 版权符号 重要内容不要用JS输出，因为“蜘蛛”不会读取JS里的内容，所以重要内容必须放在HTML里。 尽量少使用iframe框架,因为“蜘蛛”一般不会读取其中的内容。 谨慎使用 前端网站性能优化 减少http请求数量 控制资源文件加载优先级 尽量外链CSS和JS（结构、表现和行为的分离），保证网页代码的洁，也有利于日后维护 利用浏览器缓存 减少重排（Reflow） 减少 DOM 操作 图标使用IconFont替换 不使用CSS表达式，会影响效率 使用CDN网络缓存，加快用户访问速度，减轻服务器压力 启用GZIP压缩，浏览速度变快，搜索引擎的蜘蛛抓取信息量也会增大 伪静态设置 解析HTML，生成DOM树，解析CSS，生成CSSOM树，解析HTML和解析CSS同时进行。 将DOM树和CSSOM树，关联起来，构建一棵渲染树（Render Tree）(这一过程又称为Attachment)。每个DOM节点都有attach方法，接受样式信息，返回一个render对象(又名renderer)。这些render对象最终会被构建成一棵渲染树（Render Tree）。 Layout(布局)：根据生成的渲染树，进行布局(Layout)，为每个Render树上的节点确定几何信息（位置，大小）。 Painting(重绘)：根据渲染树以及回流得到的几何信息，得到节点的绝对像素 Display：将像素发送给GPU（图形处理器），展示在页面上。 DNS缓存 CDN缓存 浏览器缓存 服务器缓存 物理层、数据链路层、网络层、传输层、会话层、表示层和应用层。 TCP 和 UDP 的区别 面向连接 & 面向无连接 三次握手 为什么是三次握手？ TCP 的三次握手除了建立连接外，主要还是为了沟通 TCP 包的序号问题。 A 告诉 B，我发起的包的序号是从哪个号开始的，B 同样也告诉 A，B 发起的 包的序号是从哪个号开始的。 双方建立连接之后需要共同维护一个状态机，在建立连接的过程中，双方的状态变化时序图。 如图，刚开始的时候，客户端和服务器都处于 CLOSED 状态，先是服务端主动监听某个端口，处于 LISTEN 状态。然后客户端主动发起连接 SYN，之后处于 SYN-SENT 状态。服务端接收了发起的连接，返回 SYN，并且 ACK ( 确认 ) 客户端的 SYN，之后处于 SYN-SENT 状态。客户端接收到服务端发送的 SYN 和 ACK 之后，发送 ACK 的 ACK，之后就处于 ESTAVLISHED 状态，因为它一发一收成功了。服务端收到 ACK 的 ACK 之后，也处于 ESTABLISHED 状态，因为它也一发一收了。 四次挥手 这样整个连接就关闭了，当然上面只是正常的状态，也有些非正常的状态（比如 A 说完不玩了，直接跑路，B 发起的结束得不到 A 的回答，不知道该怎么办或则 B 直接跑路 A 不知道该怎么办），TCP 协议专门设计了几个状态来处理这些非正常状态。 断开的时候，当 A 说不玩了，就进入 FIN_WAIT_1 的状态，B 收到 A 不玩了的消息后，进入 CLOSE_WAIT 的状态。 A 收到 B 说知道了，就进入 FIN_WAIT_2 的状态，如果 B 直接跑路，则 A 永远处与这个状态。TCP 协议里面并没有对这个状态的处理，但 Linux 有，可以调整 tcp_fin_timeout 这个参数，设置一个超时时间。 如果 B 没有跑路，A 接收到 B 的不玩了请求之后，从 FIN_WAIT_2 状态结束，按说 A 可以跑路了，但是如果 B 没有接收到 A 跑路的 ACK 呢，就再也接收不到了，所以这时候 A 需要等待一段时间，因为如果 B 没接收到 A 的 ACK 的话会重新发送给 A，所以 A 的等待时间需要足够长。 TCP 为什么是可靠连接 HTTP HTTPS 客户端（浏览器）向服务器请求https连接。 服务器发送了一个SSL证书给客户端，SSL证书中包含了具体的内容有证书的颁发机构、有效期、公钥、证书持有者、签名，通过第三方的校验保证身份的合法。 客户端会读取证书所有者、有效期等信息进行校验。 客户端（浏览器）开始查找操作系统中已内置的受信任的证书发布机构CA，与服务器发过来的证书的颁发CA比对，用于验证证书是否为合法机构颁发。 如果找不到，浏览器就会报错。 如果找到了，就会取出其中的公钥，对证书内的签名进行解密。 使用相同的Hash算法对签名进行去摘要并与服务器发来的摘要进行对比。如果对比一致，则合法，这样就得到公钥了 客户端随机的秘钥A（用于对称加密）。 客户端用公钥对A进行加密。 客户端将加密A后的密文发送给服务器。 服务器通过私钥对密文进行解密得到对称加密的秘钥。 客户端与服务器通过对称秘钥加密的密文通信。 【参考文档】：
对WEB标准以及W3C的理解与认识
浏览器从上到下依次解析html文档。将css文件放到头部，css文件可以先加载。避免先加载body内容，导致页面一开始样式错乱，然后闪烁。
将javascript文件放到底部是因为：若将javascript文件放到head里面，就意味着必须等到所有的javascript代码都被下载、解析和执行完成之后才开始呈现页面内容。这样就会造成呈现页面时出现明显的延迟，窗口一片空白。
页面加载自上而下，当然是需要先加载样式。
写在body标签后，由于浏览器以逐行方式对HTML文档进行解析，当解析写在尾部的样式表会导致浏览器停止之前的渲染，等待加载且解析样式表后才重新进行渲染，这样可能导致留白现象（所以最好将style标签写在body前）。
“流”概念
盒模型
IE盒模型（怪异盒模型）:
width = border + padding + content;
一个块的宽度 = width + margin。
width = content；
一个块的宽度 = width + padding + border + margin。box-sizing: border-box; // IE盒模型标准 box-sizing: content-box; // W3C盒模型标准
margin：在border外侧需要留空
padding：在border内侧需要留空
在IE5.X,IE6中，为float的盒子指定margin时，左侧margin可能会变成两倍的宽度，通过改用padding或者指定盒子为display:inline就可以解决。
HTML
文档解析类型
怪异模型（默认）：浏览器按照自己的方式解析
标准模式：按照W3C标准
通过声明文档的解析类型 <!DOCTYPE html>
HTML语义化
header,footer等，让结构更加清晰，有利于浏览器的解析。
非替换元素&替换元素
iframe、video、img。
非可替换元素：其内容由其标签包裹内容决定。例如div、p、span、ul、li、ol。
块级元素和行内元素
span、a、img(行内替换元素)
h1~h6、p、div
HTML5
Html5新特性
header、footer、article、aside、caption、nav等canvasvideo和音频audioHtml5移除的元素(了解)
Html5哪些标签可以优化SEO
Meta提供给页面一些元信息（名称/键值），它有利于SEO。
属性：
属性
描述
name
用于描述网站
http-equiv
没有name时，可以采用这个属性的值（content-type,expires(期限),refresh,set-cookie,content属性关联到http请求头）
content
名称/值 中的值，可以是任意有效字符串
scheme
用于指定要用来翻译属性值的方案
header、footer、article、aside、caption、nav等。
iframe
优点：
Html 提供哪些 Api
CSS
CSS引入方式
CSS选择器
h1+p)、子选择器(ul>li)、后代选择器(li a)、通配符选择器(*)、属性选择器(a[rel = "XXX"])、伪类选择器、伪元素选择器、分组选择器
伪类选择器
x:first-of-type：选择属于其父元素的首个 <x> 元素的每个 <x> 元素
x:last-of-type：选择属于其父元素的最后一个 <x> 元素的每个 <x> 元素
x:only-of-type：选择属于其父元素唯一的 <x> 元素的每个 <x> 元素
x:only-child：选择属于其父元素的唯一子元素的每个 <x> 元素
x:nth-child(1)：选择属于其父元素的第一个子元素的每个 <x> 元素
等等
伪类选择元素基于的是当前元素处于的状态，或者说元素当前所具有的特性。
与伪类针对特殊状态的元素不同的是，伪元素对元素中的特定内容进行操作。但是它本身只是基于元素的抽象，并不存在于文档中，所以叫伪元素。
推荐书写样式顺序：link、visited、focus、hover、active伪元素选择器
:first-line、:first-letter、:before、:after、:enabled、:disabled、:checked
:enabled：每个已启用的元素（多用于表单元素 例如input）
:disabled：控制表单控件的禁用状态
:checked：单选框或复选框被选中
:before：在元素之前添加内容（可用来做清除浮动）
:after：在元素之后添加内容
font-size, font-family, color...border, padding, margin, width, height...
内联style，权值：1000
ID选择器，权值：0100
类选择器，权值：0010
标签选择器 & 伪元素选择器，权值：0001
通配符、子选择器、相邻选择器等，权值：0000
继承样式没有权值
如果层级相同，则向后比较，层级不同时，层级高的权重大
CSS3新特性 10个
1）E:last-child 匹配父元素的最后一个子元素E。
2）E:nth-child(n) 匹配父元素的第n个子元素E。
3）E:nth-last-child(n) CSS3 匹配父元素的倒数第n个子元素E。border-radius
@Font-face 特性
linear-gradient(left, red, blue)
translate()：元素从其当前位置移动，根据给定的 left（x 坐标） 和 top（y 坐标） 位置参数
rotate()：元素顺时针旋转给定的角度。
scale()：元素的尺寸会增加或减少。
skew()：元素翻转给定的角度，根据给定的水平线（X 轴）和垂直线（Y 轴）参数
matrix()：把所有 2D 转换方法组合在一起transition: property duration timing-function delay;
property：规定设置过渡效果的 CSS 属性的名称。
duration：规定完成过渡效果需要多少秒或毫秒。
timing-function：规定速度效果的速度曲线。
delay：定义过渡效果何时开始。@media screen and (max-width: 300px) { body {background-color:lightblue;} }
常见的Css兼容性问题 4个
*{ margin:0; padding:0px; } getAttribute()获取自定义属性。
通过加入css属性 -webkit-text-size-adjust：none;可以解决，或者使用transform中的scale()缩放属性hover和active了。
解决方法是改变css属性的排列顺序：
a:link{} → a:visited{} → a:focus → a:hover{} → a:active{}
Css优化，如何提高性能 6个
display:none 与 visibility:hidden 的区别
display:none 隐藏对应的元素，在文档布局中不再分配空间（导致重排）
visibility:hidden 隐藏对应的元素，在文档布局中保留原来的空间（导致重绘）
position属性
relative：相对定位，相对于自身位置进行定位absolute：绝对定位，相对于position不为static的第一个父级元素进行定位fixed：固定定位。相对于浏览器窗口进行定位inherit：继承父级元素position属性值static：默认值，即没有定位，仍为文档流sticky：粘性定位详情
设置position:sticky同时给一个(top,bottom,right,left)之一即可
使用条件：
1）父元素不能overflow:hidden或者overflow:auto属性。
2）必须指定top、bottom、left、right4个值之一，否则只会处于相对定位
3）父元素的高度不能低于sticky元素的高度
4）sticky元素仅在其父元素内生效
overflow属性
scroll：必定出现滚动条auto：子元素内容大于父元素时出现滚动条visible：溢出的内容出现在父元素之外hidden：溢出时隐藏
如何水平并垂直居中一张背景图？
background-position:center;
图形题：纯Css创建一个三角形
{ width:0px; height:0px; border-top:10px solid transparent; border-left:10px solid transparent; border-right:10px solid transparent; border-bottom:10px solid #000; }
BFC
居中
水平居中
text-align:center
margin:0 automargin-left：负宽度/2 （前提父元素设置相对定位）
{ width:100px; position:absolute; left:50%; margin-left:-50px }
display:table; margin: 0 auto;display:inline-block; text-align:center;{ position: absolute; left: 50%; transform: translateX(-50%); } { display:flex; justify-content:center; } 垂直居中
line-height: 盒子高度;适合纯文字类内容居中{ display:flex; align-items:center; } display:table + 子元素设置vertical-align:middle。垂直水平居中
{ display:flex; justify-content:center; align-items:center; } .parent{ position:relative; } .child{ position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); } .parent{ position: relative; } .child{ width: 100px; height: 100px; position: absolute; left: 50%; top: 50%; margin-left: -50px; margin-top: -50px; } margin:auto实现垂直水平居中（宽高已知）.parent{ position: relative; } .child{ width: 100px; height: 100px; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; }
布局
浮动布局
浮动元素脱离了正常文档流，可以想象成浮动元素浮在了正常文档流上方，文档流不再有这个元素存在。
在图文混排的场景下十分适用，可以实现文字环绕图片的效果，当元素浮动后，它有着块级元素的特点（可设置宽高），但它与inline-block存在差别。
float可以在横向排序上设置方向，而inline-block不可。
inline-block会出现存在空白间隙情况。
float致使元素脱离文档流，若父元素高度自适应，则会引起父元素高度塌陷。
clear：both;。
父元素添加overflow:hidden。
原理：触发BFC。（联系：文本的‘BFC–BFC的作用’）.clearfix:after{ //伪元素是行内元素 正常浏览器清除浮动方法 content: ""; display: block; height: 0; clear:both; visibility: hidden; } .clearfix{ *zoom: 1; //ie6清除浮动的方式，前面加*是hack写法，*号只有IE6-IE7执行，其他浏览器不执行 //ie6-7不支持伪元素：after，使用zoom:1触发hasLayout. } .clearfix:after,.clearfix:before{ content: ""; display: table; } .clearfix:after{ clear: both; } .clearfix{ *zoom: 1; }
flex布局
该布局提供了一种更高效的方法对容器中的项目进行布局、对齐和分配空间，他没有方向上的限制，可以由开发人员自由操作。
flex-direction: row | row-reverse | column | column-reverse;：决定主轴方向（容器排列方向）flex-wrap: nowrap | wrap | wrap-reverse;：如果一条轴线排不下，定义换行规则flex-flow: <flex-direction> || <flex-wrap>;：flex-direction和flex-wrap的简写形式justify-content: flex-start | flex-end | center | space-between | space-around;：定义容器在主轴上的对齐方式。align-items: flex-start | flex-end | center | baseline | stretch;：定义容器在交叉轴上的对齐方式。align-content: flex-start | flex-end | center | space-between | space-around | stretch;：定义多根轴线的对齐方式，如果容器只有一根轴线，该属性不起作用。
order：定义项目的排列顺序，数值越小，排列越靠前，默认为0。flex-grow：定义项目的放大比例，默认为0（即如果存在剩余空间，也不放大）。flex-shrink：定义项目的缩小比例，默认为1（即如果空间不足，该项目将缩小）。flex-basis：定义了在分配多余空间之前，项目占据的主轴空间。默认值为auto（项目本来大小）。flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]：
是flex-grow、flex-shrink和flex-basis的简写，默认值为 0 1 auto。
该属性有两个快捷值: auto(1 1 auto) 和 none(0 0 auto)。
建议优先使用这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值。align-self: auto | flex-start | flex-end | center | baseline | stretch;：
允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性，默认值为auto（表示继承父元素align-items属性，如果没有父元素，等同于stretch）
响应式设计
通过媒体查询测试不同的设备屏幕尺寸做处理
页面头部必须有meta声明的viewport。
<meta name=“viewport” content=“width=device-width，initial-scale=1.maximum-scale=1，user-scalable=no”>
布局题
三栏式布局 3种方式
<div class="container"> <div class="left">left</div> <div class="main">main</div> <div class="right">right</div> </div>
.container{ display: flex; } .left{ flex-basis:200px; background: green; } .main{ flex: 1; background: red; } .right{ flex-basis:200px; background: green; } .left,.right{ position: absolute; top: 0; background: red; } .left{ left: 0; width: 200px; } .right{ right: 0; width: 200px; } .main{ margin: 0 200px ; background: green; } .left{ float:left; width:200px; background:red; } .main{ margin:0 200px; background: green; } .right{ float:right; width:200px; background:red; }
自适应填补
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>自适应填补 方法一 flex</title> <style> *{ margin: 0; padding: 0; font-size: 0; } .father{ display: flex; flex-direction: column; width: 500px; height: 700px; background: blue; } .child1{ flex-basis: 100px; background: blueviolet; } .child2{ flex: 1; background: brown; } </style> </head> <body> <div class="father"> <div class="child1"></div> <div class="child2"></div> </div> </body> </html> <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>自适应填补 方法二 定位</title> <style> *{ margin: 0; padding: 0; font-size: 0; } .father{ position: relative; width: 500px; height: 700px; background: blue; } .child1{ height: 100px; background: blueviolet; } .child2{ position: absolute; top: 100px; bottom: 0; width: 100%; background: brown; } </style> </head> <body> <div class="father"> <div class="child1"></div> <div class="child2"></div> </div> </body> </html>
轮播图
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>轮播图实现</title> <style type="text/css"> .wrapper-container { position: relative; width: 500px; height: 400px; overflow: hidden; margin: 0 auto; } .wrapper { position: absolute; left: 0; top: 0; width: 300%; transition: all ease .5s; } .wrapper img { width: 500px; /* display: block; */ float: left; } </style> </head> <body> <div class="wrapper-container"> <div class="wrapper" id="wrapper"> <img src="./images/1.jpg" alt=""> <img src="./images/2.jpg" alt=""> <img src="./images/3.jpg" alt=""> </div> </div> </body> <script type="text/javascript"> let index = 0, dom = document.querySelector("#wrapper"), timer = null, childLength = dom.children.length, stepWidth = dom.children[0].offsetWidth timer = setTimeout(autoPlay, 3000) function autoPlay () { index++ index = index === childLength ? 0 : index dom.style.left = -index * stepWidth + 'px' timer = setTimeout(autoPlay, 3000) } </script> </html>
全屏滚动的原理
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>全屏滚动</title> <style type="text/css"> * { margin: 0; padding: 0; font-size: 0; } .box { position: relative; width: 100%; height: 100vh; overflow: hidden; } ul { position: relative; } li { width: 100%; height: 100vh; font-size: 30px; position: relative; display: flex; justify-content: center; text-align: center; } li p { font-size: 30px; position: absolute; bottom: 0; } </style> </head> <body> <div class="box"> <ul style="top: 0;"> <li style="background-color: yellowgreen;">一页面<p>一页面</p> </li> <li style="background-color: red;">二页面<p>二页面</p> </li> <li style="background-color: skyblue;">三页面<p>三页面</p> </li> <li style="background-color: yellow;">四页面<p>四页面</p> </li> </ul> </div> <script type="text/javascript"> var kai = true,i=0; var oUl = document.getElementsByTagName("ul")[0]; document.addEventListener('mousewheel', function(ev) { var ev = window.event || ev; if (kai) { kai = false; oUl.style.transition=" 0.5s ease"; // 原因见下 if (ev.wheelDelta < 0 && i<3) { //当滑轮向下滚动时 i++; } if (ev.wheelDelta > 0 && i>0) { //当滑轮向上滚动时 i--; } setTimeout(function() { oUl.style.top = -i*100 + 'vh'; }, 0); setTimeout(function() { kai = true; }, 1000); } }); // 因为高度为100vh 当窗口或框架被调整大小时， 100vh计算后的值变化, 就会有个缓慢变化的过程 // 即使改为 ul{ transition : top 0.5s ease;} 也不行 window.onresize=function(){ oUl.style.transition="none"; } </script> </body> </html>
seo搜索引擎优化
搜索引擎工作原理
作用
分类
白帽SEO
尽量简单、开门见山，提倡扁平化结构。
网站首页是权重最高的地方，如果首页链接太少，没有“桥”，“蜘蛛”不能继续往下爬到内页，直接影响网站收录数量。但是首页链接也不能太多，一旦太多，没有实质性的链接，很容易影响用户体验，也会降低网站首页的权重，收录效果也不好。
尽量让“蜘蛛”只要跳转3次，就能到达网站内的任何一个内页。
导航应该尽量采用文字方式，也可以搭配图片导航，但是图片代码一定要进行优化，<img>标签必须添加“alt”和“title”属性，告诉搜索引擎导航的定位，做到即使图片未能正常显示时，用户也能看到提示文字。
其次，在每一个网页上应该加上面包屑导航，对“蜘蛛”而言，能够清楚的了解网站结构，同时还增加了大量的内部链接，方便抓取，降低跳出率。
页面头部：logo及主导航，以及用户的信息。
页面底部：版权信息和友情链接。
一个页面最好不要超过100k，太大，页面加载速度慢。当速度很慢时，用户体验不好，留不住访客，并且一旦超时，“蜘蛛”也会离开。
<title>标题：只强调重点即可，尽量把重要的关键词放在前面，关键词 不要重复出现，尽量做到每个页面的<title>标题中不要设置相同的内容。
<meta keywords>标签：关键词，列举出几个页面的重要关键字即可，切记过分堆砌。
<meta description>标签：网页描述，需要高度概括网页内容，切记不能太长，过分堆砌关键词，每个页面也要有所不同。
尽量让代码语义化，在适当的位置使用适当的标签，用正确的标签做正确的事。让阅读源码者和“蜘蛛”都一目了然。比如：h1-h6 是用于标题类的，<nav>标签是用来设置页面主导航，列表形式的代码使用ul或ol，重要的文字使用strong等。<a>标签
页内链接，要加 “title” 属性加以说明，让访客和 “蜘蛛” 知道。而外部链接，链接到其他网站的，则需要加上 rel="nofollow" 属性, 告诉 “蜘蛛” 不要爬，因为一旦“蜘蛛”爬了外部链接之后，就不会再回来了。<h1>标签
h1标签自带权重“蜘蛛” 认为它最重要，一个页面有且最多只能有一个H1标签，放在该页面最重要的标题上面，如首页的logo上可以加H1标签。副标题用<h2>标签, 而其它地方不应该随便乱用 h 标题标签。<img>应使用 “alt” 属性加以说明<img src="cat.jpg" width="300" height="200" alt="猫" /> <caption>表格标题标签
caption 元素定义表格标题。caption 标签必须紧随 table 标签之后，您只能对每个表格定义一个caption 标签。<table border='1'> <caption>表格标题</caption> <tbody> <tr> <td>apple</td> <td>100</td> </tr> <tr> <td>banana</td> <td>200</td> </tr> </tbody> </table> <br>标签：只用于文本内容的换行<strong>、<em>标签
需要强调时使用。<strong>标签在搜索引擎中能够得到高度的重视，它能突出关键词，表现重要的内容，<em>标签强调效果仅次于<strong>标签；<b>、<i>标签：只是用于显示效果时使用，在SEO中不会起任何效果。
文本缩进不要使用特殊符号 应当使用CSS进行设置。版权符号不要使用特殊符号 © 可以直接使用输入法打出版权符号©。display：none;
对于不想显示的文字内容，应当设置z-index或缩进设置成足够大的负数偏离出浏览器之外。因为搜索引擎会过滤掉display:none其中的内容。
国内俗称CSS精灵，这是将多张图片合并成一张图片达到减少HTTP请求的一种解决方案，可以通过CSS的background属性来访问图片内容。这种方案同时还可以减少图片总字节数。
现在前端有很多工程化打包工具，如：grunt、gulp、webpack等。为了减少 HTTP 请求数量，可以通过这些工具再发布前将多个CSS或者多个JS合并成一个文件。
俗称懒加载，可以控制网页上的内容在一开始无需加载，不需要发请求，等到用户操作真正需要的时候立即加载出内容。这样就控制了网页资源一次性请求数量。
浏览器在加载HTML内容时，是将HTML内容从上至下依次解析，解析到link或者script标签就会加载href或者src对应链接内容，为了第一时间展示页面给用户，就需要将CSS提前加载，不要受 JS 加载影响。
一般情况下都是CSS在头部，JS在底部。<link rel="stylesheet" href="asstes/css/style.css" /> <script src="assets/js/main.js"></script>
浏览器缓存是将网络资源存储在本地，等待下次请求该资源时，如果资源已经存在就不需要到服务器重新请求该资源，直接在本地读取该资源。
基本原理：重排是DOM的变化影响到了元素的几何属性（宽和高），浏览器会重新计算元素的几何属性，会使渲染树中受到影响的部分失效，浏览器会验证 DOM 树上的所有其它结点的visibility属性，这也是Reflow低效的原因。如果Reflow的过于频繁，CPU使用率就会急剧上升。
减少Reflow，如果需要在DOM操作时添加样式，尽量使用 增加class属性，而不是通过style操作样式。
如果是动态网页，可以开启伪静态功能，让蜘蛛“误以为”这是静态网页，因为静态网页比较合蜘蛛的胃口，如果url中带有关键词效果更好。
动态地址：https://www.xxx.cn/index.php
伪静态地址：https://www.xxx.cn/index.html
黑帽SEO(了解)
浏览器
浏览器内核
浏览器的渲染机制
浏览器渲染过程:
浏览器内多个标签页之间的通信
JavaScript请求一般情况下有哪些地方需要用到缓存处理？
DNS缓存是指在正常访问ip之后，系统会将这个ip存储起来，当再次访问的时候，系统就会把本地的DNS缓存提取显示，等于是加速了网址的解析。
DNS记录存储在区域文件中，用于将域名转换为IP地址，还包括域名的服务器名称和邮件服务器信息，由于DNS记录完全由文本组成，因此在需要时可以进行修改
用户浏览器与服务器交互，没有接入CDN时：用户在浏览网站的时候，浏览器能够在本地保存网站中的图片或者其他文件的副本，这样用户再次访问该网站的时候，浏览器就不用再下载全部的文件，减少了下载量意味着提高了页面加载的速度。
接入CDN时：客户端浏览器先检查是否有本地缓存是否过期，如果过期，则向CDN边缘节点发起请求，CDN边缘节点会检测用户请求数据的缓存是否过期，如果没有过期，则直接响应用户请求，此时一个完成http请求结束；如果数据已经过期，那么CDN还需要向源站发出回源请求（back to the source request）,来拉取最新的数据。
客户端缓存减少了服务器请求，避免了文件重复加载，显著地提升了用户体验。但是当网站发生更新时(如替换了css，js以及图片文件)，浏览器本地仍保存着旧版本的文件，从而导致无法预料的后果。
缓存指的是将需要频繁访问的网络内容存放在离用户较近、访问速度更快的系统中，以提高内容访问速度的一种技术。服务器缓存就是存放频繁访问内容的服务器。
网络通信
UDP & TCP
TCP 是面向连接的，UDP 是面向无连接的
TCP 结构复杂，包头长度较长；UDP程序结构较简单，UDP的包头长度为端口号长度（16）。
TCP 是面向字节流的，UDP 是基于数据报的
TCP 保证数据正确性，UDP 可能丢包
TCP 保证数据顺序，UDP 不保证
在互通之前，面向连接的协议会先建立连接，如 TCP 有三次握手，而 UDP 不会。
简单理解：
A：您好，我是 A
B：您好 A，我是 B
A：您好 B
总结的话就是通信双方全都有来有回。对于 A 来说它发出请求，并收到了 B 的响应，对于 B 来说它响应了 A 的请求，并且也接收到了响应。
简单理解如下：
A：B 啊，我不想玩了
B：哦，你不想玩了啊，我知道了
这个时候，只是 A 不想玩了，即不再发送数据，但是 B 可能还有未发送完的数据，所以需要等待 B 也主动关闭。
B：A 啊，好吧，我也不玩了，拜拜
A：好的，拜拜
Http & Https
超文本传输协议。
客户端和服务器端传递的是明文的消息。
采用80端口。
非对称加密：用公钥和私钥来加解密。
对称加密：加密解密都用同一套秘钥。
注：非对称加密更加安全，对称加密速度更快。
本网页所有视频内容由 imoviebox边看边下-网页视频下载, iurlBox网页地址收藏管理器 下载并得到。
ImovieBox网页视频下载器 下载地址: ImovieBox网页视频下载器-最新版本下载
本文章由: imapbox邮箱云存储,邮箱网盘,ImageBox 图片批量下载器,网页图片批量下载专家,网页图片批量下载器,获取到文章图片,imoviebox网页视频批量下载器,下载视频内容,为您提供.
阅读和此文章类似的: 全球云计算
官方软件产品操作指南 (170)
