一、html

<a></a>标签全部作用
元素种类的划分
媒体查询
H5的语义化作用及语义化标签
Web Worker和Web Socket
SEO的概念及实现
HTML5的新特性

什么是DOCTYPE？

DOCTYPE是html5标准网页声明，且必须声明在HTML文档的第一行。来告知浏览器的解析器用什么文档标准解析这个文档。

文档解析类型有：

• BackCompat：怪异模式，浏览器使用自己的怪异模式解析渲染页面。（如果没有声明DOCTYPE，默认就是这个模式）
• CSS1Compat：标准模式，浏览器使用W3C的标准解析渲染页面。

HTML5新特性

1 新增的标签

有结构标签<header>、<sesson>、<article>、<footer>、<aside>、<nav>、
表单标签<form>、input 新增的属性有email url datetime rang	 number search
媒体标签<video>、<audio>、<embed>（定义外部的可交互的内容或插件，用来嵌入内容（包括各种媒体）。）
<canvas>:画板（位图。放大会失帧，常用作绘画走势图、简单的图样）
<svg>:画板（矢量图，放大不失帧，常用作绘画地图、logo）

2 删除的标签

<font></font>           //规定文本的字体、字体尺寸、字体颜色。
<comment></comment>     //注释标签
<context></context>
<center></center>       //将 HTML 网页中的文本进行水平居中处理：
<basefont />            //规定页面上的默认字体颜色和字号
<big></big>             //标签呈现大号字体效果。
<frame />               //标签定义 frameset 中的一个特定的窗口（框架）。
<frameset></frameset>   //标签定义一个框架集
<noframes></noframes>   // 元素可为那些不支持框架的浏览器显示文本

3 新增的属性

placeholder :占位符,当用户输入的时候,里面的文字消失

<input type="text" placeholder="请输入用户名">

autofocus:规定当页面加载时 input 元素应该自动获得焦点 用法:

<input type="text" placeholder="请输入用户名" autofocus="autofocus" />

multiple:多文件上传 用法：

<input type="file" multiple="multiple" />

required:input框为必填项，内容不能为空。 用法：

<input type="text" required="required">

html元素分类

块级元素

内联元素

可变元素

块级元素是什么？

块状元素在网页中就是以块的形式显示，所谓块状就是元素显示为矩形区域

块级元素有哪些

address - 地址，blockquote - 块引用， cente - 举中对齐块，  dir - 目录列表，div- 常用块级容易，也是css layout的主要标签，  dl - 定义列表， fieldset - form控制组 ，form- 交互表单，  h1 - 大标题， h2 - 副标题，  h3 - 3级标题，  h4 - 4级标题，  h5 - 5级标题，  h6 - 6级标题，  hr - 水平分隔线，  isindex - input prompt， menu - 菜单列表， noframes - frames可选内容，（对于不支持frame的浏览器显示此区块内容， noscript - 可选脚本内容（对于不支持script的浏览器显示此内容），ol - 排序表单，p - 段落， pr - 格式化文本（会保留空格和换行符）， table - 表格， ul - 非排序列表

特性： 默认占一行，两个块级元素不会并列占一行。元素从上往下顺序排序

内联元素（行内元素

特性：在一行内逐个显示
内联元素没有自己的形状，不能定义它的宽和高,input是个例外，可以独立设置宽/高.它显示的宽度、高度只能根据内联元素所包含内容的高度和宽度来确定，宽度就是它的文字或图片的宽度，不可改变。它的最小内容单元也会呈现矩形形状；如果需要设置高度，可以通过行高line-height撑起来。

有： img - 图片， a - 锚点， abbr - 缩写， acronym - 首字，b - 粗体(不推荐)，bdo - bidi override， big - 大字体， br - 换行， cite，dfn - 定义字段， em - 强调， font - 字体设定(不推荐)，i - 斜体， input - 输入框， kbd - 定义键盘文本， label - 表格标签， q - 短引用，s - 中划线(不推荐)，samp - 定义范例计算机代码 ，select - 项目选择， small - 小字体文本，span - 常用内联容器，定义文本内区块， strike - 中划线， strong - 粗体强调，sub - 下标， sup - 上标， textarea - 多行文本输入框，tt - 电传文本 ，u - 下划线， var - 定义变量

总结： 行内元素在一行中排列显示，内联元素的宽度是靠里面包含的内容撑开的，本身宽度不可改变，可以用line-height来设置高度

可变元素

可变元素为根据上下文语境决定该元素为块元素或者内联元素

根据上下文？？？怎么根据，谁来判断根据的？

元素

 applet - java applet。 button - 按钮，del - 删除文本， iframe - inline frame，ins - 插入的文本，map - 图片区块(map)， object - object对象， script - 客户端脚本

题1

块级标签可不可以嵌套在内联标签里面？

考察内联标签与块级标签的嵌套规则
（1）块级元素可以包含内联元素或某些块级元素，但内联元素不能包含块级元素，它只能包含其它内联元素。

（2）块级元素不能放在p里面。

（3）有几个特殊的块级元素只能包含内联元素，不能包含块级元素。如h1,h2,h3,h4,h5,h6,p,dt

（4）li内可以包含div

（5）块级元素与块级元素并列、内联元素与内联元素并列。

　1. 块元素可以包含内联元素或某些块元素，但内联元素却不能包含块元素，它只能包含其它的内联元素：
　<div><h1></h1><p></p></div> —— 对 
　　<a href=”#”><span></span></a> —— 对 
　　<span><div></div></span> —— 错 
　　2. 块级元素不能放在<p>里面：(p也是块级元素，所以是特殊情况) 
　　<p><ol><li></li></ol></p> —— 错 

　　<p><div></div></p> —— 错 

	<p><h1></h1></p>——错
	块级元素不能包括内敛标签的特殊元素有
	有几个特殊的块级元素只能包含内嵌元素，不能再包含块级元素，这几个特殊的标签是： 
　　h1、h2、h3、h4、h5、h6、p、dt 

html语义化理解

语义化标签有

header nav p article section aside footer

HTML语义化就是让页面内容结构化，它有如下优点

1、易于用户阅读，样式丢失的时候能让页面呈现清晰的结构。
2、有利于SEO（搜索引擎优化），搜索引擎根据标签来确定上下文和各个关键字的权重。
3、方便其他设备解析，如盲人阅读器根据语义渲染网页
4、有利于开发和维护，语义化更具可读性，代码更好维护，与CSS3关系更和谐

SEO性能优化

seo是啥

搜索引擎化

html5哪些标签可以做SEO优化？

title

合理的title

怎么为合理怎么为不合理？

title强调重点，关键词不要重复出现超过两次，尽量靠前。description概括页面内容，长度合适。keyword列举重要关键词。

语义化的html标签，让搜索引擎更容易理解页面

header、footer、nav、article、aside

重要内容HTML代码放在最前：

搜索引擎抓取HTML顺序是从上到下，有的搜索引擎对抓取长度有限制，保证重要内容一定会被抓取

重要内容不要用js输出：爬虫不会执行js获取内容。少用iframe：搜索引擎不会抓取iframe中的内容

非装饰性图片必须加alt。

alt是img的特有属性，是图片内容的等价描述，用于图片无法加载时显示、读屏器阅读图片。可提高图片可访问性，除了纯装饰图片外都必须设置有意义的值，搜索引擎会重点分析。

二、html DOM

document的对象

集合	描述
all	提供对文档中所有 HTML 元素的访问。
anchors	返回对文档中所有 Anchor 对象的引用。
applets	返回对文档中所有 Applet 对象的引用。
forms	返回对文档中所有 Form 对象引用。
images	返回对文档中所有 Image 对象引用。
links	返回对文档中所有 Area 和 Link 对象引用。

document 对象属性

属性	描述
body	提供对 元素的直接访问。对于定义了框架集的文档，该属性引用最外层的 。
cookie	设置或返回与当前文档有关的所有 cookie。
domain	返回当前文档的域名。
lastModified	返回文档被最后修改的日期和时间。
referrer	返回载入当前文档的文档的 URL。
title	返回当前文档的标题。
URL	返回当前文档的 URL。

document.domain
// "www.w3school.com.cn"

document 对象的方法

方法	描述
close()	关闭用 document.open() 方法打开的输出流，并显示选定的数据。
getElementById(‘id’)	返回对拥有指定 id 的第一个对象的引用。
getElementsByName(’类名‘)	返回带有指定名称的对象集合。
getElementsByTagName(’标签名‘)	返回带有指定标签名的对象集合。
open()	打开一个流，以收集来自任何 document.write() 或 document.writeln() 方法的输出。
write()	向文档写 HTML 表达式 或 JavaScript 代码。
writeln()	等同于 write() 方法，不同的是在每个表达式之后写一个换行符。

打开并写入一个文档

open（）语法document.open(mimetype,replace)

mimetype 规定正在写的文档的类型。默认值是 “text/html”。

replace 当此参数设置后，可引起新文档从父文档继承历史条目

该方法将擦除当前 HTML 文档的内容，开始一个新的文档，新文档用 write() 方法或 writeln() 方法编写。

setTimeout(function c()
  {
  var newDoc=document.open("text/html","replace");
  var txt="<html><body>学习 DOM 非常有趣！</body></html>";
  newDoc.write(txt);
  记得关闭close()
  newDoc.close();
  },0)

dom element 元素对象

在 HTML DOM （文档对象模型）中，每个部分都是节点：

• 文档本身是文档节点
• 所有 HTML 元素是元素节点
• 所有 HTML 属性是属性节点
• HTML 元素内的文本是文本节点
• 注释是注释节点

在 HTML DOM 中，Element 对象表示 HTML 元素。

Element 对象可以拥有类型为元素节点、文本节点、注释节点的子节点。

