web知识学习（六）

标签：ports   user   rac   数字   amd   react   测试   分析   format   

一.HTTP METHOD
GET方法请求一个指定资源的表示形式. 使用GET的请求应该只被用于获取数据.
HEAD方法请求一个与GET请求的响应相同的响应，但没有响应体.
POST方法用于将实体提交到指定的资源，通常导致在服务器上的状态变化或副作用.
PUT方法用请求有效载荷替换目标资源的所有当前表示。
DELETE方法删除指定的资源。
CONNECT方法建立一个到由目标资源标识的服务器的隧道。
OPTIONS方法用于描述目标资源的通信选项。
TRACE方法沿着到目标资源的路径执行一个消息环回测试。
PATCH方法用于对资源应用部分修改。

二.HTTP 请求/响应报文结构
请求报文和响应报文都是由以下4部分组成：
1.请求行/响应行
2.请求头/响应头
3.空行
4.消息主体（请求体/响应体）
1)请求报文：
  1.请求行：格式为：Method Request-URI HTTP-Version 结尾符
  2.请求头：
  a.通用头
  date、connection、cache-control等信息
  b.请求头
  请求报头通知服务器【关于客户端请求的信息】：
  Host、User-Agent(浏览器类型、操作系统等信息)
  Accept：客户端可识别的内容类型列表，用于指定客户端接收那些类型的信息
  Accept-Encoding：客户端可识别的数据编码
  Accept-Language：表示浏览器所支持的语言类型
  Connection：允许客户端和服务器指定与请求/响应连接有关的选项，例如这是为Keep-Alive则表示保持连接。
  Transfer-Encoding：告知接收端为了保证报文的可靠传输，对报文采用了什么编码方式。
  c.实体头
  实体报头用来定义被传送资源的信息。请求和响应消息都可以传送一个实体，常见的实体报头为：
  Content-Type：发送给接收者的实体正文的媒体类型。常见的content-type类型如下：
（text/html ： HTML格式、text/plain ：纯文本格式、multipart/form-data、application/json： JSON数据格式等）
  参考链接：https://www.runoob.com/http/http-content-type.html
  Content-Lenght：实体正文的长度
  Content-Language：描述资源所用的自然语言，没有设置则该选项则认为实体内容将提供给所有的语言阅读
  Content-Encoding：实体报头被用作媒体类型的修饰符
  它的值指示了已经被应用到实体正文的附加内容的编码，因而要获得Content-Type报头域中所引用的媒体类型，必须采用相应的解码机制。
  Last-Modified：实体报头用于指示资源的最后修改日期和时间
  Expires：实体报头给出响应过期的日期和时间
  3.空行：http协议规定的格式，一般采用

  4.消息主体
  一般用于http的post方法，通过实体报头Content-Type规定消息主体的格式内容。
2)响应报文：
  1.响应行
  响应行一般【由协议版本、状态码及其描述组成 】比如 HTTP/1.1 200 OK
  2.响应头：
【用于服务器传递自身信息的响应】，常见的响应报头：
  Allow：服务器支持哪些请求方法(如GET、POST等)。
  Location：用于重定向接受者到一个新的位置，常用在更换域名的时候
  Server：包含可服务器用来处理请求的系统信息，与User-Agent请求报头是相对应的
  Transfer-Encoding：告诉浏览器数据的传送格式。
  Refresh：告诉浏览器隔多久刷新一次，以秒计。
  Set-Cookie：设置和页面关联的Cookie。
  Access-Control-Allow-Origin：指定哪些站点可以参与跨站资源共享。
  Age：对象在代理缓存中暂存的秒数。
  3.空行
  4.消息主体

三.常见的HTTP状态码
200 - 请求成功
204 - 服务器处理成功，但为返回内容
301 - 资源（网页等）被永久转移到其它URL
304 - 资源未修改，不返回任何资源，一般和缓存有关
404 - 请求的资源（网页等）不存在
500 - 内部服务器错误
HTTP状态码由三个十进制数字组成，第一个十进制数字定义了状态码的类型，HTTP状态码共分为5种类型：
①1** 信息，服务器收到请求，需要请求者继续执行操作；
②2** 成功，操作被成功接收并处理；
③3** 重定向，需要进一步的操作以完成请求；
④4** 客户端错误，请求包含语法错误或无法完成请求；
⑤5** 服务器错误，服务器在处理请求的过程中发生了错误。

