前端，又称Web前端。是指计算机Web应用程序（网站）的前台页面，在我们打开一个网站所看到网页界面的内容以及交互体验，一般都是由前端工程师进行开发设计的页面，该内容属于前端部分。
想要真正弄懂前端，那么还需要再理解一下后端，因为这两者是相对，也是相辅相成才形成一个网站程序。
前端要用到的动态数据（或API数据），是由后端开发提供的。后端开发一般会采用PHP、JAVA、Python等其中一种开发语言，以及数据库技术。
比如：使用小程序开发者工具开发的这一部分代码，是属于前端部分。小程序开发是前后端分离的，前端获取动态数据是通过后端的API进行请求。
今天小编罗列了一下前端学习必须要了解的二十个知识点：
一、HTML
1.对 HTML 语义化的理解
见标签知其意思 header main nav aside footer h1-h6 ul li
优点：结构清晰、方便搜索引擎搜素（seo）、方便理解维护
2.区别：src 和 href
src
比如常见的 这里的 src 所指的是这个图片的所在的位置路径，script 和 iframe 也是，src 被解析的时候，会进行下载并编译，同时会暂停该文档其他资源的下载和处理，所以 js 文件的载入最好在 body 中，而不是在 head 中。
href
href被添加，元素会被识别为 css 文件进行处理，且不会停止其它资源的运行。所以建议用 link 加载 css 文件，而不是 @import。
常用的有：
超链接
引用css样式
3.DOCTYPE 的作用
作用：DOCTYPE 是文档类型 document type 的缩写。主要作用是告诉浏览器的解析器使用哪种 HTML 规范来解析页面。而如果 DOCTYPE 缺失，或形式不正确，会导致 html 文档或 HTML 文档不是以标准模式（浏览器对页面的渲染具有统一的规范）而是以混杂模式（不同浏览器有不同的的页面渲染）运行。
4.HTML5 的新特性
简化了文档声明，HTML5 的文档声明只需要
简化了编码声明，只需要
删除了一些能用 CSS 代替的就标签，比如
增加了一些新标签，改善文档结构的
增加了一些新的 JavaScript 的 API ，比如地理定位、请求动画帧、离线存储等
配合一些框架，例如 cordova 和 react 等，可以开发基于 HTML5 的移动应用。
5.script 标签中的 defer 和 async
作用：平常的 script 标签如果直接使用， html 会按顺序下载和执行脚本，并阻碍后续 DOM 的渲染。如果 script 发生延迟，就会阻碍后续的渲染，使得页面白屏。
defer
异步下载文件
不阻碍 dom 的渲染
如果有多个 defer 会按顺序执行
执行顺序：在文档渲染后执行，在 DOMContentLoader 事件调用前执行。
2.async
异步下载文件
不影响 dom
如果有多个 defer 谁快先执行谁
推荐的应用场景：
defer：如果你的脚本代码依赖于页面中的 dom 元素（文档是否解析完毕），并且也不会产生其他脚本需要的数据。
async：如果你的脚本并不关心页面中的 dom 元素（文档是否解析完毕），并且也不会产生其他脚本需要的数据。
6. 行内元素 块级元素 空元素
行内元素：a \ b \ span \ input \ img \ strong \ br \ em \ big \ small
块元素：div \ ul \ ol \ li \ h1-h6 \ p \ dl \ dt \ address
空元素：img \ input \ link \ meta
7.meta 标签
meta 元素被用于规定页面的描述、关键词、文档的作者、最后的修改时间以及其他元数据。标签始终位于 head 元素中。
meta 属性：必选属性 content-进行描述说明的， 相当于键值；可选属性 http-equiv、name 和 scheme, http-equiv-添加 http 头部内容，name-浏览器解析
包括：
①charset charset定义使用的字符编码
②SEO
#网页关键词
#网页描述
③viewport
8.JPG和PNG的区别
1.JPG是有损压缩格式，PNG是无损压缩格式
2.JPG图片没有透明背景，PNG有透明背景
二、CSS
1.CSS 选择器，优先级
Import>内联1000>id100>class==伪类==属性选择器10>元素选择器 伪元素选择器
2.CSS 动画
transition和animation的区别
大部分都是相同，都是随着时间改变元素的属性值，
他们的主要区别是transition需要触发一个事件才能改变属性，而animation不需要触发任何事件就可以实行。
transition为两帧，从from…to… 而animation可以一帧一帧的通过keyframes。
3.CSS选择器效率从高到低的排序如下：
Id>class>元素选择器>兄弟选择器>子代选择器>后代选择器>属性选择器>伪元素 伪类
ID选择器 比如#header
类选择器 比如.promo
元素选择器 比如 div
兄弟选择器 比如 h2 + p
子选择器 比如 li > ul
后代选择器 比如 ul a 7. 通用选择器 比如 *
属性选择器 比如 type = “text”
伪类/伪元素选择器 比如 a:hover
4.flex 布局
flex是css3新增的一种布局方式,我们可以同时设置一个元素的display属性值设置为flex,
从而使它成为一个flex容器，它的所有子元素都成为它的项目。
一个容器默认有两条轴，一个水平轴，一条是与主轴垂直的交叉轴
flex-direction来指定主轴的方向。
justify-content来指定标签在主轴的排列方式，
使用align-items来指定元素在交叉轴的排序方式。
还可以使用flex-wrap来规定当一行排列不下时的换行方式。
对于一个容器的项目，
使用order属性来指定项目的排列顺序，
flex-grow来指定当前排序空间有剩余的时候，项目放大比例。
flex-shrink来指定当前排序空间不足时， 项目缩小比例。
5.position 有几个值，absolute 是相对于谁的定位
absolute ：生成绝对定位的元素，相对于最近一级的父元素，且该父元素不能是static，来进行定位。
fixed：（老IE不支持）生成绝对定位的元素，通常相对于浏览器窗口或 frame 进行定位。
relative：生成相对定位的元素，相对于其在普通流中的位置进行定位。
static：默认值。没有定位，元素出现在正常的流中
三.Javascript
1.原始值和引用值类型及区别
原始值（简单数据类型）：存储在栈中的简单数据段，也就是说，它们的值直接存储在变量访问的位置。
包含五种简单数据类型：undefined、null、boolean、number 和 string ；可以通过typeof 运算符来判断一个值是否在某种类型的范围内，如果它是原始类型，还可以判断它表示哪种原始类型。
引用值（复杂数据类型）：存储在堆中的对象，放在变量的栈空间中的值是该对象存储在堆中的地址，也就是说，存储在变量处的值是一个指针（内存地址），指向存储对象的堆内存中。
包含：Object、function、array等。
2.JavaScript 数据类型以及 typeof 返回值
数据类型：number、string、null、boolean、object、undefined、symbol
typeof x undefined
typeof undefined undefined
typeof true boolean
function A() {}
typeof A function
const arr = []
const obj = {}
typeof arr object
typeof obj object
3.类数组与数组的区别：
相同点：
都可用下标访问每个元素，都有length属性。
不同点：
数组对象的类型是Array,类数组对象的类型是object;
类数组不具有数组所具有的方法，
数组遍历可以用 for in 和 for 循环
类数组只能用 for 循环遍历。
常见的类数组有: 函数的参数 arguments，arguments是一个类数组对象，包含着传入函数中的所有实参集合
4.数组常用的api
字符转换 toString 方法将数组表示为字符串
join（）方法，将数组里 各元素组合成字符串，但连接符可自己指定
unshift方法，是将元素插入数组的首部。
shift方法移除数组的第一个元素并将其返回
push方法一次可添加单个或多个元素到数组末端，也可以添加数组。
pop方法的作用是移除数组末尾的一个元素
5.bind、call、apply的区别：
三者都是用于改变函数体内this的指向，但是bind与apply和call的最大的区别是：bind不会立即调用，而是返回一个新函数，称为绑定函数，其内的this指向为创建它时传入bind的第一个参数，而传入bind的第二个及以后的参数作为原函数的参数来调用原函数
apply和call都是为了改变某个函数运行时的上下文而存在的（就是为了改变函数内部this的指向）；apply和call的调用返回函数执行结果；
如果使用apply或call方法，那么this指向他们的第一个参数，apply的第二个参数是一个参数数组，call的第二个及其以后的参数都是数组里面的元素，就是说要全部列举出来；
Bind:返回绑定函数，传入参数数列
Apply:传入参数数组
Call:传入参数数列
6.new原理
mdn上把内部操作大概分为4步：
创建一个空的简单JavaScript对象（即{ } ）；
链接该对象（即设置该对象的构造函数）到另一个对象 ；(因此this就指向了这个新对象)
执行构造函数中的代码（为这个新对象添加属性）；
如果该函数没有返回对象，则返回this。
7.闭包
有权访问另一个函数作用域中的变量的函数；
第一，闭包是一个函数，而且存在于另一个函数当中
第二，闭包可以访问到父级函数的变量，且该变量不会销毁
作用1：隐藏变量，避免全局污染
作用2：可以读取函数内部的变量
8.浅拷贝与深拷贝
浅拷贝只复制指向某个对象的指针，而不复制对象本身，新旧对象还是共享同一块内存。但深拷贝会另外创造一个一模一样的对象，新对象跟原对象不共享内存，修改新对象不会改到原对象。
赋值和浅拷贝的区别
当我们把一个对象赋值给一个新的变量时，赋的其实是该对象的在栈中的地址，而不是堆中的数据。
浅拷贝是按位拷贝对象，它会创建一个新对象，这个对象有着原始对象属性值的一份精确拷贝。如果属性是基本类型，拷贝的就是基本类型的值；如果属性是内存地址（引用类型），拷贝的就是内存地址
浅拷贝的实现方式
Object.assign()
Object.assign() 进行的是浅拷贝，拷贝的是对象的属性的引用，而不是对象本身。当object只有一层的时候，是深拷贝
Array.prototype.concat()
修改新对象会改到源对象
9.作用域
为可访问变量，对象，函数的集合
作用域链是[[Scope]]中所存储的执行期上下文的集合
一个执行期上下文定义了一个函数执行的环境
10.ajax的请求过程
一、原生JS中的Ajax
1、使用ajax发送数据的步骤
第一步：创建异步对象
var xhr = new XMLHttpRequest();
第二步：设置 请求行 open(请求方式，请求url):
// get请求如果有参数就需要在url后面拼接参数，
// post如果有参数，就在请求体中传递 xhr.open("get","validate.php?username="+name)
xhr.open("post","validate.php");
第三步：设置请求（GET方式忽略此步骤）头:setRequestHeader()
// 1.get不需要设置
// 2.post需要设置请求头：Content-Type:application/x-www-form-urlencoded
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
第四步：设置请求体 send()
// 1.get的参数在url拼接了，所以不需要在这个函数中设置
// 2.post的参数在这个函数中设置(如果有参数)
xhr.send(null) xhr.send("username="+name);
第五步：让异步对象接收服务器的响应数据
这些内容是之后就业必须要掌握的技术，小编这里也准备了一些前端相关的自学视频资料以及其他编程语言的学习资料（Java、Python、大数据等），有全系列的内容，也有部分的知识点让你查缺补漏，有需要的话可以关注私信我哦~