NodeList 对象表示节点列表，比如 HTML 元素的子节点集合。

元素也可以拥有属性。属性是属性节点

element对象 （html的元素）的属性和方法

1 appendChild() 方法

作用

appendChild() 方法向节点添加最后一个子节点。

语法

document.getElementById("myList").appendChild(newListItem);

实例

// html
<ul id="myList"><li>Coffee</li><li>Tea</li></ul>
// js
function appendChild() {
 // 创建节点
 var node = document.createElement('li')
 var textNode = document.createElement('water')
 node.appenChild(textNode)
 document.getElementById('myList').appendchild(node)
}

2 attributes 属性

作用

attributes 属性返回指定节点的属性集合

语法

node.attributes

3 getAttribute() 方法

getAttribute() 方法返回指定属性名的属性值。

4 innerHTML 属性

定义和用法

innerHTML 属性设置或返回元素的 inner HTML。

语法

HTMLElementObject.innerHTML=text

实例

<a id="myAnchor" href="http://www.microsoft.com">微软</a>

function changeLink()
{
document.getElementById('myAnchor').innerHTML="W3School";
document.getElementById('myAnchor').href="http://www.w3school.com.cn";
document.getElementById('myAnchor').target="_blank";
}

DOM 事件对象

dom事件是什么

HTML DOM 事件允许Javascript在HTML文档元素中注册不同事件处理程序。

事件通常与函数结合使用，函数不会在事件发生前被执行！ (如用户点击按钮)。

详情：w

https://www.runoob.com/jsref/dom-obj-event.html

三、browser 浏览器

浏览器对象

1、 屏幕screen 对象

screen包括客户端显示屏幕的所有信息

availHeight 属性声明了显示浏览器的屏幕的可用高度，以像素计为单位。在 Windows 这样的操作系统中，这个可用高度不包括分配给半永久特性（如屏幕底部的任务栏）的垂直空间。

console.log(screen.availHeight)
// 824

availWidth 属性声明了显示浏览器的屏幕的可用宽度，以像素计。

console.log(screen.availWidth)
//  1536

height 属性声明了显示浏览器的屏幕的高度，以像素计。

screen.height
864
screen.availHeight
824

width 属性声明了显示浏览器的屏幕的宽度，以像素计。

screen.width

1536
screen.availWidth
1536

2、 History 对象

History 对象包含用户（在浏览器窗口中）访问过的 URL。

length属性

console.log(history)
//  History {length: 4, scrollRestoration: "auto", state: null}
// length属性     返回当前页面的历史浏览列表的长度

back()方法

back() 方法可加载历史列表中的前一个 URL（如果存在（所以在回退的时候要判定能否回退））。

调用该方法的效果等价于点击后退按钮或调用 history.go(-1)。

function goback () {
	window.history.back()
}

forward()方法

forward() 方法可加载历史列表中的下一个 URL。

调用该方法的效果等价于点击前进按钮或调用 history.go(1)。

function goForward(){
    window.history.forward()
}

go()方法

go() 方法可加载历史列表中的某个具体的页面。

该参数可以是数字，使用的是要访问的 URL 在 History 的 URL 列表中的相对位置。（-1上一个页面，1前进一个页面)。或一个字符串，字符串必须是局部或完整的URL，该函数会去匹配字符串的第一个URL。

function goBack(){
    window.history.go(-2)
}

3 、location对象

Location 对象包含有关当前 URL 的信息。

Location 对象是 window 对象的一部分，可通过 window.Location 属性对其进行访问。

console.log(window.location)
/* Location {
	hash: ""// hash 属性是一个可读可写的字符串，该字符串是 URL 的锚部分（从 # 号开始的部分）。
	host: "www.runoob.com"// 返回一个URL的主机名和端口
	hostname: "www.runoob.com"
	href: "https://www.runoob.com/jsref/obj-location.html"// 返回完整的URL
	origin: "https://www.runoob.com"
	pathname: "/jsref/obj-location.html"// 返回的URL路径名。
	port: "" // 返回一个URL服务器使用的端口号
	protocol: "https:" //	返回一个URL协议
	search: "" //search 属性是一个可读可写的字符串，可设置或返回当前 URL 的查询部分
	// （问号 ? 之后的部分）。
	…}
*/

4 、存储对象

Web 存储 API 提供了 sessionStorage （会话存储） 和 localStorage（本地存储）两个存储对象来对网页的数据进行添加、删除、修改、查询操作。

• localStorage 用于长久保存整个网站的数据，保存的数据没有过期时间，直到手动去除。
• sessionStorage 用于临时保存同一窗口(或标签页)的数据，在关闭窗口或标签页之后将会删除这些数据。

localStorage

sessionStorage

常见的浏览器内核

• Trident内核：IE,MaxThon,TT,The Word,360,搜狗浏览器等。
• Gecko内核：Netscape6及以上版本，FF,MozillaSuite/SeaMonkey等；
• Presto内核：Opera7及以上。[现为：Blink]
• Webkit内核：Safari,Chrome等。[Chrome的:Blink(Webkit的分支)]

主要分成两部分：渲染引擎和JS引擎。

• 渲染引擎：将代码转换成页面。负责取得网页的内容（HTML、XML、图像等等）、整理讯息（例如加入CSS等）、以及计算网页的显示方式，然后会输出至显示器或打印机。浏览器的内核的不同对于网页的语法解释会有不同，所以渲染的效果也不相同。所有网页浏览器、电子邮件客户端以及其他需要编辑、显示网络内容的应用程序都需要内核。
• JS引擎：解析和执行javascript来实现网页的动态效果。

默认样式

是什么 为什么要重置浏览器的默认样式？

浏览器的自带样式，因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对CSS初始化往往会出现浏览器之间的页面显示差异。

缺点：对seo有影响。 ？？

浏览器加载完一个页面之后

1、转换
2、令牌化
3、词法分析
4、DOM树构建
5、CSSOM树构建
6、DOM树与CSSOM树合并后形成渲染树
7、通过布局计算每个对象显示的位置和大小
8、绘制页面

按照上面的流程，浏览器会查看文档当中是否有“用户样式”，如果没有就使用浏览器的默认样式，如果有就会用“用户样式”，就使用用户样式覆盖“浏览器默认样式”进行后面的渲染

阻止默认事件

使用event.preventDefault()可以取消默认事件w3c的方法是e.preventDefault()，IE则是使用e.returnValue = false;

阻止冒泡和捕获事件

js冒泡和捕获是事件的两种行为，使用event.stopPropagation()起到阻止捕获和冒泡阶段中当前事件的进一步传播。w3c的方法是e.stopPropagation()，IE则是使用e.cancelBubble = true

stopPropagation也是事件对象(Event)的一个方法，作用是阻止目标元素的冒泡事件，但是会不阻止默认行为。

四、css

1、<a></a>标签全部作用

2、用CSS画三角形

用border

.div{
	width: 0;
	height:0;
	border-left: 100px solid transparent;// transparent 相当于rgba(0,0,0,0)
	border-right: 100px solid transparent;
	border-top: 100px solid transparent;
	border-bottom: 100px solid blue;
	或者border: 100px solid transparent;
	border-bottom :100px solid blude
	
}

3、scope的作用

原理是：我们会发现在添加scoped之后，vue其实在背后做的操作是使得你的css样式添加了一个类似于 [data-v-76b126]的唯一标识，这样每个vue文件对应一个唯一标示，不同vue组件之间的样式就不会污染。

4、水平垂直居中（方案及比较）

对于宽高固定的元素

（1）我们可以利用margin:0 auto来实现元素的水平居中。

（2）利用绝对定位（absolved)，设置四个方向的值都为0，并将margin设置为auto，由于宽高固定，因此对应方向实现平分，可以实现水平和垂直方向上的居中。

（3）利用绝对定位，先将元素的左上角通过top:50%和left:50%定位到页面的中心，然后再通过margin负值来调整元素的中心点到页面的中心。

（4）利用绝对定位，先将元素的左上角通过top:50%和left:50%定位到页面的中心，然后再通过translate来调整元素的中心点到页面的中心。

（5）使用flex布局，通过align-items:center和justify-content:center设置容器的垂直和水平方向上为居中对
齐，然后它的子元素也可以实现垂直和水平的居中。

对于宽高不定的元素，上面的后面两种方法，可以实现元素的垂直和水平的居中。

1.定位position

子绝对定位 父相对定位。

​ 优缺点： 可以在webkit内核的浏览器中使用 ie9以下不可使用transform

 <div class="father">
            <div class="son"></div>
         </div>
         
.father {
            position: relative;
            width: 200px;
            height: 200px;
            background: skyblue;
        }
        .son {
            position: absolute;
            top: 50%;
            left: 50%;
            当使用：top: 50%;left: 50%;， 是以左上角为原点，故不处于中心位置，
            transform: translate(-50%,-50%);
             translate(-50%,-50%) 作用是，往上（x轴）,左（y轴）移动自身长宽的 50%，以使其居于中心位置。
            width: 100px;
            height: 100px;
            background: red;
            
        }

2.flex布局

优点：简单 快捷
缺点：兼容不好（不兼容ie10以下）

     <div class="father">
            <div class="son"></div>
        </div>
 .father {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 200px;
            height: 200px;
            background: skyblue;
        }
        .son {
            width: 100px;
            height: 100px;
            background: red;
        }

3.table布局 table-cell+vertical-align

优点：兼容到 IE8，可以和 flex 配合使用; CSS 的table属性布局更灵活，可以满足复杂的网页设计

缺点：不够语义化化，对搜索引擎不够友好，在不同浏览器呈现不一样

