--- theme: qklhk-chocolate highlight: atelier-cave-dark --- # 第一章基本素质 ## 1.二叉树+遍历 **二叉树的性质：**
性质1：二叉树第i层上的结点数目最多为$2^{i-1}$(i>=1)
性质2：深度为k的二叉树至多有$2^{k-1}$个结点（k>=1）
性质3：包含n个结点的二叉树的高度至少为$log_2n+1$
性质4：在任意一棵二叉树中，若终端结点的个数为$n_0$，度为2的结点数为$n_2$，则$n_0$=$n_2$+1 **完全二叉树：**
一棵二叉树中，只有最下面两层结点的度可以小于2，并且最下层的叶结点集中在靠左的若干位置上，这样的二叉树称为完全二叉树。
**如果一棵完全二叉树的结点总数为n，那么叶子结点等于n/2（当n为偶数时）或者(n+1)/2（当n为奇数时）** 前序遍历：根节点->左子树->右子树
中序遍历：左子树->根节点->右子树
后序遍历：左子树->右子树->根节点
①已知前序遍历、中序遍历————>求后序遍历
重点：前序遍历第一个为根节点。 ②已知前序遍历、后序遍历————>求中序遍历
重点：前序遍历第一个为根节点。
重点：后序遍历最后为根节点。
前序遍历和后序遍历的共同点：左子树紧跟着是右子树

> 前序遍历：aebdc 后序遍历：bcdea
> a是根节点，ebdc要么都是左子树，要么都是右子树
> e是子树的根节点，b是左子树，dc是右子树（其中d是根节点）
> > 前序遍历ABCDFGHE 后序遍历BGHFDECA
> A是根节点，左子树B，右子树CDFGHE
> 右子树中C为根节点，左子树DFGH，右子树E
> 左子树中D为根节点，然后F为左子树或右子树的根，G左H右
>中序遍历BADGFHCE或BAGFHDCE
③已知中序遍历、后序遍历————>求前序遍历重点：后序遍历最后为根节点。 # 第二章 CSS基础 ## 1.css选择器 |-------选择器类型 |-------使用方式 | |--|--| |id选择器|#id属性值{}| |类选择器|.class属性值{}| |元素选择器 | 标签名{} | |通配选择器|*| |交集选择器|选择器1选择器2选择器3选择器n{}| |选择器分组（并集选择器）|选择器1,选择器2,选择器n{}| |子元素选择器|父元素 > 子元素{}| |后代元素选择器|祖先后代{}| |下边一个兄弟选择器|当前元素 + 下一个兄弟元素{}| |下边所有兄弟元素|当前元素 ~ 下边兄弟元素{}| |属性选择器|标签名[属性名] ——选择含有指定属性的元素p[title]
标签名[属性名=属性值]——选择含有指定属性和属性值的元素p[title=abc]
标签名[属性名^=属性值]——选择属性值以指定属性值开头的元素
标签名[属性名$=属性值]——选择属性值以指定属性值结尾的元素
标签名[属性名*=属性值]——选择属性值中含有某值的元素| ## 2.display属性 > 基线（base line）并不是汉字文字的下端沿，而是英文字母“x”的下端沿。
> 当font-size等于line-height时，行距 = line-height - font-size = 0；
> 当font-size大于line-height时，则会出现行距为负值，则两行重叠
|------值| ------特点 |------设置居中| |--|-----|---| | block块级元素 | ①占满一行
②宽高可设置。|margin:0 auto;没有内容也没设置宽度，不能实现居中。| | inline行内元素 | ①不占满一行
②宽高不可设置，内容决定大小、占位。 |父级元素设置text-align:center;文本居中，行内元素跟随内容居中。| | inline-block行内块元素 | ①不占满一行
②宽高可设置
③内容决定占位。 |存在基线对齐，并列行内块元素会相互影响。| |none|①元素不显示
②元素空间不保留。不同于visibility:hidden
③元素结构在，同vue中的v-show| |inherit|规定应该从父元素继承display属性的值。| ## 3.浮动+绝对定位 | | 浮动 |绝对定位| |--|:-----|:----| |使用|float:left;
float:right;|position:absolute; | 相同特点 | ①脱离文档流，让出位置，覆盖之后的非浮动元素。
②行内元素变为块元素。
③不会覆盖之前的非浮动元素.
④浮动元素默认不会从父元素中移出。 |①脱离文档流，让出位置，覆盖之后的非浮动元素。
②行内元素变为块元素。
③不会覆盖之前的非浮动元素。
④浮动元素默认不会从父元素中移出。| |不同特点|多个浮动元素不会重叠，会紧跟前一个浮动元素。
①没有水平等式。
②不能使用偏移定位，除非开启相对定位辅助。|如果不设置偏移元素的位置不发生变化，多个相对同一个包含块定位的元素如果不设置偏移会重叠。
①可以通过top,left,right,bottom偏移量进行定位，不会挤其他元素。
②相对于其包含块（最近开启相对定位的祖先元素）进行定位。
③水平方向等式：left+margin-left + border-left + padding-left + width + padding-right + border-right + margin-right + right = 包含块的宽度
④垂直方向等式：top+margin-top+border-top+padding-top+height+padding-bottom+border-bottom+margin-bottom+bottom = 包含块的高度| |水平居中|方法一：float:left,添加相对定位,left:50%,再margin-left:-自己的宽度。(css3的transform:teanslateX(-50%)可以不知道自己的宽度)|方法一：添加相对定位,left:50%,再margin-left:-自己的宽度。(css3的transform:teanslateX(-50%)可以不知道自己的宽度)
方法二：left:0,right0,margin:0 auto，由于默认情况下left和right为auto，设置让等式成立。| |注意点|①不能使用margin：0 auto;此时水平方向的等式不强制成立，auto无效。
②一定要有width，否则其为auto。|①一定要有width，否则其为auto。| ## 4.清除浮动带来的影响（高度塌陷） > **BFC(Block Formatting Context)块格式化环境** > >BFC是一个CSS中的隐含的属性，可以为一个元素开启BFC，开启BFC的元素会变成一个独立的布局区域。 > > **BFC布局规则** >>①内部的Box会在垂直方向，一个接一个地放置。
>>②Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠。
>>③每个元素的margin box的左边，与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
>>④BFC的区域不会与float box重叠。
>>⑤BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
>>⑥计算BFC的高度时，浮动元素也参与计算
> > **元素开启BFC的特点：** > >①不会被前面的浮动元素所覆盖。
>> ②子元素和父元素的外边距不会重叠。
> >③开启后可以包含浮动的子元素。

