前端知识点总结书籍

前端网络知识点总结

一、HTTP协议

1、什么是TCP/IP协议

不同的硬件、操作系统之间进行通信，需要一种规则，我们把这种规则称做协议，网络传输的各个阶段有不同的协议，这些协议的集合总称为TCP/IP协议。http协议是TCP/IP协议的子集。

2、TCP/IP分层及各层的作用？

分为四层：应用层、传输层、网络层、链路层。

应用层：http协议属于这一层，在这一层根据http协议生成针对目标服务器的http请求报文，服务器端根据http解析报文。

传输层：TCP协议属于这一层，在这一层将根据TCP协议将http的请求报文分割成报文段，在服务器端会根据TCP协议合并报文段。建立和断开TCP连接的过程就是三次握手，四次挥手。

网络层：IP协议属于这一层，网络层的作用是确定数据传输的路线。根据IP协议搜索对方地址，并一边中转一边传送。IP地址指明了节点被分配的地址，MAC地址是网卡所属的固定地址，IP地址可以变，MAC一般不变。整个中转的过程像是送快递，用户把数据送到快递站，快递公司再送到一个个大型中转站。

链路层：网络传输过程中的硬件部分。 过程：客户端发出请求->应用层发送http请求报文->传输层建立TCP连接，将报文分成报文段->网络层根据请求的ip地址，进行处理并加上MAC地址后交给链路层->链路层将数据送到请求的ip地址->请求ip的服务器根据IP,TCP,HTTP协议对数据进行拼接等处理->服务器收到请求。

3、DNS是什么？

DNS是和http一样位于应用层的协议，用于解析域名，DNS协议提供通过域名查找IP地址或者IP地址反查域名的服务。

4、URI和URL的区别

URI是统一资源标识符，URL是统一资源定位符，URL是URI的子集。

URI格式：协议名/方案名+登录信息（可选）+服务器地址（网址或ip）+端口号（可选）+文件路径+参数（可选）+片段标识符（可选，哈希值）

HTML知识总结

常用标签 文本类 span 行级元素，多个同行

div 块级元素，独占一行

p 块级元素，前后保留一行

h 标题标签，h1~h6表6个等级，加粗，前后保留一行

图片标签 img width：设置宽度

height：设置高度

alt：图片加载失败显示的文本

水平线 hr color：颜色

size：高度（粗细）

width：宽度（长度）

超链接 a herf：超链接转到的地址

target _self:默认值，在当前页面打开

_blank:在新窗口打开

带标题的框 fieldset legend 设置标题

列表标签 无序列表 ul disc：实心圆

square：小方块

circle：空心圆 有序列表 ol 表格标签

th 表示标题单元格，居中、加粗

td 表示一个单元格

caption 表示标题，定义在第一行，居中

rowspan 设置单元格占的行数

colspan 设置单元格占的列数

表单项

method get：显示提交参数，将参数用?和&拼接到url上带到服务器端

post：隐式提交参数

下拉菜单

optgroup 表示分组,分组不能选,只能选分组中的option

selected默认选中

multiple 设置下拉菜单为多选模式

文本域

「资深前端工程师总结」前端面试知识点大全—CSS篇

1、css的display：none和visibility:hidden区别

display:none使用后，元素的宽度，高度都会丢失，视为不存在不加载；元素原来占据的空间位置不保留；产生回流和重绘；

visibility:hidden:视觉上的不可见，但是保留占据的空间，还具有宽度和高度；

2、box-sizing ： content-box || border-box || inherit

content-box：border和padding不计算入width之内;

padding-box：padding计算入width内;

border-box：border和padding计算入width之内，其实就是怪异模式了;

当为border-box,则让元素维持在了IE传统模式下的怪异模式，即，设置的元素的width和height都是包括元素的宽度和padding和border。可以运用到布局（因为当其内元素和父元素宽度相等时没有问题但是只要加了一点padding和margin整个布局就崩溃了）和表单元素（表单中除了checkbox和radio外默认都是2px的border）上。

3、浏览器渲染

DOM:浏览器将HTML解析成树形结构，即DOM。

CSSOM:将css解析成树形结构，即CSSOM。

Render Tree:DOM 和 CSSDOM合并后生成Render Tree。

Layout：计算Render Tree每个节点的具体位置。

Painting：将layout后的节点内容呈现在屏幕上；

遇到外部的css文件和图片，浏览器会另外发出一个请求，来获取css文件和相应的图片，这个请求是异步的，并不会影响html文件。如果遇到javascript文件，html文件会挂起渲染的线程，等待javascript加载完毕后，html文件再继续渲染。

Web前端开发培训中es5与es6语法知识点总结（百读易莱胜）

热点：web前端开发培训

百读易莱胜官网

前端开发

易莱胜官网

#es6的写法：

1.利用import...form....代替require（）

方式一：导入一个js模块并且要接收一个对象

require写法： var calc = require(" calc.js ")

import写法： import calc form "calc.js"

方式二： 导入一个css文件，不接收对象

require写法： require("site.css")

import写法：import "site.css"

2. 对象的写法

导出一个模块对象es5的写法：

module.exports = {

add:add,

substrict:substrict

}

导出一个模块对象es6的写法：

module.exports = {

add,

substrict

}

注意：这种写法必须是属性名和属性值变量是同一个，否则要分开写

module.exports = {

addFn：add,

substrict

}

一个对象中方法的写法

导出一个模块对象es5的写法：

module.exports = {

addFun:function(x,y){

return x+ y;