四.网站的安全防护
【预防XXS CSRF SQL注入攻击 DDOS攻击】。
1.【XXS】：参考链接：https://www.jianshu.com/p/42173ea05ae4
XSS又叫CSS (Cross Site Script) ，跨站脚本攻击。
它指是恶意攻击者往Web页面里插入恶意html代码。
当用户浏览该页时，嵌入Web里面的html代码会被执行，从而达到恶意用户的特殊目的。
【防御方式：关键的cookie 设置为httpOnly、输入检查、特殊字符/&.进行转移存储。】
2.【CSRF】:参考链接：
CSRF攻击的全称是跨站请求伪造（ cross site request forgery)
CSRF攻击：攻击者盗用了你的身份，以你的名义向第三方网站发送恶意请求。
CRSF能做的事情包括利用你的身份发邮件、发短信、进行交易转账等，甚至盗取你的账号。
防御方式：
1、尽量使用POST，限制GET
2、将cookie设置为HttpOnly
3、请求增加token
4、通过Referer识别
5、使用验证码等
3.【sql注入】
通过参数化查询、词法分析等
4.【DDOS】: 参考链接：https://www.jianshu.com/p/e7a5fdc67b8f
全称Distributed Denial of Service.
中文意思为“分布式拒绝服务”，就是利用大量合法的分布式服务器对目标发送请求，从而导致正常合法用户无法获得服务
资源消耗类攻击服务消耗性攻击等导致：系统应用：阻塞和耗尽
防御方式：
1.资源隔离：通过对数据源的认证，过滤伪造源数据包或发功攻击的攻击，保护服务端不受恶意连接的侵蚀。
2.用户规则
3.大数据智能分析：
黑客为了构造大量的数据流，往往需要通过特定的工具来构造请求数据，这些数据包不具有正常用户的一些行为和特征。
为了对抗这种攻击，可以基于对海量数据进行分析，进而对合法用户进行模型化，并利用这些指纹特征，
如：Http模型特征、数据来源、请求源等，有效地对请求源进行白名单过滤，从而实现对DDoS流量的精确清洗。
4.资源对抗：即通过大量服务器和带宽资源的堆砌达到从容应对DDoS流量的效果

五.前端工程化理解
1.开发规范
2.模块化开发
3.组件化开发
4.性能优化
5.项目部署
6.开发工具

六.AMD、CMD、CommonJs、ES6的对比
1）AMD-【异步模块定义】
AMD是RequireJS在推广过程中对模块定义的规范化产出，它是一个概念，RequireJS是对这个概念的实现。
RequireJS：是一个AMD框架
2）CMD---是SeaJS在推广过程中对模块定义的规范化产出，是一个【同步模块定义】，是SeaJS的一个标准，
SeaJS是CMD概念的一个实现，SeaJS是淘宝团队提供的一个模块开发的js框架.
3）CommonJS规范---是通【过module.exports定义】的，在前端浏览器里面并不支持module.exports,通过node.js后端使用的。
Nodejs端是使用CommonJS规范的，前端浏览器一般使用AMD、CMD、ES6等定义模块化开发的
4）ES6特性，模块化---export/import对模块进行导出导入的

七.MVC、MVVM
1.MVC是Model-View- Controller的简写。即模型-视图-控制器。
2.MVVM即Model-View-ViewModel的简写。即模型-视图-视图模型。
数据绑定。DOM 事件监听。

八.样式布局和BFC
1.BFC 全称为 块格式化上下文 (Block Formatting Context) 是formaating context中的布局格式。
【BFC布局就是被标识为BFC的页面独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。】
包括浮动，和外边距合并等等，因此，有了这个特性，我们布局的时候就不会出现意外情况了。
2.Formatting context 是 W3C CSS2.1 规范中的一个概念。
【它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。】
最常见的 Formatting context 有 Block fomatting context (简称BFC)和 Inline formatting context (简称IFC)。
3.【Box：css布局的基本单位】：盒子的类型 block-level box、inline-level box、run-in box
4.BFC布局规则：
内部的Box会在垂直方向，一个接一个地放置。
Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠。
每个盒子（块盒与行盒）的margin box的左边，与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
BFC的区域不会与float box重叠。
BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
计算BFC的高度时，浮动元素也参与计算。
5.让元素如何使用BFC布局：
 1、float的值不是none。
 2、position的值不是static或者relative。
 3、display的值是inline-block、table-cell、flex、table-caption或者inline-flex
 4、overflow的值不是visible
6.BFC的作用
 1、利用BFC避免margin重叠。
 2、自适应两栏布局
 3、清除浮动