解决方式	问题：父元素高度auto靠子元素撑开，而子元素浮动，父元素高度塌陷。
设置父元素浮动 (不推荐)	都一起脱离文档流了，父元素也变成浮动元素了，宽度不满足等式了，也就不独占一行了，虽然高度上确实有些效果。
将父元素设置为行内块元素（不推荐）	父元素，为行内块，水平等式不强制成立，宽度为内容宽度
将元素的overflow设置为非visible（scroll滚动条 auto hidden）	也就overflow:hidden的使用感好一些，auto也可以。
追加内容方式清除浮动	使用伪元素::after{ content: '';display: block;clear: both;}

# 第三章 JS基础 ## 1.强制类型转换 **涉及到知识：包装类**
在JS中为我们提供了三个包装类，通过这三个包装类可以将基本数据类型的数据转为对象。
（注意我们在实际应用中不会使用基本数据类型的对象）
String() -可以将基本数据类型字符串转换为String对象
Number() -可以将基本数据类型的数字转换为Number对象
Boolean() -可以将基本数据类型的布尔值转换为Boolean对象
**当让一些基本数据类型的值去调用属性和方法时，浏览器会临时使用包装类将其转换为对象，然后再调用对象的属性和方法。**
**调用完以后，再将其转换为基本数据类型。**
> 当作为一个构造函数（带有运算符 new）调用时，Boolean() 将把它的参数转换成一个布尔值，并且返回一个包含该值的 Boolean 对象。
>如果作为一个函数（不带有运算符 new）调用时，Boolean() 只将把它的参数转换成一个原始的布尔值，并且返回这个值。 | 强转为String| 强转为Number|强转为Boolean| |:-----|:----|--| | **obj.toString()方法：将一个对象的值转为字符串**
使用方法：
arrayObject.toString()
booleanObject.toString()
dateObject.toString()
NumberObject.toString()
stringObject.toString()
①null和undefined都会报错
"Uncaught TypeError: Cannot read property 'toString' of null"
②数组会以逗号连接成字符串。
**注意点：** 这里如果这样使用，2.toString()是会报错的，原因是由于数字后面紧跟点，js引擎会先解析2.，将其装箱为Number，而后就报错。
一定要以下方式2..toString()、2 .toString()、(2).toString()| **parseInt(string, radix):可解析一个字符串，并返回一个整数。**
①可以将字符串中有效的整数提取中来转换成Number
②开头是字母的字符串直接返回NaN
**parseFloat(string) 函数可解析一个字符串，并返回一个浮点数。**|**Boolean(object)把对象的值转为boolean类型。**
①NaN、0、空串、null、undefined都转为false。| |**String(object)：把对象的值转为字符串，其实String()底层调用的也是toString()**
①null被转为string类型的'null'
②undefined被转为string类型的'undefined'|**Number(object)：把对象的值转为数字**
①纯数字字符串，例如'123'，转为number数字类型123。
②undefined和非纯数字字符串、数组等等，转为NaN。
③空串和null，被转为number类型数字0。
④true和false被转为1和0|| ## 2.判断类型 | typeof |instanceof|===|Object.prototype.toString.call()|isArray()| |--|--|--|--|--| |