需要设置父元素为display:table-cell,利用vertical和text-align可以让所有的行内块级元素水平垂直居中
给子元素设置 display: inline-block

  .father {
            display: table-cell;
            width: 200px;
            height: 200px;
            background: skyblue;
            vertical-align: middle; // 垂直居中
            text-align: center; // 水平居中
        }
        .son {
            display: inline-block;
            
            background: red;
        }

4.grid布局

优点：grid 是二维网格布局，每个网格都是一个容器

缺点：grid 兼容性不是很好，不兼容 IE9(包括IE9)、QQ浏览器、百度浏览器和低版本的浏览器

        .father {
            display: grid;
            align-items:center;
            justify-content: center;
            width: 200px;
            height: 200px;
            background: skyblue;

        }
        .son {
            width: 10px;
            height: 10px;
            border: 1px solid red
        }

\5. 元素种类的划分

\6. 盒子模型及其理解

5、position定位方式及其区别（文档流）

static

默认方式，按正常的文档流top left bottom right这几个偏移属性还有z-index无效。不会影响其静态定位的正常显示

relative

relative是保留原来位置，不脱离文档流，相对于其元素本身所在正常位置进行定位。经常与z-index属性进行层次分级

absolute

absolute脱离文档流，是整个元素的左上角（含margin）相对于最近的、非static定位的父元素的padding外边界或者说border定位的;如果没有非static定位的父元素，则相对于“浏览器可视窗口”定位（不是body也不是html元素，而是屏幕的可视区的左上角（不含工具条）），经常与z-index属性进行层次分级

fixed

position:fixed脱离文档流，是相对于“浏览器的可视窗口”来定位的而不是html也不是body也不是屏幕！经常与z-index属性进行层次分级

问题1

position 的值 relative 和 absolute 定位原点是？

relative定位的元素，是相对于元素本身的正常位置来进行定位的。

absolute定位的元素，是相对于它的第一个position值不为static的祖先元素的padding box来进行定位的。这句话
我们可以这样来理解，我们首先需要找到绝对定位元素的一个position的值不为static的祖先元素，然后相对于这个祖先元
素的padding box来定位，也就是说在计算定位距离的时候，padding的值也要算进去。

6、margin塌陷及合并问题

7、浮动模型及清除浮动的方法

浮动模型属于布局模型的一种

布局模型：

在网页中，元素有三种布局模型：
1、流动模型（Flow）

2、浮动模型 (Float)

3、层模型（Layer）

浮动模型

作用是可以把块级元素并为一行

伪元素

CSS伪元素::after用来创建一个伪元素，作为已选中元素的最后一个子元素。通常会配合content属性来为该元素添加装饰内容。这个虚拟元素默认是行内元素。

清除浮动

.clearfix::after {//after伪元素
    content: '';//伪元素内容为空 不显示
    visibility: hidden;// 隐藏
 	clear: both;// 清除
    display: block;// clear 只能在块级元素中使用起作用  
    height: 0;
}

原理： clear: both;

clear是CSS中的定位属性，规定元素的哪一侧不允许其他浮动元素。那么clear:both就是规定在左右两侧均不允许浮动元素。

8、display及相关属性

css3弹性盒子 弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成。

.flex-container {

 display: -webkit-flex;   

​ display: flex;

}

属性:

block 块类型。默认宽度为父元素宽度，可设置宽高，换行显示。
none 元素不显示，并从文档流中移除。
inline 行内元素类型。默认宽度为所包含的内容宽度，不可设置宽高，同行显示。
inline-block 默认宽度为内容宽度，可以设置宽高，同行显示。
list-item 像块类型元素一样显示，并添加样式列表标记。
table 此元素会作为块级表格来显示。
inherit 规定应该从父元素继承display属性的值。

8、IFC与BFC

BFC

bfc的理解

是啥

格式化上下文：Formatting context(格式化上下文) 是 W3C CSS2.1 规范中的一个概念。它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。

块级格式化上下文：

具有 BFC 特性的元素可以看作是隔离了的独立容器，容器里面的元素不会在布局上影响到外面的元素，并且 BFC 具有普通容器所没有的一些特性。

所以是怎么渲染元素的，规则：

1、内部的块级元素会在垂直方向，一个接一个地放置。

2、块级元素垂直方向的距离由margin决定。属于同一个BFC的两个相邻块级元素的margin会发生重叠。

3、对于从左往右的格式化，每个元素（块级元素与行内元素）的左边缘，与包含块的左边缘相接触，(对于从右往左的格式化则相反)。即使包含块中的元素存在浮动也是如此，除非其中元素再生成一个BFC。

4、BFC的区域不会与浮动元素重叠。(可以算是清除了浮动？？？)

5、BFC是一个隔离的独立容器，容器里面的子元素和外面的元素互不影响。

6、计算BFC容器的高度时，浮动元素也参与计算

怎么触发

只要元素满足下面任一条件即可触发 BFC 特性：

• body 根元素
• 浮动元素：float 除 none 以外的值
• 绝对定位元素：position (absolute、fixed)
• display 为 inline-block、table-cells、flex
• overflow 除了 visible 以外的值 (hidden、auto、scroll)

有啥子用

bfc的特性?

同一个格式块级格式上下文bfc会发生外边距折叠。不是bug是一个规则

可以包含浮动的元素

IFC

inline-level box

IFC指的是行级格式化上下文，它有这样的一些布局规则：

（1）行级上下文内部的盒子会在水平方向，一个接一个地放置。
（2）当一行不够的时候会自动切换到下一行。
（3）行级上下文的高度由内部最高的内联盒子的高度决定。

9、圣杯布局和双飞翼布局的实现

10、单位

绝对单位

• 英寸（in）：是使用最广泛的长度单位

• 厘米（cm）：生活中最常用的长度单位。

• 毫米（mm）：在研究领域使用广泛。

• 磅（pt）：在印刷领域使用广泛，也称点。CSS 也常用 pt 设置字体大小，12 磅的字体等于六分之一英寸大小。

• pica（pc）：在印刷领域使用，1 pica 等于 12 磅，所以也称 12 点活字。

相对单位

相对单位与绝对单位相比显示大小不是固定的，它所设置的对象受屏幕分辨率、可视区域、浏览器设置以及相关元素的大小等多种因素影响。

• px

px 单位是根据屏幕像素点来确定的。这样不同的显示分辨率就会使相同取值的 px 单位所显示出来的效果截然不同。

• em

  em 单位表示元素的字体高度，它能够根据字体的 font-size 属性值来确定单位的大小。

• %

  百分比也是一个相对单位值。百分比值总是通过另一个值来计算，一般参考父对象中相同属性的值。例如，如果父元素宽度为 500px，子元素的宽度为 50%，则子元素的实际宽度为 250px。

• ex

  ex 单位根据所使用的字体中小写字母 x 的高度作为参考。在实际使用中，浏览器将通过 em 的值除以 2 得到 ex 的值。

rem与em的区别

rem是根据根的font-size变化，而em是根据父级的font-size变化

rem：相对于根元素html的font-size，假如html为font-size：12px，那么，在其当中的div设置为font-size：2rem,就是当中的div为24px

em：相对于父元素计算，假如某个p元素为font-size:12px,在它内部有个span标签，设置font-size：2em,那么，这时候的span字体大小为：12*2=24px

11、实现响应式开发方案？

12、Less预处理语言

13、媒体查询

14、vh与vw

15、Web Worker和Web Socket

.16、CSS3及相关动画

16、如何实现响应式布局

17、Less和Sass使用

18、CSS3 模块

CSS3被拆分为"模块"。旧规范已拆分成小块，还增加了新的。

一些最重要CSS3模块如下：

19、选择器

css常用选择器

通配符：*
ID选择器：# ID
类选择器：. class
元素选择器：p、a    等
后代选择器：p span、div a   等
伪类选择器：a:hover 等
属性选择器：input[type="text"]  等

伪类选择器：a:hover 等

选择器权重 高到低

!important>行内样式>ID选择器 > 类选择器 | 属性选择器 | 伪类选择器 > 元素选择器

规则

!important 优先级最高，但也会被权重高的important所覆盖

行内样式总会覆盖外部样式表的任何样式(除了!important)

单独使用一个选择器的时候，不能跨等级使css规则生效

如果两个权重不同的选择器作用在同一元素上，权重值高的css规则生效

如果两个相同权重的选择器作用在同一元素上：以后面出现的选择器为最后规则.权重相同时，与元素距离近的选择器生效

不推荐使用!important，因为!important根本没有结构与上下文可言，并且很多时候权重的问题，就是因为不知道在哪里定义了一个!important而导致的

css引入方式

外部 CSS代码保存在扩展名为.css的样式表中或者是链接 在<style>中

行内 在html元素中

内部 在html 的<style>中直接写css

20、盒模型

盒子模型

w3c标准盒模型：元素的宽度等于style里的width+margin+border+padding宽度

box-sizing: content-box;

它的border和padding不占用content的实际宽高。

IE怪异盒模型：元素宽度等于style里的width宽度

box-sizing: border-box;

IE盒模型用的border和padding占用content的实际宽高。

如果你在设计页面中，发现内容区被撑爆了，那么就先检查一下border-sizing是什么，最好在引用reset.css的时候，就对border-sizing进行统一设置，方便管理

盒模型都是由四个部分组成的，分别是margin、border、padding和content。

标准盒模型和IE盒模型的区别在于设置width和height时，所对应的范围不同。标准盒模型的width和height属性的范围只包含了content，而IE盒模型的width和height属性的范围包含了border、padding和content。

一般来说，我们可以通过修改元素的box-sizing属性来改变元素的盒模型。

21、伪类和伪元素

伪类一般匹配的是元素的一些特殊状态，如hover、link等，而伪元素一般匹配的特殊的位置，比如after、before等。

伪类

伪类用于当已有的元素处于某个状态时，为其添加对应的样式，这个状态是根据用户行为而动态变化的。比如说，当用户悬停在指定的元素时，我们可以通过:hover来描述这个元素的状态。