参考链接：https://blog.csdn.net/sinat_36422236/article/details/88763187

九.网页如何支持多语言？
1.采用统一编码UTF-8方式编码
1- 应用字符集的选择；所以对提供了多语言版本的网站来说，Unicode字符集应该是最理想的选择。
2- 语言书写习惯&导航结构 ；
3- 数据库驱动型网站 ；
4- 语言、编码、等系统级设置。

十.学习一门新语言
1.历史、背景、用途、特点、现状、发展
2.搭建开发环境，编写helloWord
3.学习语言基本知识
4.第三方库、组件、框架
5.项目开发

十一.HASH表、sql语句的分类、静态网页和动态网页区别？
1.散列表（Hash table，也叫哈希表），是根据关键码值(Key value)而直接进行访问的数据结构。
2.sql语句的分类：DDL数据定义语句 DCL数据控制语句 DML操作语句 DQL 查询语句
3.静态：任何时间任何人访问无变化。动态：不同时间不同人，访问页面不一样。

十二.页面布局类型？（参考链接：https://www.cnblogs.com/yanayana/p/7066948.html）
1.静态布局（Static Layout）
即传统Web设计，网页上的所有元素的尺寸一律使用px作为单位。
2.流式布局（Liquid Layout）
流式布局（Liquid）的特点（也叫"Fluid") 是页面元素的宽度按照屏幕分辨率进行适配调整，但整体布局不变。
代表作栅栏系统（网格系统）。
3.自适应布局（Adaptive Layout）
自适应布局的特点是分别为不同的屏幕分辨率定义布局，即创建多个静态布局，每个静态布局对应一个屏幕分辨率范围。
4.响应式布局（Responsive Layout）
随着CSS3出现了媒体查询技术@media，又出现了响应式设计的概念。
响应式设计的目标是确保一个页面在所有终端上（各种尺寸的PC、手机、手表、冰箱的Web浏览器等等）都能显示出令人满意的效果。
对CSS编写者而言，在实现上不拘泥于具体手法，但通常是糅合了流式布局+弹性布局，再搭配媒体查询技术使用。
——分别为不同的屏幕分辨率定义布局，同时，在每个布局中，应用流式布局的理念，即页面元素宽度随着窗口调整而自动适配。
即：【创建多个流体式布局，分别对应一个屏幕分辨率范围。可以把响应式布局看作是流式布局和自适应布局设计理念的融合。】
【响应式几乎已经成为优秀页面布局的标准。】

@media only screen and (max-width: 800px) {
    .gridmenu {
        width:80%;
    }

    .gridmain {
        width:70%;
    }

    .gridright {
        width:60%;
    }
}

5.弹性布局（rem/em布局）
弹性布局(flex container)，页面中任何一个元素只要设置了display:flex属性，那么当前盒子都称为弹性盒子。
弹性盒子默认有两条轴: 默认水平显示的主轴 和 始终要垂直于主轴的侧轴(也叫交叉轴)，在弹性盒子中所有的子元素都是沿着主轴方向显示。

十三.H5新特性和CSS3新特性？
H5的新特性：
1. 用于绘画 canvas 元素。
2. 用于媒介回放的 video 和 audio 元素。
3. 本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失；sessionStorage 的数据在浏览器关闭后自动删除。
4. 语意化更好的内容元素，比如 article、footer、header、nav、section。
5. 表单控件，calendar、date、time、email、url、search。
css3的新特征:
1.选择器。
2.和透明度。
3. 多栏布局。
4. 多背景图。
5.Word Wrap。
6. 文字阴影。
7.@font-face属性。
8.圆角(边框半径)。
9.边框图片。
10.盒阴影。
11. 盒子大小。
12. 媒体查询。
13.语音。

十四.什么是typeScript？
TypeScript是一种由微软开发的开源、跨平台的编程语言。它是JavaScript的超集，最终会被编译为JavaScript代码。

十五.三大框架区别？

十六.SPA、MPA是什么？
SPA单页面应用
MPA多页面应用

十七.模块化、组件化编程思想
编程的复用性考虑如：vue中的module.export各种组件等。

参考链接： https://www.cnblogs.com/chengkanghua/p/11314245.html;
参考链接： https://www.cnblogs.com/lalong/p/9335986.html;
参考链接： https://blog.csdn.net/tangxiujiang/article/details/81104174;

web知识学习（六）

标签：ports   user   rac   数字   amd   react   测试   分析   format   

原文地址：https://www.cnblogs.com/duiyuedangge/p/14401759.html