前端网络知识点总结

一、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）+端口号（可选）+文件路径+参数（可选）+片段标识符（可选，哈希值）

 1、 正确使用 HTML

和 CSS 实现以下效果（中间方框部分表示图片，右侧为文字列表。尽量不要使用 float 属性）：

a.对于该图片和文字的布局，可使用定位来解决。外层容器相对定位，里面的图片和文字列表绝对定位，就可以实现上图的效果了。

b.display: inline-block;将对象呈递为内联对象，但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内，允许空格。(准确地说，应用此特性的元素呈现为内联对象，周围元素保持在同一行，但可以设置宽度和高度地块元素的属性)

并不是所有浏览器都支持此属性，目前支持的浏览器有：Opera、Safari在IE中对内联元素使用display:inline-block，IE是不识别的，但使用display:inline-block在IE下会触发layout，从而使内联元素拥有了display:inline-block属性的表症。从上面的这个分析，也不难理解为什么IE下，对块元素设置display:inline-block属性无法实现inline-block的效果。这时块元素仅仅是被display:inline-block触发了layout，而它本就是行布局，所以触发后，块元素依然还是行布局，而不会如Opera中块元素呈递为内联对象。

IE下块元素如何实现display:inline-block的效果？

有两种方法：

1、先使用display:inline-block属性触发块元素，然后再定义display:inline，让块元素呈递为内联对象（两个display要先后放在两个CSS声明中才有效果，这是IE的一个经典bug，如果先定义了display:inline-block，然后再将display设回inline或block，layout不会消失）。代码如下（...为省略的其他属性内容）：

div {display:inline-block;...}

web前端考试知识点总结

一、HTML知识点总结

1. HTML基础知识

- HTML的基本结构

- HTML的常用标签

- HTML的元数据标签

- HTML的列表、表格、表单等相关标签

2. HTML5新增的语义化标签

- header、footer、nav、article、section、aside等

3. HTML5新增的表单元素

- input的各种类型

- 新增的表单元素如datalist、keygen等

4. HTML5新增的媒体元素

- video、audio等

5. HTML5新增的API

- 本地存储、离线应用、地理定位等

二、CSS知识点总结

1. CSS基础知识

- CSS的语法

- CSS的选择器

- CSS的样式属性

2. CSS布局

- 盒模型

- 浮动

- 定位 - 弹性盒子布局

- 栅格布局

3. CSS3新增的样式

- 边框、背景、文字、渐变、阴影等效果

- 过渡、变换、动画等

4. 响应式设计

- 媒体查询

- 移动优先

5. CSS预处理器

- SASS、LESS等

三、JavaScript知识点总结

1. JavaScript基础知识

- 数据类型

- 运算符

- 流程控制语句

2. JavaScript函数

- 函数的定义

- 作用域

- 闭包

- 高阶函数

3. JavaScript对象

- 对象的创建

- 原型链

- 对象的继承

4. DOM操作 - 节点的增删改查

- 事件处理

5. AJAX与跨域

- XMLHttpRequest对象

- 跨域访问的解决方案

6. ES6知识点

- let、const

- 箭头函数

- 解构赋值

- 1 - web前端知识点总结

随着网络的发展，Web前端技术也在迅速成长，不断推陈出新，相关技术也在不断推陈出新。近年来，Web前端技术已成为行业中许多开发人员非常重要的一部分，对于奠定网站成功的基础至关重要。

1. HTML：HTML是网页开发中使用最多的语言，它定义用户可以在Web页面中看到什么，它是用来创建网页内容的基础，它指定了页面的结构和内容。另外，它也可以在文本和图像之间建立超链接，它可以用来创建简单的图像和网站模板，如表单、报表、菜单等。

2. CSS：CSS是一种用于样式表的技术，它可以用来定义网站的外观，它可以控制文字的大小、大小和位置，以及网页的背景颜色和图像等。使用CSS，可以只需要用一行代码来改变页面中所有文字的大小、颜色和位置。

3. JavaScript：JavaScript是一种网页脚本语言，它可以用来控制网页上的动画、交互式图形和游戏等，以及可以从用户输入中取得数据，以及响应用户点击或输入的事件等。JavaScript可以使网页具有更多的复杂性，使用它可以构建网页应用。

4. AJAX：AJAX是一项技术，可以使网页的行为和交互更加的灵活，它可以让网页在不刷新的情况下更新，也可以直接从服务器向客户端传送数据，可以更灵活地处理多种数据格式，从而实现网页和后端之间的交互。

5. jQuery：jQuery是一个JavaScript库，它可以使Web开发人员更加轻松、快捷地来使用JavaScript和CSS，其中包括动画， - 2 - 事件处理，AJAX请求，DOM操作等功能，可以让开发人员减少编写JavaScript的时间，更有效地开发Web应用。

6.架：在Web前端开发中，框架是一种工具，允许开发人员快速创建Web应用。框架有利于代码重用，包含模块和类，可以显著提高前端开发效率。有许多不同的Web前端框架，根据不同的开发需求可以选择合适的框架。