|d|d|

|| ## 3.比较运算关系运算符比较进行了隐式类型转换，如果关系成立，它会返回true。 **①null和undefined相比较为true，两者和其他任意类型比较都为false。** ②NaN和任意类型包括它自己比较都为false。 ③字符串与字符串，分别比较字符编码。 ④其他类型，隐式转换为数字比较。 ## 4.数组中的方法以及和数组相关的方法

push(newelement1,newelement2, ....,newelementX)	向数组的末尾添加一个或多个元素，并返回新的长度。	改变原数组	参数可多个，多个要添加的元素。
pop()	删除并返回数组的最后一个元素。	改变原数组
shift()	把数组的第一个元素从其中删除，并返回第一个元素的值。	改变原数组
unshift(newelement1,newelement2, ....,newelementX)	向数组的开头添加一个或更多元素，并返回新的长度。	改变原数组
slice(start,end)	从已有的数组中返回选定的元素。	不改变原数组	start必须，end可选（不包含该元素）
splice(index, howmany, item1,.....,itemX)	从数组中添加/删除项目，然后返回被删除的项目。	改变原数组	index必须，howmany必须，之后的参数可选。第一个参数定义了应添加新元素的位置（拼接）。第二个参数定义应删除多少元素。其余参数定义要添加的新元素。
sort(sortby)	排序，sortby必须是函数，可选	改变原数组	两个参数，第一个参数为数组后一个值，第二个参数为数组前一个值。交换与否看函数的返回值，返回值<0交换顺序，返回值>=0不交换。
reverse()	颠倒数组中元素的顺序。	改变原数组
Math工具类中的方法，求最大值最小值	Math.max.apply(null,[1, 2, 3]) 等于 Math.max(1, 2, 3)。Math.max.apply(null,[1, 2, 3]) 等于 Math.max(1, 2, 3)。
concat(arrayX, arrayX, ......,arrayX)	用于连接两个或多个数组,返回被连接数组的一个副本。	不改变原数组
forEach()	为每个数组元素调用一次函数（回调函数）。		函数接受 3 个参数：项目值、项目索引、数组本身
map()	通过对每个数组元素执行函数来创建新数组,不会对没有值的数组元素执行函数。	不改变原数组	函数有 3 个参数：项目值项目索引数组本身,当回调函数仅使用 value 参数时，可以省略索引和数组参数。
filter()	创建一个包含通过测试(函数返回值为true)的数组元素的新数组	不改变原数组	函数接受 3 个参数：项目值、项目索引、数组本身
reduce()	在每个数组元素上运行函数，以生成（减少它）单个值,在数组中从左到右工作	不改变原数组	函数接受 4 个参数：总数（索引0的值或者先前返回的值）项目值(从索引1开始)、项目索引、数组本身

## 5.数组相关应用（数组重排） |各种应用 |js函数程序图片（为了美观就自己手打吧） | |--|--| | 数组重排|![在这里插入图片描述](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/8003c19153e8456cbdc73366c870a780~tplv-k3u1fbpfcp-zoom-1.image)| ## 6.各类函数（防抖+节流） | 函数类型| 原理|代码| |--|:-----|--| | 防抖函数 | **采用setTimeout 的方式，在一定时间内，将多次触发变为一次触发。**
防抖函数涉及到的问题：this指向、arguments参数（注意箭头函数没有自己的this和arguments）
右边代码实现了两种防抖：①首次点击立刻执行，后面一段时间点击无效。②首次点击同样延时执行。|