伪元素

伪元素用于创建一些不在文档树中的元素，并为其添加样式。它们允许我们为元素的某些部分设置样式。比如说，我们可以通过::before来在一个元素前增加一些文本，并为这些文本添加样式。虽然用户可以看到这些文本，但是这些文本实际上不在文档树中。有时你会发现伪元素使用了两个冒号（::）而不是一个冒号（:）。这是CSS3的一部分，并尝试区分伪类和伪元素。大多数浏览器都支持这两个值。

关于伪类 LVHA 的解释?

a标签有四种状态：链接访问前（link）、链接访问后（visited）、鼠标滑过(hover)、激活(active)，分别对应四种伪类:link、:visited、:hover、:active；

要显示鼠标滑过a标签时，hover在link后面。

要显示激活时的样式，active要放在link和hover之后

22、背景和边框

23、动画

canvas.getContext（）返回canvas 的上下文。这个方法是用来获得渲染上下文和它的绘画功能。

beginPath()

新建一条路径，生成之后，图形绘制命令被指向到路径上生成路径。

当前路径为空，即调用beginPath()之后，或者canvas刚建的时候，第一条路径构造命令通常被视为是moveTo（），无论实际上是什么。出于这个原因，你几乎总是要在设置路径之后专门指定你的起始位置。

绘制直线，需要用到的方法lineTo()。

• lineTo(x, y)

  绘制一条从当前位置到指定x以及y位置的直线。

closePath()//闭合路径之后图形绘制命令又重新指向到上下文中。

stroke()//通过线条来绘制图形轮廓。

使用实例

function draw() {
  var canvas = document.getElementById('canvas');
  if (canvas.getContext) {
    var ctx = canvas.getContext('2d');

    ctx.beginPath();
    ctx.moveTo(75, 50);
    ctx.lineTo(100, 75);
    ctx.lineTo(100, 25);
    ctx.fill();
  }
}

当你调用fill()函数时，所有没有闭合的形状都会自动闭合，所以你不需要调用closePath()函数。但是调用stroke()时不会自动闭合

绘制圆弧

绘制圆弧或者圆，我们使用arc()方法。

arc(x, y, radius, startAngle, endAngle, anticlockwise)

x,y为绘制圆弧所在圆上的圆心坐标。radius为半径。startAngle以及endAngle参数用弧度定义了开始以及结束的弧度。这些都是以x轴为基准。参数anticlockwise为一个布尔值。为true时，是逆时针方向，否则顺时针方向。

svg与canvas的区别

Canvas	SVG
通过 JavaScript 来绘制 2D 图形	是一种使用 XML 描述 2D 图形的语言
是HTML5提供的新元素``	历史久远，并不是HTML5转悠的标签
位图（标量图），放大或改变尺寸会失真；逐像素进行渲染，依赖分辨率	矢量图，放大或改变尺寸不会失真；不依赖分辨率
弱的文本渲染能力（因为放大会失真）	最适合带有大型渲染区域的应用程序，比如谷歌地图（因为放大不会失真）
能够以 .png 或 .jpg 格式保存结果图像；能够引入 .png 或 .jpg格式的图片	不能以 .png 或 .jpg 格式保存结果图像；不能引入 .png 或 .jpg格式的图片
不支持事件处理器（一旦图形被绘制完成，它就不会继续得到浏览器的关注。如果其位置发生变化，那么整个场景也需要重新绘制，包括任何或许已被图形覆盖的对象。）	支持事件处理器（SVG DOM 中的每个元素都是可用的。您可以为某个元素附加 JavaScript 事件处理器。每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化，那么浏览器能够自动重现图形。）
不能被引擎抓取	可以被引擎抓取
—	复杂度高会减慢渲染速度（任何过度使用 DOM 的应用都不快）
最适合图像密集型的游戏，其中的许多对象会被频繁重绘	不适合游戏应用

24、多列布局

浮动元素是如何定位的

当一个元素浮动之后，它会被移出正常的文档流，然后向左或者向右平移，一直平移直到碰到了所处的容器的边框，或者碰到另外一个浮动的元素。

25、CSS新特性

transition：过渡
transform：旋转、缩放、移动或者倾斜
animation：动画
gradient：渐变 background：linear-gradient（direction，color-stop1，color-stop2，...）
	线性渐变 - 从左到右
	background：linear-gradient（to right，red，yellow）
	径向渐变是圆形或椭圆形渐变。颜色不是沿着直线前进，而是从所有方向的起点混合出来
	background：radial-gradient（位置的形状大小，开始颜色，...，最后颜色）;
shadow：阴影 
	box-shadow：2px 5px 0 0 rgba（72,72,72,1）;
	/* x偏移量 | y偏移量 | 阴影模糊半径 | 阴影扩散半径 | 阴影颜色 */
border-radius：圆角，
	border-radius：5px 10px 15px 20px;
	/* 左上角 | 右上角 | 右下角| 左下角 */ 按照顺时针
	border-radius:10px 15px;
	/* (左上角右下角) |(右上角，左下角) */ 按照对角线
	border-radius: 10px 15px 5px
	/* 左上角 | (右上角，左下角) | 右下角 */
background-image：多背景图形
url（firstImage.jpg），
url（secondImage.gif），
url（thirdImage.png）;	

根据项目来回答

行内元素（display: inline）

宽度和高度是由内容决定，与其他元素共占一行的元素，我们将其叫行内元素

设置宽度width 无效。
设置高度height 无效，可以通过line-height来设置。
设置margin 只有左右margin有效，上下无效。
设置padding只有左右padding有效，上下则无效

块级元素（display: block)

默认宽度由父容器决定，默认高度由内容决定，独占一行并且可以设置宽高的元素，我们将其叫做块级元素

样式为display : block是行内元素

src和href的区别

• src是指向外部资源的位置，指向的内容会嵌入到文档中当前标签所在的位置，在请求src资源时会将其指向的资源下载并应用到文档内，如js脚本，img图片和frame等元素。当浏览器解析到该元素时，会暂停其他资源的下载和处理，知道将该资源加载、编译、执行完毕，所以一般js脚本会放在底部而不是头部。
• href是指网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的链接，用于超链接。

渐进增强和优雅降级

• 渐进增强：针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能，达到更好的用户体验。
• 优雅降级：一开始就构建完整的功能，然后再针对低版本的浏览器进行兼容。

defer和async的区别

• defer要等到整个页面在内存中正常渲染结束（DOM结构完全生成，以及其他脚本执行完成），才会执行。多个defer脚本会按照它们在页面出现的顺序加载。“渲染完再执行”

• async一旦下载完，渲染引擎就会中断渲染，执行这个脚本以后，再继续渲染。多个async脚本是不能保证加载顺序的。“下载完就执行”

position

static：无特殊定位，对象遵循正常文档流。top，right，bottom，left等属性不会被应用。
relative：对象遵循正常文档流，但将依据top，right，bottom，left等属性在** 。而其层叠通过z-index属性定义。
absolute：对象脱离正常文档流，使用top，right，bottom，left等属性进行绝对定位**。而其层叠通过z-index属性定义。

fixed：对象脱离正常文档流，使用top，right，bottom，left等属性以窗口为参考点进行定位，当出现滚动条时，对象不会随着滚动。而其层叠通过z-index属性定义。

什么是文档流？

将窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素,即为文档流。

只有三种情况会使得元素脱离文档流，分别是：浮动、绝对定位和固定定位。

flex布局

阮一峰flex布局

26、margin和padding值的先后顺序及区别

四个值

顺序为:上右下左,‘margin-top’、‘margin-right’、‘margin-bottom’、‘margin-left’,按照顺时针方向罗列的.

三个值：上 （左右） 下

两个值：（上下） （左右）

margin: 20px;（上、下、左、右各20px。）
margin: 20px 40px;（上、下20px；左、右40px。）
margin: 20px 40px 60px;（上20px；左、右40px；下60px。）
margin: 20px 40px 60px 80px;（上20px；右40px；下60px；左80px。）

27、 弹性盒子flex

flex布局是CSS3新增的一种布局方式，我们可以通过将一个元素的display属性值设置为flex从而使它成为一个flex
容器，它的所有子元素都会成为它的项目。

一个容器默认有两条轴，一个是水平的主轴，一个是与主轴垂直的交叉轴。我们可以使用flex-direction来指定主轴的方向。
我们可以使用justify-content来指定元素在主轴上的排列方式，使用align-items来指定元素在交叉轴上的排列方式。还
可以使用flex-wrap来规定当一行排列不下时的换行方式。

对于容器中的项目，我们可以使用order属性来指定项目的排列顺序，还可以使用flex-grow来指定当排列空间有剩余的时候，
项目的放大比例。还可以使用flex-shrink来指定当排列空间不足时，项目的缩小比例。

28、 visibility 和display：none

visibility：CSS属性 visibility显示或隐藏元素而不更改文档的布局

visibility：visible元素正常显示。

visibility: hidden;隐藏元素，但是其他元素的布局不改变，相当于此元素变成透明。要注意若将其子元素设为 visibility: visible，则该子元素依然可见。

visibility：collapse

• 用于 <table>行、列、列组和行组，隐藏表格的行或列，并且不占用任何空间（与将 display: none 用于表格的行/列上的效果相 当）。但是，仍会计算其他行和列的大小，就好像折叠的行或列中的单元格一样。此值允许从表中快速删除行或列，而不强制重新计算整个表的宽度和高度。

• 折叠的弹性项目被隐藏，他们将占用的空间被删除。

• 对于 XUL 元素，元素的计算大小始终为零，而且通常会忽略影响大小的其他样式，尽管边距仍然有效。