| |节流函数|**减少一定时间的触发频率**|

| ## 7.let、var、const的区别

var	let	const
①变量提升（预编译阶段，js引擎扫描代码把var声明提到作用域的顶端） ②可以重复声明。 ③不存在块级作用域，for循环变量会泄漏到全局变量。	①预编译阶段，被放入暂时性死区。访问暂时性死区中的变量会触发运行的错误，只有执行变量声明语句后变量才能被正常访问。 ②在同一作用域下不能重复声明。 ③存在块级作用域。 ④声明的变量不会绑定给window对象。	①预编译阶段，被放入暂时性死区。访问暂时性死区中的变量会触发运行的错误，只有执行变量声明语句后变量才能被正常访问。 ②在同一作用域下不能重复声明。 ③存在块级作用域。 ④声明的变量不会绑定给window对象。 ⑤声明的是常量，常量指向的地址数据不可改动。

## 8.call、apply、bind的区别 ## 9.深拷贝、浅拷贝

浅拷贝	对于引用数据类型进行拷贝，拷贝的为同一个地址同一个对象，修改任意一个值另外一个也会发生改变。
深拷贝	对于引用数据类型，拷贝后指向的地址不同，不是同一个对象不相互影响。
自定义js深拷贝函数
	步骤： 1.判断数据类型，如果是值存储类型则直接返回。 (Number、String、boolean、null、undefined) 2.地址引用类型： ①创建相同结构，统一复制结构体中的内容。 ②如果复制内容仍然为地址引用类型，就递归调用。注意问题： 1.要加上.hasOwnProperty()判断。 2.环————循环引用导致的死循环，Maximum call stack size exceeded栈溢出声明一个新数组，把每次需要深度拷贝的原对象和拷贝后的对象以对象的形式放入数组中。	除以上自定义外—— 简便方法: JSON.parse(JSON.stringfy()) 原理:把一个对象序列化为一个JSON字符串,将对象的内容转换成字符串的形式再保存在磁盘上,再用JSON.parse()反序列化将JSON字符串变成一个新的对象