• （1）对于一般的元素，它的表现跟visibility：hidden;是一样的**。元素是不可见的，但此时仍占用页面空间**。

  （2）但例外的是，如果这个元素是table相关的元素，例如table行，table group，table列，table column group，它的表现却跟display:none一样，也就是说，它们占用的空间也会释放。

五、JavaScript

见js笔记

valueOf()和toString()

所有的对象都继承有toString() 和 valueOf() 方法

模拟实现函数的call、apply、bind方法 ★★

模拟实现函数节流、防抖方法 ★★★

模拟实现对象的深拷贝 ★★

嵌套数组指定层次展开 flat扁平化（多种方法，至少掌握两种）★★★

模拟实现 reduce 数组方法 ★

模拟实现数组map方法 ★★

模拟实现Array.fill()、Array.filter() ★★

模拟实现Array.find()、Array.findIndex()★★

模拟实现Promise.all方法(Promise.race也需要了解)★★

使用原生的JavaScript实现ajax请求（也可能让你说ajax实现原理，答案一样）★★★

模拟实现构造函数new的过程（也可能让你口述new的过程，答案一样）★★★

模拟实现Object.create方法 ★★

模拟实现instanceof的功能 ★★★

使用setTimeout实现setInterval方法 ★★

实现jsonp★★★

promise 实现sleep函数★★

实现promise retry重试★

js实现观察者模式★

\1. 原始值和引用值类型及区别
\2. 判断数据类型typeof、instanceof、Object.prototype.toString.call()、constructor
\3. 类数组与数组的区别与转换
\4. 数组的常见API
\5. bind、call、apply的区别
\6. new的原理
\7. 如何正确判断this？
\8. 闭包及其作用
\9. 原型和原型链
\10. prototype与__proto__的关系与区别
\11. 继承的实现方式及比较
\12. 深拷贝与浅拷贝
\13. 防抖和节流
\14. 作用域和作用域链、执行期上下文
\15. DOM常见的操作方式
\16. Array.sort()方法与实现机制
\17. Ajax的请求过程
\18. JS的垃圾回收机制
\19. JS中的String、Array和Math方法
\20. addEventListener和onClick()的区别
\21. new和Object.create的区别
\22. DOM的location对象
\23. 浏览器从输入URL到页面渲染的整个流程（涉及到计算机网络数据传输过程、浏览器解析渲染过程）
\24. 跨域、同源策略及跨域实现方式和原理
\25. 浏览器的回流（Reflow）和重绘（Repaints）
\26. JavaScript中的arguments
\27. EventLoop事件循环
\28. 宏任务与微任务
\29. BOM属性对象方法
\30. 函数柯里化及其通用封装

\31. JS的map()和reduce()方法
\32. “”和“=”的区别
\33. setTimeout用作倒计时为何会产生误差？

六、Vue

见vue笔记

vue声明周期函数

数据绑定

• {{}}

这种情况是有弊端的，就是当我们网速很慢或者 javascript 出错时，会暴露我们的{{xxx}}

双大括号会将数据解释为纯文本，而非HTML。为了输出真正的HTML，你就需要使用v-html 指令

• v-text：即{{}}

• v-html

<div id="app">
    <p v-html="msg"></p>
</div>

new Vue({
    el: '#app',
    data: {
        msg: '<b>Hello Vue.js</b>'//输出html，v-text和{{}}都会被解析成原文本
    }
});

在生产环境中动态渲染HTML是非常危险的，因为容易导致XSS攻击。所以只能在可信的内容上使用v-html，永远不要在用户提交和可操作的网页上使用。

实现双向绑定

vue react angular 的区别

对比	Vue	React	Angular
基于组件	擅长	擅长	-
依赖标准	ES6 或 ES6	ES6	TypeScript
底层技术	单个文件（模板+脚本+样式）	JSX	模板
数据绑定	单/双向绑定	单向绑定	双向绑定
支持原生开发	支持（Weex）	支持（react-native/react-native-renderer）	支持（NativeScript、Ionic）
服务端渲染	nuxt.js	next.js	Angular Universal
浏览器兼容	ie8 +	ie9 +	ie9 +
模式	mvvm	mvvm

vue computed 和watch的区别

computed 返回的是对数据的计算，如果一个数据依赖另一个数据，可以直接通过计算得到

watch：是对数据的监听回调，当依赖的数据发生改变，执行回调，把新的值更新旧值 watch： { 监听对象： function（newval，oldval） {当监听对象改变时，调用改回调函数}}

vuex

actions 异步操作

mutations： 更改state的数据

state： 共享的数据

vuex的核心技术

router

ES6

见es6笔记

\1. let、const和var的概念与区别
\2. 变量提升与暂时性死区
\3. 变量的结构赋值
\4. 箭头函数及其this问题
\5. Symbol概念及其作用
\6. Set和Map数据结构
\7. Proxy
\8. Reflect对象
\9. Promise（手撕Promise A+规范、Promise.all、Promise相关API和方法）
\10. Iterator和for…of（Iterator遍历器的实现）
\11. 循环语法比较及使用场景（for、forEach、for…in、for…of）
\12. Generator及其异步方面的应用
\13. async函数
\14. 几种异步方式的比较（回调、setTimeout、Promise、Generator、async）
\15. class基本语法及继承
\16. 模块加载方案比较（CommonJS和ES6的Module）
\17. ES6模块加载与CommonJS加载的原理

ajax

见Vue笔记

webpack

见vue笔记

见小程序笔记

data() 为了防止复用组件的时候数据污染。注册组件其实是建立一个组件构造器，使用组件的时候实际是创建一个实例。不同组件实例的data 如果是共享的，数据交叉污染，所以data需要时一个函数。

七、网络协议

见tcp/ip详解笔记

tcp三次握手

\1. TCP/IP协议分层管理
\2. 三次握手四次挥手机制及原因
\3. HTTP方法
\4. GET和POST的区别
\5. HTTP建立持久连接的意义
\6. HTTP报文的结构
\7. HTTP状态码
\8. Web服务器及其组成
\9. HTTP报文首部
\10. HTTP通用首部字段
\11. HTTP请求首部字段、响应首部字段、实体首部字段
\12. Cookie相关首部字段
\13. HTTPS与HTTP区别及实现方式
\14. Cookie与Session
\15. 基于HTTP的功能追加协议（SPY、WebSocket、HTTP）
\16. 常见的Web攻击分类
\17. TCP与UDP区别
\18. 存储机制localStorage、sessionStorage与Cookie存储技术
\19. XSS攻击及防御
\20. CSRF攻击及防御

1、Http

影响http的因素

带宽： 略

延迟：

• 浏览器阻塞 浏览器会因为一些原因阻塞请求。浏览器对于同一个域名，同时只能有 4 个连接（这个根据浏览器内核不同可能会有所差异），超过浏览器最大连接数限制，后续请求就会被阻塞。
• DNS 查询（DNS Lookup）：浏览器需要知道目标服务器的 IP 才能建立连接。将域名解析为 IP 的这个系统就是 DNS。这个通常可以利用DNS缓存结果来达到减少这个时间的目的。
• 建立连接（Initial connection）：HTTP 是基于 TCP 协议的，浏览器最快也要在第三次握手时才能捎带 HTTP 请求报文，达到真正的建立连接，但是这些连接无法复用会导致每次请求都经历三次握手和慢启动。三次握手在高延迟的场景下影响较明显，慢启动则对文件类大请求影响较大。

区别

http1和http2的区别

1.多路复用
HTTP1.1：可以多建立几个TCP连接，来支持处理更多并发的请求，但是创建TCP连接本身也是有开销的。
HTTP2.0：使用了多路复用的技术，做到同一个连接并发处理多个请求，而且并发请求的数量比HTTP1.1大了好几个数量级。
TCP连接有一个预热和保护的过程，先检查数据是否传送成功，一旦成功过，则慢慢加大传输速度。因此对应瞬时并发的连接，服务器的响应就会变慢。所以最好能使用一个建立好的连接，并且这个连接可以支持瞬时并发的请求。
2.二进制分帧
HTTP1.1：无。
HTTP2.0：应用层（HTTP/2）和传输层（TCP or UDP）之间增加一个二进制分帧层。
3.首部压缩
HTTP1.1：不支持header数据的压缩。
HTTP2.0：使用HPACK算法对header的数据进行压缩，这样数据体积小了，在网络上传输就会更快。
4.服务器推送
HTTP1.1：Server Push 让HTTP1.x时代使用内嵌资源的优化手段变得没有意义。
HTTP2.0：服务器可以对客户端的一个请求发送多个响应。

总结http2： 一个连接多个请求，二进制分层 首部压缩 一个请求多个响应。

http状态码

1xx(临时响应)表示临时响应并需要请求者继续执行操作的状态代码。代码 说明

100 (继续) 请求者应当继续提出请求。 服务器返回此代码表示已收到请求的第一部分，正在等待其余部分。

101 (切换协议) 请求者已要求服务器切换协议，服务器已确认并准备切换。

2xx (成功)表示成功处理了请求的状态代码。代码 说明

200 (成功) 服务器已成功处理了请求。 通常，这表示服务器提供了请求的网页。

201 (已创建) 请求成功并且服务器创建了新的资源。

202 (已接受) 服务器已接受请求，但尚未处理。

203 (非授权信息) 服务器已成功处理了请求，但返回的信息可能来自另一来源。

204 (无内容) 服务器成功处理了请求，但没有返回任何内容。

205 (重置内容) 服务器成功处理了请求，但没有返回任何内容。

206 (部分内容) 服务器成功处理了部分 GET 请求。

3xx (重定向) 表示要完成请求，需要进一步操作。 通常，这些状态代码用来重定向。代码 说明

300 (多种选择) 针对请求，服务器可执行多种操作。 服务器可根据请求者 (user agent) 选择一项操作，或提供操作列表供请求者选择。