## 10.异步 >**异步编程** >异步编程允许我们在执行一个长时间任务时，程序不需要进行等待而是继续执行之后的代码，直到任务执行完成后再回来通知我们，通常是回调函数的形式。
>**这种编程模式避免了程序的阻塞，大大提高了CPU的执行效率。** >**回调函数callbak function：** >回调函数是作为参数传递给另一个函数并在其中执行的函数。
>*为什么要有回调函数?*
>例如一个calculate(a,b,type)计算函数，如果是之前可能要做不同的运算，会通过判断传入type的类型，从而执行不同的运算操作。 >而现在calculate(a,b,add) calculate(a,b,mutiply) calculate(a,b,(a,b)=>a-b等等，通过把函数作为参数传入，在父函数中调用，即回调函数。 >————在函数外部定义复杂的功能。
>*数组上的方法:forEach(),sort()等等，都传入了回调函数。* >**作用：**
>第三方函数我们无法改变其内部的实现，通过传入我们自定义的函数来达到我们想实现的功能。实现异步的方式：
#### ①传统的异步回调函数Callback Function：比如setTimeout(()=>{...},1000)让一个函数在指定的时间后执行，多个异步操作造成回调地狱。 #### ②Promise对象
Promise是一个构造函数，Promise对象用于表示一个异步操作的最终完成（成功或失败）及返回的结果值。
**三个状态：**
*待定（pending）* : 初始状态，既没有被兑现，也没有被拒绝。
*已兑现（fulfilled）* : 意味着操作成功完成。
*已拒绝（rejected）* : 意味着操作失败。 **Promise构造函数接收一个函数作为参数，该函数又接收两个参数resolve和reject函数（js引擎提供）:**
resolve函数:将Promise对象的状态pending--->resolved
reject函数：将Promise对象的状态pending--->rejected **Promise对象上有几个方法，同样可以返回各种状态的promise对象：**
*Promise.resolve()* 返回一个以给定值解析后的Promise对象。 *Promise.reject()* 方法返回一个带有拒绝原因的Promise对象。 *Promise.all()* 这个方法返回一个新的promise对象，该promise对象在iterable参数对象里所有的promise对象都成功的时候才会触发成功，一旦有任何一个iterable里面的promise对象失败则立即触发该promise对象的失败。这个新的promise对象在触发成功状态以后，会把一个包含iterable里所有promise返回值的数组作为成功回调的返回值，顺序跟iterable的顺序保持一致；如果这个新的promise对象触发了失败状态，它会把iterable里第一个触发失败的promise对象的错误信息作为它的失败错误信息。 *Promise.any()* 接收一个Promise可迭代对象，只要其中的一个promise成功，就返回那个已经成功的promise。如果可迭代对象中没有一个promise成功（即所有的promises都失败/拒绝），就返回一个失败的promise和AggregateError类型的实例(它是 Error的一个子类,用于把单一的错误集合在一起。) *Promise.race(iterable)* 方法返回一个promise，一旦迭代器中的某个promise解决或拒绝，返回的 promise就会解决或拒绝。 **Promise原型上的方法**
*Promise.prototype.then()* 返回一个Promise对象。它最多需要有两个参数：Promise 的成功和失败情况的回调函数。
*Promise.prototype.catch()* 返回一个Promise对象，处理拒绝的情况。它的行为与调用Promise.prototype.then(undefined, onRejected) 相同。 (事实上, calling obj.catch(onRejected) 内部calls obj.then(undefined, onRejected)).
*Promise.prototype.finally()* 方法返回一个Promise。在promise结束时，无论结果是fulfilled或者是rejected，都会执行指定的回调函数。这为在Promise是否成功完成后都需要执行的代码提供了一种方式。 #### ③async和await（ES8）两种语法结合让异步代码像同步代码一样。 **async函数：**
①返回值为promise对象(如果是自己返回Promise对象，则看自己设置的成功或失败状态。如果自己返回其他，都将变为一个成功的Promise对象；如果自己抛出错误throw new Error('出错了')，则返回的是一个失败的Promise)。
②promise对象的结果由async函数执行的返回值决定。
**await函数：**
①await必须写在async函数中。
②await右侧的表达式一般为promise对象。
③await返回的是promise成功的值。
④await的promise失败了，就会抛出异常，需要通过try……catch捕获异常。 # 第四章 ES系列 ## 1.模块化（ES6）模块化有利于管理模块间的依赖你，更依赖模块的维护。主流的模块化： ||CommonJS |AMD |CMD| |--|--|--|--| |遵循规范的有|node.js | require.js|sea.js| |特点|node.js|对于依赖的模块，AMD是提前执行。推崇依赖前置。|对于依赖的模块，CMD是延迟执行。推崇依赖就近。| ## 2.class 类相当于是构造函数的语法糖，通过class关键字可以定义类： 1. class声明类； 2. constructor定义构造函数初始化； 3. extends继承父类； 4. super调用父级构造方法； 5. static定义静态方法和属性（**类自己的属性方法，相当于构造函数对象自己的属性方法，实例对象上没有**）； 6. 子类可以重写父类方法（**原因是顺着原型链找，子类重写的方法比较前，就近原则**）； 7. 方法必须使用简写的语法，不能使用es5的对象完整形式。 ## 3.Array.prototype.includes（ES7）用来检测数组中是否包含某个元素，返回boolean值。 # 第五章浏览器全局 ## 1.浏览器执行时间线首先提前了解以下解析和异步加载———— **当浏览器获得一个html文件时，会自上而下加载解析：** > ①浏览器会将HTML解析成一个**DOM树**，DOM树的构建过程是一个深度遍历过程：当前节点的所有子节点都构建好后才会去构建当前节点的下一个兄弟节点。 >
> ②将CSS解析成 **CSS RuleTree** 。 >
> ③根据DOM树和CSSTree合并为 **RenderTree**。(RenderTree记载着各个节点的CSS定义以及他们的从属关系) >
> ④浏览器已经能知道网页中有哪些节点、可以计算出每个节点在屏幕中的位置，然后遍历render树，并使用UI线层绘制每个节点(渲染步骤还会分为三个小步骤) > layout ：将渲染树上的节点，根据它的高度，宽度，位置，为节点生成盒子 > paint：确定渲染树上的节点的大小和位置后，便可以对节点进行涂鸦 composite > layer：合成层；当渲染树上的节点涂鸦完毕后，便生成位图（bitmap），浏览器把此位图从CPU传输到GPU。 **js同步加载：** ```javascript ``` **js异步加载：** 像一些工具库等辅助开发类的js，它没有操作dom的行为，我们并不想它的阻塞后续的解析处理。 > 异步加载也叫非阻塞加载，浏览器在下载js的同时，还会继续进行后续页面的处理。
> ①defer > 它会等到dom文档全部解析完才会执行，所有的defer 脚本保证是按顺序依次执行的，此属性只有ie才能用 >```javascript > >``` >②async >async属性是HTML5新增的,IE9以上都能执行,比较普遍。但是它将在下载后立马执行，不能保证脚本会按顺序执行。它们将在onload 事件之前完成。 >```javascript > >```

顺序
创建document对象，开始解析web页面。	这个阶段document.readyState=‘loading’
遇到link外部css	创建线程，进行异步加载，并继续解析文档
遇到script外部js,并且没有设置async、defer	浏览器同步加载，并阻塞，等js加载完并执行完该脚本，然后继续解析文档
遇到script外部js，并且设置有async、defer	浏览器创建线程异步加载，并继续解析文档；对于async属性的脚本，脚本加载完成后立即执行；对于defer属性的脚本，异步加载，但延迟执行。（异步时禁止使用document.write()，因为当整个文档解析差不多，再调用document.write()，会把之前的文档流都清空）；
遇到img等	先正常解析dom结构，然后浏览器异步加载src，并继续解析文档。（看到img标签直接挂dom树上，不等src加载完）；
当文档解析完成（domTree建立完毕，不是加载完毕）	document.readyState=‘interative’
文档解析完成后	所有设置defer的脚本会按顺序执行（现实并不按顺序，js高程中有说明）；
document对象触发DOMContentLoaded事件	（jQuery入口函数其实就是触发的这个事件），这也标志着程序从同步脚本执行阶段，转化为事件驱动阶段。
当所有异步的脚本加载完并执行后（img等页面所有的都加载并执行完后）	document.readyState=‘complete’,window触发load事件；

## 2.词法分析、预编译、解释执行三大步骤

词法分析	检查一遍js代码内有没有出现语法错误（比如少写个分号，多写个括号等），语法分析期间不会执行代码。
预编译	这个阶段发生在代码执行的前一刻，在内存里面创建一个空间，用来存定义的变量和函数。	预编译发生在script中代码执行的前一刻 1.创建GO（Global Object）对象。 2.寻找var变量声明，值设为undefined。 3.寻找函数声明，将函数名作为GO属性名，值为函数体。
		预编译发生在函数执行的前一刻 1.创建AO（Activation Object）对象。 2.寻找函数的形参和变量声明，将变量和形参名作为AO对象的属性名，值设为undefined。 3.将形参与实参相统一。 4.寻找函数声明，将函数名作为AO属性名，值为函数体。
解释执行	执行代码

## 3.内置对象+宿主对象+自定义对象

内置对象	宿主对象	自定义对象

# 第六章 http相关 ## 1.DNS（Domain Name System，域名系统） | |DNS | |--|:----| |理解|由解析器和域名服务器组成，保存有该网络中所有主机的域名和对应的ip地址，作为域名和ip地址相互映射的一个分布式数据库。| |作用 | 域名和IP地址的相互映射。 | |运行|大多运行在UDP协议之上，端口号为53.| ## 2.OSI七层协议模型和五层协议模型

OSI七层协议模型	五层协议模型		图
应用层（Application）	应用层	直接为用户的应用进程（例如电子邮件、文件传输和终端仿真）提供服务。在因特网中的应用层协议很多，如支持万维网应用的HTTP协议，支持电子邮件的SMTP协议，支持文件传送的FTP协议，域名系统服务DNS，POP3，SNMP，Telnet等等。	五层协议只是OSI和TCP/IP的综合，实际应用还是TCP/IP的四层结构。为了方便可以把下两层称为网络接口层。进程间通信（IPC，InterProcess Communication）是指在不同进程之间传播或交换信息。IPC的方式通常有管道（包括无名管道和命名管道）、消息队列、信号量、共享存储、Socket、Streams等。其中 Socket和Streams支持不同主机上的两个进程IPC。
表示层（Presentation）
会话层（Session）
运输层（Transport）	运输层	负责向两个主机中进程之间的通信提供服务。由于一个主机可同时运行多个进程，因此运输层有复用和分用的功能。运输层主要使用以下两种协议： (1) 传输控制协议TCP(Transmission Control Protocol)：面向连接的，数据传输的单位是报文段，能够提供可靠的交付。 (2) 用户数据包协议UDP(User Datagram Protocol)：无连接的，数据传输的单位是用户数据报，不保证提供可靠的交付，只能提供“尽最大努力交付”。
网络层（Network）	网络层	（1）负责为分组交换网上的不同主机提供通信服务。在发送数据时，网络层把运输层产生的报文段或用户数据报封装成分组或包进行传送。在TCP/IP体系中，由于网络层使用IP协议，因此分组也叫做IP数据报，或简称为数据报。（2）选中合适的路由，使源主机运输层所传下来的分组，能够通过网络中的路由器找到目的主机。
数据链路层（Data Link）	数据链路层	在两个相邻结点之间传送数据时，数据链路层将网络层交下来的IP数据报组装成帧(framing)，在两个相邻结点之间的链路上“透明”地传送帧中的数据。
物理层（Physical）	物理层	在物理层上所传数据的单位是比特。物理层的任务就是透明地传送比特流。

## 3.http详解

概念	http（超文本传输协议）是一个基于请求与响应模式的、无状态的、应用层的协议，常基于TCP的连接方式。	请求与响应	只能是客户端发起请求，服务器响应。服务器不能主动向客户端传递消息。
		无状态	客户端的每次请求都没有关系，它们是独立的
		底层	底层是基于TCP实现的。
请求	由三部分组成，分别是：请求行、消息报头、请求正文。	请求行：方法 URL 协议/版本	方法： ①GET 请求获取Request-URI所标识的资源 ②POST 在Request-URI所标识的资源后附加新的数据 ③HEAD请求获取由 Request-URI 所标识的资源的响应消息报头 ④PUT请求服务器存储一个资源，并用Request-URI作为其标识 ⑤DELETE 请求服务器删除Request-URI所标识的资源 ⑥TRACE 请求服务器回送收到的请求信息，主要用于测试或诊断 ⑦CONNECT 保留将来使用 ⑧OPTIONS 请求查询服务器的性能，或者查询与资源相关的选项和需求
		消息报头
		请求正文
响应	由三部分组成，分别是：状态行、消息报头、响应正文	状态行：版本状态代码有关状态代码的文本描述	状态代码有三位数字组成，第一个数字定义了响应的类别，且有五种可能取值： 1xx：指示信息--表示请求已接收，继续处理 2xx：成功--表示请求已被成功接收、理解、接受 3xx：重定向--要完成请求必须进行更进一步的操作 4xx：客户端错误--请求有语法错误或请求无法实现 5xx：服务器端错误--服务器未能实现合法的请求
		消息报头
		响应正文

## 4.跨域

原因	协议、域名、端口中有一个或多个不同。
解决方法	①CORS	"跨域资源共享"（Cross-origin resource sharing） CORS是一个W3C标准，允许浏览器向跨源服务器发除XMLHttpRequest请求，从而克服了AJAX只能同源使用的限制。使用自定义的http头部让浏览器与服务器进行沟通，即给请求附加一个额外的Origin头部，其中包含请求页面的源信息（协议、域名、端口），以便服务器根据这个头部决定是否给予响应。实现CORS通信的关键是服务器，只要服务器实现了CORS接口，就可以跨源通信。
解决方法	②JSONP	window.callback=function(data){ console.log('data',data); },动态创建script指定src的方式加载跨域资源。

# 第八章综合应用（各种类型+步骤） ## 1.轮播图

描述	步骤	代码网址	图片
原生js实现(ul+绝对定位)太麻烦了，看看就行	①大容器ul，li中放入a标签包裹的图片。【a标签包裹图片,a标签不被图片撑起，下部有空隙，原因是line-height行高的基线baseline造成。】 ②ul大小为图片大小。（【可直接设置固定高度】【如果不设置，li采用浮动要防止ul高度塌陷，如果设置了ul为overflow:hidden，不必担心，已经开启了BFC。】【如果不设置，li采用绝对定位也要防止ul高度塌陷,BFC对它不起作用。只能通过JavaScript实现：获取到绝对定位的子元素的高度，再设置给父元素。】 ③li开启绝对定位，叠在一起，没设置层级，最下面的元素叠在最上面。 ④js修改需要显示的li的层级z-index=1。 ⑤轮播图上的圆点，div容器包裹a标签。	github