301 (永久移动) 请求的网页已永久移动到新位置。 服务器返回此响应(对 GET 或 HEAD 请求的响应)时，会自动将请求者转到新位置。

302 (临时移动) 服务器目前从不同位置的网页响应请求，但请求者应继续使用原有位置来进行以后的请求。

303 (查看其他位置) 请求者应当对不同的位置使用单独的 GET 请求来检索响应时，服务器返回此代码。

304 (未修改) 自从上次请求后，请求的网页未修改过。 服务器返回此响应时，不会返回网页内容。

305 (使用代理) 请求者只能使用代理访问请求的网页。 如果服务器返回此响应，还表示请求者应使用代理。

307 (临时重定向) 服务器目前从不同位置的网页响应请求，但请求者应继续使用原有位置来进行以后的请求。

4xx(请求错误) 这些状态代码表示请求可能出错，妨碍了服务器的处理。代码 说明

400 Bad Request (错误请求) 服务器不理解请求的语法。

401 Unauthorize（未授权） 代表客户端错误，指的是由于缺乏目标资源要求的身份验证凭证，发送的请求未得到满足。

这个状态码会与 WWW-Authenticate 首部一起发送，其中包含有如何进行验证的信息。

这个状态类似于 403， 但是在该情况下，依然可以进行身份验证。 (未授权) 请求要求身份验证。 对于需要登录的网页，服务器可能返回此响应。

403 (禁止)forbidden 服务器拒绝请求。

404 (未找到)not found 服务器找不到请求的网页。

405 (方法禁用) 禁用请求中指定的方法。

406 (不接受) 无法使用请求的内容特性响应请求的网页。

407 (需要代理授权) 此状态代码与 401(未授权)类似，但指定请求者应当授权使用代理。

408 (请求超时) 服务器等候请求时发生超时。

409 (冲突) 服务器在完成请求时发生冲突。 服务器必须在响应中包含有关冲突的信息。

410 (已删除) 如果请求的资源已永久删除，服务器就会返回此响应。

411 (需要有效长度) 服务器不接受不含有效内容长度标头字段的请求。

412 (未满足前提条件) 服务器未满足请求者在请求中设置的其中一个前提条件。

413 (请求实体过大) 服务器无法处理请求，因为请求实体过大，超出服务器的处理能力。

414 (请求的 URI 过长) 请求的 URI(通常为网址)过长，服务器无法处理。

415 (不支持的媒体类型) 请求的格式不受请求页面的支持。

416 (请求范围不符合要求) 如果页面无法提供请求的范围，则服务器会返回此状态代码。

417 (未满足期望值) 服务器未满足"期望"请求标头字段的要求。

5xx(服务器错误)这些状态代码表示服务器在尝试处理请求时发生内部错误。 这些错误可能是服务器本身的错误，而不是请求出错。代码 说明

500 (服务器内部错误) 服务器遇到错误，无法完成请求。

501 (尚未实施) 服务器不具备完成请求的功能。 例如，服务器无法识别请求方法时可能会返回此代码。

502 Bad Gateway(错误网关) 服务器作为网关或代理，从上游服务器收到无效响应。

503 (服务不可用) 服务器目前无法使用(由于超载或停机维护)。 通常，这只是暂时状态。

504 (网关超时) 服务器作为网关或代理，但是没有及时从上游服务器收到请求。

505 (HTTP 版本不受支持) 服务器不支持请求中所用的 HTTP 协议版本。

题1

304是什么?

答：not modified ,未改变，说明无需返回请求的内容。
如果是请求的和上次请求的资源是没有改变的，那么则304，表明这次请求无需返回请求的资源。

题2

301和302的区别，即永久性重定向和暂时性重定向之间的区别

答

题3

介绍一下http

总结： HTTP 是无连接无状态的超文本传输协议 基于tcp/ip之上的，用于客户端与服务端通信，默认端口是80，报文由 首部 主体组成。

题4

http报文的具体报文结构

答： 报文由首部和主体组成。

首部的组成有请求行或者是状态行，首部字段。

报文主体： 一般不用

有四种首部：通用首部，请求首部，响应首部，实体首部

题5

http报文的首部字段结构？有哪些字段？作用分别是？

字段： 字段名： 字段值

答：首先首部分为通用首部、请求首部、响应首部、实体首部。

通用首部是请求报文和响应报文都会用的首部。
首部字段有：

cache-control： 控制缓存的行为 

请求首部字段有：accept: 用户代理可处理的媒体类型user-Agent： http客户端程序的信息。accept-language： 优先的语言。

响应首部： accept-range： 是否接受字节范围请求

实体首部

content-Encoding： 实体主体适用的编码方式

content-length： 实体主体的大小单位是字节

content-type: 实体主体的媒体类型。

expires 实体主体过期的日期事件。

首先关于重定向是什么：

由于技术更新和企业自身的原因，网站会进行改版或者说是重建，变更域名之类的工作，这时候旧网站原来的有用信息就要转移到新建的网站上，那么用什么办法转移呢？那就是用域名url转发和301重定向这两种办法。

url转发

通过服务器的特殊技术设置，实现当访问您的域名时，将会自动跳转到您所指定的另一个网络地址。

301永久重定向302暂时重定向

301 重定向是永久的重定向，搜索引擎在抓取新内容的同时也将旧的网址替换为重定向之后的网址。

302 重定向是暂时的重定向，搜索引擎会抓取新的内容而保留旧的网址。因为服务器返回 302 代码，搜索引擎认为新的网址只是暂时的。

http get和post的区别

GET 和 POST 只是 HTTP 协议中两种请求方式，而 HTTP 协议是基于 TCP/IP 的应用层协议，无论 GET 还是 POST，用的都是同一个传输层协议，所以在传输上，没有区别。

报文格式上，不带参数时，最大区别就是第一行方法名不同

POST 方法请求报文第一行是这样的 POST /uri HTTP/1.1 \r\n

GET 方法请求报文第一行是这样的 GET /uri HTTP/1.1 \r\n

是的，不带参数时他们的区别就仅仅是报文的前几个字符不同而已

带参数时报文的区别呢？ 在约定中**，GET 方法的参数应该放在 url 中**，POST 方法参数应该放在 body 中

因为GET因为是读取，就可以对GET请求的数据做缓存。这个缓存可以做到浏览器本身上（彻底避免浏览器发请求），也可以做到代理上（如nginx），或者做到server端（用Etag，至少可以减少带宽消耗）

总结：先下结论，GET 和 POST 方法没有实质区别，只是报文格式不同。也就是浏览器对两者的限制不同post有body

• 传参：get通过url传参，post放在request body当中。从而get比较不安全参数直接暴露在url中，所以不能用来传递敏感信息。get参数数据类型是ascii字符， post参数没有限制。因为get参数是在url中因为浏览器对url的长度的限制所以get参数长度是有限制的。post没有限制

• 缓存： get请求会被浏览器主动cache post需要设置

GET 方法参数写法是固定的吗？

在约定中，我们的参数是写在 ? 后面，用 & 分割。

我们知道，解析报文的过程是通过获取 TCP 数据，用正则等工具从数据中获取 Header 和 Body，从而提取参数。

也就是说，我们可以自己约定参数的写法，只要服务端能够解释出来就行，一种比较流行的写法是 http://www.example.com/user/name/chengqm/age/22。

POST 方法比 GET 方法安全？

按照网上大部分文章的解释，POST 比 GET 安全，因为数据在地址栏上不可见。

然而，从传输的角度来说，他们都是不安全的，因为 HTTP 在网络上是明文传输的，只要在网络节点上捉包，就能完整地获取数据报文。

要想安全传输，就只有加密，也就是 HTTPS。

GET 方法的长度限制是怎么回事？

在网上看到很多关于两者区别的文章都有这一条，提到浏览器地址栏输入的参数是有限的。

首先说明一点，HTTP 协议没有 Body 和 URL 的长度限制，对 URL 限制的大多是浏览器和服务器的原因。

浏览器原因就不说了，服务器是因为处理长 URL 要消耗比较多的资源，为了性能和安全（防止恶意构造长 URL 来攻击）考虑，会给 URL 长度加限制。

POST 方法会产生两个 TCP 数据包？错！

有些文章中提到，post 会将 header 和 body 分开发送，先发送 header，服务端返回 100 状态码再发送 body。

HTTP 协议中没有明确说明 POST 会产生两个 TCP 数据包，而且实际测试(Chrome)发现，header 和 body 不会分开发送。

所以，header 和 body 分开发送是部分浏览器或框架的请求方法，不属于 post 必然行为。

2、DNS域名解析

1. 建立TCP连接

2. 发送HTTP请求，服务器处理请求，返回响应结果

3. 关闭TCP连接

4. 浏览器渲染

5. 构建 DOM 树

6. 样式计算

7. 页面布局

8. 生成分层树

9. 栅格化

10. 显示

3、TCP的三次握手：

1. 客户端发送一个SYN报文请求连接，变为SYN_SEND状态
2. 服务端接收到客户端发送SYN包，进行确认过后，发送ACK报文，变为SYN_RECV状态
3. 客户端接收到服务端的SYN和ACK报文后，发送ACK包进行确认，然后客户端和服务端都变成ESTABLISHED状态

为甚么是三次握手？两次握手可以吗

举个栗子：

两次握手

客户端a: 服务端b你在吗？ 客户端b： 我在，你呢？ 等你。 然后b等啊等，a没来。

三次握手

客户端a: 服务端b你在吗？ 客户端b： 我在，你呢？等你~ b等了一会，a没来，b就算了。

防止占服务端的资源。

四次挥手

四次挥手是啥？

为什么？为什么不是三次挥手？

4、udp

5、浏览器缓存机制（http缓存）

总结：

• 浏览器每次发起请求，都会先在浏览器缓存中查找该请求的结果以及缓存标识
• 浏览器每次拿到返回的请求结果都会将该结果和缓存标识存入浏览器缓存中

强制缓存

强制缓存就是向浏览器缓存查找该请求结果，并根据该结果的缓存规则来决定是否使用该缓存结果的过程

协商缓存

就是在强制缓存之后，设置缓存规则发给服务器

6、同源策略

是什么

a网站的cookie不能和b网站共享

同源指什么相同

• 协议相同
• 域名相同
• 端口相同

为什么？

是为了保证用户信息的安全，防止恶意的网站窃取数据。

跨站请求伪造：A网站是一家银行，用户登录以后，又去浏览其他网站。如果其他网站可以读取A网站的 Cookie，会发生什么？

很显然，如果 Cookie 包含隐私（比如存款总额），这些信息就会泄漏。更可怕的是，Cookie 往往用来保存用户的登录状态，如果用户没有退出登录，其他网站就可以冒充用户，为所欲为。因为浏览器同时还规定，提交表单不受同源政策的限制。

由此可见，"同源政策"是必需的，否则 Cookie 可以共享，互联网就毫无安全可言了。

非同源会怎么样

（1） Cookie、LocalStorage 和 IndexDB 无法读取。

（2） DOM 无法获得。

（3） AJAX 请求不能发送。

如何避免这三种限制

cookies

是什么

Cookie 是服务器写入浏览器的一小段信息，只有同源的网页才能共享。

怎么解决cookies共享？？？？？？？？？？

​

iframe？？？？/img/script是可以带cookie的 ，用这些标签发送请求可以绕过同源策略

ajax

同源政策规定，AJAX请求只能发给同源的网址，否则就报错。

除了架设服务器代理（浏览器请求同源服务器，再由后者请求外部服务），有三种方法规避这个限制。

• JSONP（利用script标签可以跨域）

• WebSocket

• 跨资源共享CORS（设置ajax 的withCredentials = true）

7、跨域

你怎么 解决跨域的问题

答： 为了安全考虑防止跨站伪造攻击，浏览器的同源策略规定url具有相同的origin(包括协议，端口，域名要相同）。同源策略会造成cookie，localstorage 无法请求 dom无法获取 ajax不能发送请求
解决方法： 
cors跨资源共享，是一个系统，由多个http头组成。可以通过设置Access-Control-Allow-Origin: *
Access-Control-Allow-Origin: <origin>	来允许指定的origin请求。
同源安全策略 默认阻止“跨域”获取资源。但是 CORS 给了web服务器这样的权限，即服务器可以选择，允许跨域请求访问到它们的资源。

8、 预请求

什么是预请求

预请求就是复杂请求（可能对服务器数据产生副作用的HTTP请求方法，如put，delete都会对服务器数据进行更修改，所以要先询问服务器）。

为什么要预请求

w3c规范要求，对复杂请求，浏览器必须先使用options发起一个预检请求，从而获知服务器是否允许该跨域请求，服务器确认以后才能发起实际的HTTP请求，否则停止第二次正式请求。

什么时候预请求？

大部分我们使用的是get，post请求，他们属于简单请求，而简单请求不会触发options请求。
1.把content-type设置成"application/json"
2.请求设置了自定义的header字段

9、https tsl

相关概念：http https 对称加密，非对称加密 证书

为什么需要加密？

因为http的内容是明文传输的，明文数据会经过中间代理服务器、路由器、wifi热点、通信服务运营商等多个物理节点，如果信息在传输过程中被劫持，传输的内容就完全暴露了，他还可以篡改传输的信息且不被双方察觉，这就是中间人攻击。所以我们才需要对信息进行加密。最简单容易理解的就是对称加密 。

对称加密+非对称加密

1. 某网站拥有用于非对称加密的公钥A、私钥A’。
2. 浏览器像网站服务器请求，服务器把公钥A明文给传输浏览器。
3. 浏览器随机生成一个用于对称加密的密钥X，用公钥A加密后传给服务器。
4. 服务器拿到后用私钥A’解密得到密钥X。
5. 这样双方就都拥有密钥X了，且别人无法知道它。之后双方所有数据都用密钥X加密解密。

中间人攻击

1. 某网站拥有用于非对称加密的公钥A、私钥A’。
2. 浏览器向网站服务器请求，服务器把公钥A明文给传输浏览器。
3. 中间人劫持到公钥A，保存下来，把数据包中的公钥A替换成自己伪造的公钥B（它当然也拥有公钥B对应的私钥B’）。
4. 浏览器随机生成一个用于对称加密的密钥X，用公钥B（浏览器不知道公钥被替换了）加密后传给服务器。
5. 中间人劫持后用私钥B’解密得到密钥X，再用公钥A加密后传给服务器。
6. 服务器拿到后用私钥A’解密得到密钥X。

证书：

对比可以发现是否被篡改。

八、前端工程化

\1. 前端工程化的流程（架构选型、业务开发、测试、打包构建、部署上线、项目监控）

\2. Webpack基本概念与配置

\3. loader与plugin原理与实现

\4. Webpack的模块热替换及实现

\5. Webpack的优化问题

\6. SPA及其优缺点

\7. SSR实现及优缺点

\8. 设计模式（工厂模式、单例模式、原型模式、适配器模式、观察者模式等…）

九、前端优化方案

性能优化：

减少http请求，使用http2（http2比http1更快（有压缩头部，多路复用一个连接多个请求））

将 CSS 放在文件头部，JavaScript 文件放在底部

所有放在 head 标签里的 CSS 和 JS 文件都会堵塞渲染。如果这些 CSS 和 JS 需要加载和解析很久的话，那么页面就空白了。所以 JS 文件要放在底部，等 HTML 解析完了再加载 JS 文件。

那为什么 CSS 文件还要放在头部呢？

因为先加载 HTML 再加载 CSS，会让用户第一时间看到的页面是没有样式的、“丑陋”的，为了避免这种情况发生，就要将 CSS 文件放在头部了。

另外，JS 文件也不是不可以放在头部，只要给 script 标签加上 defer 属性就可以了，异步下载，延迟执行。

十、node

\1. NodeJS基本概念与特点

\2. CommonJS规范、核心模块

\3. Node的异步I/O

\4. Node的内存控制

\5. Node构建网络服务（TCP、HTTP、Web Socket服务等）

\6. Node的进程

十一、react

\1. React自身特点及选型时考虑
\2. React与VUE的异同
\3. Virtual DOM
\4. React生命周期
\5. Diff算法
\6. 受控组件与非受控组件
\7. 高阶组件
\8. Flux架构模式（涉及MVC/MVVM、Flux）
\9. Redux设计概念、设计原则、方法、redux实现异步流的库
\10. 纯组件（Pure Component）与shouldComponentUpdate关系
\11. Redux中的组件与connect函数
\12. React Fiber架构
\13. React Hooks的作用及原理

十二、数据可视化

\1. Canvas和SVG的区别

canvas是用js来绘图

svg是用xml文档来描述绘图

\2. 在考虑设计可视化图表时，结合Canvas和SVG特性会怎么取舍

\3. 常见的可视化组件库

\4. 可视化组件库如Echarts的设计思路

\5. 一些偏向底层的可视化组件库和前端框架结合方面需要考虑哪些问题

\6. 可视化组件如何做到数据驱动？

十三、计算机系统

\1. 计算机系统

\2. 线程与进程

\3. 常见的git指令

\4. Linux相关指令

\5. 其他类型的编程语言（如Java）

\6. 数据库

十四、web安全

https是什么加密

十五、手撕代码

v8标准输入输出

单行输入

var line = readline()

多行输入

while(line = readline()) {

}

\1. Promise（A+规范）、then、all方法
\2. Iterator遍历器实现
\3. Thunk函数实现（结合Generator实现异步）
\4. async实现原理（spawn函数）
\5. class的继承
\6. 防抖和节流
\7. Ajax原生实现
\8. 深拷贝的几种方法与比较
\9. 继承的几种实现与比较
\10. 未知宽高的元素水平垂直居中
\11. 三栏布局的实现
\12. 两栏布局的实现
\13. React高阶组件
\14. 数组去重
\15. 几种排序算法的实现及其复杂度比较
\16. 前序后序遍历二叉树（非递归）
\17. 二叉树深度遍历（分析时间复杂度）
\18. 跨域的实现（JSONP、CORS）

排序算法（要会分析时间空间复杂度）：冒泡、选择、插入、快排 ★★★ 归并 ★

二分查找（非递归递归）★★★

字符串逆序（翻转整数字符串）★★★

数组乱序（打乱数组，至少掌握两种方法）★★★

数组去重（至少掌握两种方法）★★★

两个栈来实现一个队列（两个队列实现栈可以了解一下）★

链表相关

​ 入门：★★★

• 反转单链表
• 未排序链表去重O（n2）
• 排序链表去重O（n）
• 单链表删除节点
• 链表partition
• 寻找链表倒数第K个节点
• 删除链表倒数第N个节点
• 判断链表是否为回文链表
• 判断链表是否有环
• 环形链表第一个入环节点
• 两个链表的第一个公共节点

​ 复杂：

• 合并两个排序的链表★★
• 合并K个排序的链表★★
• 奇偶链表★
• 复制带随机指针的单向链表★
• 有序链表转换二叉搜索树（BST）★
• 二叉树展开为链表★
• K 个一组翻转链表★

二叉树各种遍历（前中后序遍历，递归非递归，DFS,BFS）★★★

二叉树遍历涉及到的一些算法题

（好多题其实就是二叉树深度或者广度非递归遍历稍微改一下即可）

• 前序和中序重建二叉树★★
• BST第K大的数和第K小的数★
• 二叉树按层求和（层序遍历改进）★
• Z字型（之字形）遍历二叉树★

二叉树深度相关

• 二叉树深度★★★
• 二叉树最小深度★★
• 树找两(叶子)节点最长距离（相隔的最长路径）★
• 判断二叉树是否为平衡二叉树★★
• 二叉树右视图（左）★

二叉树路径相关

• 路径总和1★★★
• 路径总和2（回溯法）★

DP

• 斐波那契数列★★★
• 最长公共子序列 LCS ★★
• 最长上升子序列 ★★
• 连续子数组（子串）的最大和★★
• 硬币找零（最少硬币个数）★★
• 0-1背包问题★
• 完全背包问题（了解即可）★

全排列（回溯法）见LeetCode 全排列1、全排列2 ★

十六、微信小程序

授权：提前授权wx.authorize

十七、项目

版本号命名

版本号管理策略

一、GNU 风格的版本号管理策略：

1．项目初版本时，版本号可以为 0.1 或 0.1.0, 也可以为 1.0 或 1.0.0，如果你为人很低调，我想你会选择那个主版本号为 0 的方式；
2．当项目在进行了局部修改或 bug 修正时，主版本号和子版本号都不变，修正版本号加 1；
\3. 当项目在原有的基础上增加了部分功能时，主版本号不变，子版本号加 1，修正版本号复位为 0，因而可以被忽略掉；
4．当项目在进行了重大修改或局部修正累积较多，而导致项目整体发生全局变化时，主版本号加 1；
5．另外，编译版本号一般是编译器在编译过程中自动生成的，我们只定义其格式，并不进行人为控制。

二、Window 下的版本号管理策略：
1．项目初版时，版本号为 1.0 或 1.00；
\2. 当项目在进行了局部修改或 bug 修正时，主版本号和子版本号都不变，修正版本号加 1；
\3. 当项目在原有的基础上增加了部分功能时，主版本号不变，子版本号加 1，修正版本号复位为 0，因而可以被忽略掉；
\4. 当项目在进行了重大修改或局部修正累积较多，而导致项目整体发生全局变化时，主版本号加 1；
\5. 另外 , 编译版本号一般是编译器在编译过程中自动生成的，我们只定义其格式，并不进行人为控制。

另外，还可以在版本号后面加入 Alpha、Beta、Gamma、Current、RC (Release Candidate)、Release、Stable 等后缀，在这些后缀后面还可以加入 1 位数字的版本号。

α（alphal） 内部测试版
α版，此版本表示该软件仅仅是一个初步完成品，通常只在软件开发者内部交流，也有很少一部分发布给专业测试人员。一般而言，该版本软件的 bug 较多，普通用户最好不要安装。

β（beta）外部测试版
该版本相对于α版已有了很大的改进，消除了严重的错误，但还是存在着一些缺陷，需要经过大规模的发布测试来进一步消除。这一版本通常由软件公司免费发布，用户可从相关的站点下载。通过一些专业爱好者的测试，将结果反馈给开发者，开发者们再进行有针对性的修改。该版本也不适合一般用户安装。

γ（gamma）版
该版本已经相当成熟了，与即将发行的正式版相差无几，如果用户实在等不及了，尽可以装上一试。

release 最终释放版
该版本意味“最终释放版”，在出了一系列的测试版之后，终归会有一个正式版本，对于用户而言，购买该版本的软件绝对不会错。该版本有时也称为标准版。一般情况下，release不会以单词形式出现在软件封面上，取而代之的是符号 ® ，如 windows nt® 4.0、ms-dos® 6.22 等。

项目流程

项目启动

​ 产品经理和领导确定项目的方向，确认开发团队组成，

需求阶段

​ 产品对需求的说明讲解，研发评估可行性

设计阶段

​ 原型图设计

开发阶段

​ 1、服务器端：编写接口协议文档，服务器环境架设（国内一般都是用阿里云服务器，国外一般用亚马逊），设计数据库和编写API接口。

​ 2、APP端：根据UI设计图进行界面开发，UI开发完成则进入和服务端接口对接，通过服务端的接口获取数据，编写功能上的逻辑代码。

​ 3、Web管理端：根据前端的业务逻辑，后台会有相应的功能与之匹配，同样需要编写功能上的逻辑代码。

测试阶段

​ 对项目进行测试，测完修bug

系统上线

十八、git命令

# 显示当前的Git配置
$ git config --list

# 编辑Git配置文件
$ git config -e [--global]

# 设置提交代码时的用户信息
$ git config [--global] user.name "[name]"
$ git config [--global] user.email "[email address]"
# 添加指定文件到暂存区
$ git add [file1] [file2] ...
# 添加当前目录的所有文件到暂存区
$ git add .
# 提交暂存区到仓库区
$ git commit -m [message]
# 使用一次新的commit，替代上一次提交
# 如果代码没有任何新变化，则用来改写上一次commit的提交信息
$ git commit --amend -m [message]
# 列出所有本地分支
$ git branch
# 新建一个分支，但依然停留在当前分支
$ git branch [branch-name]

# 新建一个分支，并切换到该分支
$ git checkout -b [branch]
# 合并指定分支到当前分支
$ git merge [branch]
# 删除分支
$ git branch -d [branch-name]
# 显示有变更的文件
$ git status
# 显示当前分支的版本历史
$ git log
# 下载远程仓库的所有变动
$ git fetch [remote]
# 取回远程仓库的变化，并与本地分支合并
$ git pull [remote] [branch]

# 上传本地指定分支到远程仓库
$ git push [remote] [branch]

有bug怎么调试代码

使用浏览器的调试工具。例如chorm的开发者工具。使用控制台语句console.log() alert() debugger(在代码中设置断点） 看在console控制面板中输出了什么结果或者错误。一些语法错误可以通过lint来检查。例如变量声明但未调用。

版本号管理策略

一、GNU 风格的版本号管理策略：

1．项目初版本时，版本号可以为 0.1 或 0.1.0, 也可以为 1.0 或 1.0.0，如果你为人很低调，我想你会选择那个主版本号为 0 的方式；
2．当项目在进行了局部修改或 bug 修正时，主版本号和子版本号都不变，修正版本号加 1；
\3. 当项目在原有的基础上增加了部分功能时，主版本号不变，子版本号加 1，修正版本号复位为 0，因而可以被忽略掉；
4．当项目在进行了重大修改或局部修正累积较多，而导致项目整体发生全局变化时，主版本号加 1；
5．另外，编译版本号一般是编译器在编译过程中自动生成的，我们只定义其格式，并不进行人为控制。

二、Window 下的版本号管理策略：
1．项目初版时，版本号为 1.0 或 1.00；
\2. 当项目在进行了局部修改或 bug 修正时，主版本号和子版本号都不变，修正版本号加 1；
\3. 当项目在原有的基础上增加了部分功能时，主版本号不变，子版本号加 1，修正版本号复位为 0，因而可以被忽略掉；
\4. 当项目在进行了重大修改或局部修正累积较多，而导致项目整体发生全局变化时，主版本号加 1；
\5. 另外 , 编译版本号一般是编译器在编译过程中自动生成的，我们只定义其格式，并不进行人为控制。

另外，还可以在版本号后面加入 Alpha、Beta、Gamma、Current、RC (Release Candidate)、Release、Stable 等后缀，在这些后缀后面还可以加入 1 位数字的版本号。

α（alphal） 内部测试版
α版，此版本表示该软件仅仅是一个初步完成品，通常只在软件开发者内部交流，也有很少一部分发布给专业测试人员。一般而言，该版本软件的 bug 较多，普通用户最好不要安装。

β（beta）外部测试版
该版本相对于α版已有了很大的改进，消除了严重的错误，但还是存在着一些缺陷，需要经过大规模的发布测试来进一步消除。这一版本通常由软件公司免费发布，用户可从相关的站点下载。通过一些专业爱好者的测试，将结果反馈给开发者，开发者们再进行有针对性的修改。该版本也不适合一般用户安装。

γ（gamma）版
该版本已经相当成熟了，与即将发行的正式版相差无几，如果用户实在等不及了，尽可以装上一试。

release 最终释放版
该版本意味“最终释放版”，在出了一系列的测试版之后，终归会有一个正式版本，对于用户而言，购买该版本的软件绝对不会错。该版本有时也称为标准版。一般情况下，release不会以单词形式出现在软件封面上，取而代之的是符号 ® ，如 windows nt® 4.0、ms-dos® 6.22 等。

十八、git命令

# 显示当前的Git配置
$ git config --list
# 编辑Git配置文件
$ git config -e [--global]
# 设置提交代码时的用户信息
$ git config [--global] user.name "[name]"
$ git config [--global] user.email "[email address]"
# 添加指定文件到暂存区
$ git add [file1] [file2] ...
# 添加当前目录的所有文件到暂存区
$ git add .
# 提交暂存区到仓库区
$ git commit -m [message]
# 使用一次新的commit，替代上一次提交
# 如果代码没有任何新变化，则用来改写上一次commit的提交信息
$ git commit --amend -m [message]
# 列出所有本地分支
$ git branch
# 新建一个分支，但依然停留在当前分支
$ git branch [branch-name]
# 新建一个分支，并切换到该分支
$ git checkout -b [branch]
# 合并指定分支到当前分支
$ git merge [branch]
# 删除分支
$ git branch -d [branch-name]
# 显示有变更的文件
$ git status
# 显示当前分支的版本历史
$ git log
# 下载远程仓库的所有变动
$ git fetch [remote]
# 取回远程仓库的变化，并与本地分支合并
$ git pull [remote] [branch]
# 上传本地指定分支到远程仓库
$ git push [remote] [branch]

本文地址：https://blog.csdn.net/weixin_42043486/article/details/109275751