HTTP协议底层由TCP协议和IP协议构建

TCP

1. TCP 和 UDP 的区别是什么
   简答：TCP 可靠、面向连接、慢一点，但注重安全性，适应于网页、邮件；
   UDP 不可靠，无连接、较快，安全性低一点，适应于视频、语音。

2. TCP 的三次握手指的是什么
   简答：每次建立连接前，客户端和服务端之前都要先进行三次对话才开始正式传输内容，三次对话大概是这样的：

   1 2 3 4

   1\. 客户端：我要连接你了，可以吗 2\. 服务端：嗯，我准备好了，连接我吧 3\. 客户端：那我连接你咯。 4\. 开始后面步骤

   上面内容足以应付前端面试中关于 TCP 的考题，如果你想更了解 TCP 可以看 此文

IP

1. 外网IP
   你的路由器自己会有一个外网IP，像访问的腾讯、阿里的网站就是租用了很多外网IP
2. 内网IP
   而你在家用的手机、电脑用的就是内网IP，路由器也会给自己一个内网IP，一般是：192.168.1.1
3. 内网和外网之间不能互相访问，但是外网和外网之间可以访问，所以你在家上网就是通过路由器的外网和其他外网连接，你访问的网站在外网发送信息到你的路由器上，然后路由器将信息转到内网发送到你电脑上
4. 本地 IP：127.0.0.1
5. 特别特殊的 IP：0.0.0.0，它不表示任何设备。

端口

一个端口对应一种服务
HTTP服务用80端口
HTTPS服务用443端口
FTP服务用21端口
使用HTTP协议访问一个IP，要同时提供IP和端口号，平常没填是因为浏览器默认帮你加了

WWW的发明

Tim Berners-Lee（下文中称为李爵士） 在 1989 年至 1992 年间，发明了 WWW（World Wide Web），一种适用于全世界的网络。

主要包含三个概念

1. URI，俗称网址（能让你访问一个页面）
2. HTTP，两个电脑之间传输内容的协议（让你能下载这个页面）
3. HTML，超级文本，主要用来做页面跳转（让你能看懂这个页面）

URI是什么？

URI：统一资源标识符（Uniform Resource Identifier）

URI分为URL和URN，我们一般使用URL作为网址

URN

URN：统一资源名称（Uniform Resource Name）

ISBN: 9787115275790 就是一个 URN，通过 URN 你可以确定一个「唯一的」资源，ISBN: 9787115275790 对应的资源的是《JavaScript 高级程序设计（第三版）》这本书。（通过位置去找，广州某某路某某小区）

URL

URL：统一资源定位符（Uniform Resource Locator）

通过 URL 你可以确定一个「唯一的」地址（网址）。（通过名字去找）

URL还包括端口，路径不对应任何文件，路径跟文件不是同级关系

域名

• .com：顶级域名（一级域名）
• baidu.com：二级域名
• www.baidu.com：三级域名

DNS

DNS：域名系统（Domain Name System）

• 输入域名
• 输出IP

DNS在我们直接调用网站的名字以后就会将像zh.wikipedia.org 一样便于人类使用的名字转化成像198.35.26.96 一样便于机器识别的IP地址。

1
2

nslookup baidu.com
ping baidu.com

请求与响应

• 浏览器负责发起请求
• 服务器在80端口接收请求
• 服务器负责返回内容（响应）
• 浏览器负责下载响应内容

HTTP 的作用就是指导浏览器和服务器如何进行沟通。

##HTTP入门

• curl命令的使用
• HTTP请求
• HTTP响应

HTTP(HyperText Transfer Protocol)超文本传输协议，它教客户端如何请求、服务器如何响应。

###curl命令的使用

####1. GET请求

1

curl -s -v -H "xxx: yyy" -- "https://www.baidu.com"

如果不清楚,如何使用curl命令的话,可以查看常用命令行的使用及explainshell.com的使用技巧,这里就不多讲,废话少说,直接进入正题。

• -s 不要显示进度条
• -v 要显示请求和响应
• -H 添加响应头
• https://www.baidu.com 请求的网站
• "xxx: yyy"可以不用写的,下同

不知道为什么在windows下先把要下载的内容放在前面,还有其他东西还特别多,这里就展示重要的内容

上面图片中出现的*代表是注释,>代表的是请求的内容,<代表的是响应的内容

请求的内容:
| 请求的内容 | 含义 |
| ———————– | ——————————————- |
| GET / HTTP/1.1 | 获取根目录,使用协议是HTTP1.1 |
| Host: www.baidu.com | 请求的网址 |
| User-Agent: curl/7.59.0 | 用的软件是curl/7.59.0,发起请求 |
| Accept: / | 接受你返回的所有内容 |
| xxx: yyy | 上面命令有的这个,下面请求的内容也会显示这个 |
| | 回车 |
响应的内容:(下面的响应内容是我能够理解,有一些不能理解,这个就没有写出来)
| 响应的内容 | 含义 |
| ———————– | ———————————————– |
| HTTP/1.1 200 OK | 协议是HTTP,版本号是1.1 状态码是200 状态解释是OK |
| Content-Length: 2443 | 响应内容的长度 |
| Content-Type: text/html | Content-Type标注响应内容的格式 |
| | 回车 |

####2. POST请求

1

curl -X POST -s -v -H "xxx: yyy" -- "https://www.baidu.com"

请求的内容:

1
2
3
4
5
6

> POST / HTTP/1.1
> Host: www.baidu.com
> User-Agent: curl/7.59.0
> Accept: */*
> xxx: yyy
>

响应的内容:

1
2
3
4
5
6
7
8

< HTTP/1.1 302 Found
< Connection: Keep-Alive
< Content-Length: 17931
< Content-Type: text/html
< Date: Sun, 07 Oct 2018 01:56:57 GMT
< Etag: "54d9748e-460b"
< Server: bfe/1.0.8.18
<

####3. POST请求带数据

1

curl -X POST -d "1234567890" -s -v -H "xxx: yyy" -- "https://www.baidu.com"

请求的内容:

1
2
3
4
5
6
7
8

> POST / HTTP/1.1
> Host: www.baidu.com
> User-Agent: curl/7.59.0
> Accept: */*
> xxx: yyy
> Content-Length: 10
> Content-Type: application/x-www-form-urlencoded
>

响应的内容:

1
2
3
4
5
6
7
8
9

< HTTP/1.1 302 Found
< Connection: Keep-Alive
< Content-Length: 17931
< Content-Type: text/html
< Date: Sun, 07 Oct 2018 02:00:10 GMT
< Etag: "54d9748e-460b"
* Server bfe/1.0.8.18 is not blacklisted
< Server: bfe/1.0.8.18
<

###HTTP请求

####1.HTTP请求的格式(包含的部分)
| 部分 | 内容 |
| ——- | ———————————————– |
| 第1部分 | 动词 路径 协议/版本 |
| 第2部分 | Key1: value1 |
| 第2部分 | Key2: value2 |
| 第2部分 | Content-Type: application/x-www-form-urlencoded |
| 第2部分 | Host: www.baidu.com |
| 第2部分 | User-Agent: curl/7.54.0 |
| 第3部分 | |
| 第4部分 | 要上传的数据 |

小Tips

• 请求最多包含4部分,最少包含3部分(第4部分可以为空)
• 第3部分永远都是一个回车(\n),分隔第2部分和第4部分
• 动词有GET(获取) POST(上传) PUT(整体更新) PATCH(局部更新) DELETE(删除) HEAD OPTIONS等
• 这个的路径包含「查询参数」，但不包括「锚点」,跟URL的不同
• 如果你没有写路径,那么路径默认为/,如果你请求的网址是https://www.baidu.com/s?wd=hello,那么路径是/s?wd=hello
• 第 2 部分中的 Content-Type 标注了第 4 部分的格式
  ####2.用 Chrome 开发者工具查看 HTTP 请求内容
  打开浏览器,右键点击检查/按F12,打开Chrome 开发者工具
  
  在浏览器的地址栏输入网址
  
  在Network点击查看Request Headers,点击「view source」,看到请求的前三部分
  
  
  

4. 如果(POST)才有请求的第四部分,那么在FormData或 Payload 里面可以看到
   ###HTTP响应
   ####1.HTTP响应的格式(包含的部分)
   | 部分 | 内容 |
   | ——- | ————————— |
   | 第1部分 | 协议/版本号 状态码 状态解释 |
   | 第2部分 | Key1: value1 |
   | 第2部分 | Key2: value2 |
   | 第2部分 | Content-Length: 2443 |
   | 第2部分 | Content-Type: text/html |
   | 第3部分 | |
   | 第4部分 | 要下载的内容 |
   PS.

• 状态码要背，是服务器对浏览器说的话
  • 1xx 不常用
  • 2xx 表示成功(200 普通成功,204 创建成功(POST))
  • 3xx 表示滚吧(301永久搬走了，第二部分会告诉新地址；302暂时搬走了(临时不存在)，我还会回来这里哒；304这次的内容和上一次说的内容一样，都是一种类型的滚)
  • 4xx 表示你丫错了
  • 5xx 表示好吧，我错了
• 状态解释没什么用
• GET 请求和 POST 请求对应的响应可以一样，也可以不一样
  ####2.用 Chrome 开发者工具查看 HTTP 响应内容
  过程跟请求类似,这里就不多说啦,不同之处已经加粗了

1. 打开浏览器,右键点击检查/按F12,打开Chrome 开发者工具
2. 在浏览器的地址栏输入网址
3. 在Network点击查看 Response Headers,点击「view source」,看到请求的前三部分
4. 查看 Response 或者 Preview，你会看到响应的第 4 部分
   

常见的状态码（背下来）

状态码是服务器对浏览器说的话

200 OK

请求已成功，请求所希望的响应头或数据体将随此返回。实际的响应将取决于所使用的请求方法。在GET请求中，响应将包含与请求的资源相对应的实体。在POST请求，响应将包含描述或操作结果的实体。

201 Created

请求已经被实现，而且有一个新的资源已经依据请求的需要而建立，且其URI已经随Location头信息返回。假如需要的资源无法及时创建的话，应当返回’202 Accepted‘。

202 Accepted

服务器已接收请求，但尚未处理。最终该请求可能会也可能不会被执行，并且可能在处理发生时被禁止。

203 Non-Authoritative Information（自HTTP / 1.1起）

服务器是一个转换代理服务器（transforming proxy，例如网络加速器），以200 OK状态码为起源，但回应了原始响应的修改版本。

204 No Content

服务器成功处理了请求，没有返回任何内容。表示服务器接收到的请求已经处理完毕，但浏览器页面不会刷新。

300 Multiple Choices

被请求的资源有一系列可供选择的回馈信息，每个都有自己特定的地址和浏览器驱动的商议信息。用户或浏览器能够自行选择一个首选的地址进行重定向。除非这是一个HEAD请求，否则该响应应当包括一个资源特性及地址的列表的实体，以便用户或浏览器从中选择最合适的重定向地址。这个实体的格式由Content-Type定义的格式所决定。浏览器可能根据响应的格式以及浏览器自身能力，自动作出最合适的选择。

301 Moved Permanently

请求的网页已永久移动到新位置，永久性重定向

被请求的资源已永久移动到新位置，并且将来任何对此资源的引用都应该使用本响应返回的若干个URI之一。如果可能，拥有链接编辑功能的客户端应当自动把请求的地址修改为从服务器反馈回来的地址。

302 Found

HTTP/1.0就有的，临时性重定向，POST方法的重定向在未询问用户的情况下就会变成GET

要求客户端执行临时重定向（原始描述短语为“Moved Temporarily”）。由于这样的重定向是临时的，客户端应当继续向原有地址发送以后的请求。只有在Cache-Control或Expires中进行了指定的情况下，这个响应才是可缓存的。

303 See Other

HTTP/1.1新加的，都是临时重定向，303和302一样，POST重定向为GET。

对应当前请求的响应可以在另一个URI上被找到，当响应于POST（或PUT / DELETE）接收到响应时，客户端应该假定服务器已经收到数据，并且应该使用单独的GET消息发出重定向。这个方法的存在主要是为了允许由脚本激活的POST请求输出重定向到一个新的资源。这个新的URI不是原始资源的替代引用。同时，303响应禁止被缓存。当然，第二个请求（重定向）可能被缓存。

304 Not Modified

表示自从上次请求后，网页未被修改过(这次的内容和上一次说的内容一样，都是一种类型的滚)

表示资源在由请求头中的If-Modified-Since或If-None-Match参数指定的这一版本之后，未曾被修改。在这种情况下，由于客户端仍然具有以前下载的副本，因此不需要重新传输资源。

400 Bad Request

客户端中存在语法错误。

由于明显的客户端错误（例如，格式错误的请求语法，太大的大小，无效的请求消息或欺骗性路由请求），服务器不能或不会处理该请求。

401 Unauthorized

用户未授权，需要用户验证。

类似于403 Forbidden，401语义即“未认证”，即用户没有必要的凭据。该状态码表示当前请求需要用户验证。该响应必须包含一个适用于被请求资源的WWW-Authenticate信息头用以询问用户信息。客户端可以重复提交一个包含恰当的Authorization头信息的请求。如果当前请求已经包含了Authorization证书，那么401响应代表着服务器验证已经拒绝了那些证书。如果401响应包含了与前一个响应相同的身份验证询问，且浏览器已经至少尝试了一次验证，那么浏览器应当向用户展示响应中包含的实体信息，因为这个实体信息中可能包含了相关诊断信息。

注意：当网站（通常是网站域名）禁止IP地址时，有些网站状态码显示的401，表示该特定地址被拒绝访问网站。

402 Payment Required

该状态码是为了将来可能的需求而预留的。该状态码最初的意图可能被用作某种形式的数字现金或在线支付方案的一部分，但几乎没有哪家服务商使用，而且这个状态码通常不被使用。如果特定开发人员已超过请求的每日限制，Google Developers API会使用此状态码。

403 Forbidden

服务器已经理解请求，但拒绝执行

服务器已经理解请求，但是拒绝执行它。与401响应不同的是，身份验证并不能提供任何帮助，而且这个请求也不应该被重复提交。如果这不是一个HEAD请求，而且服务器希望能够讲清楚为何请求不能被执行，那么就应该在实体内描述拒绝的原因。当然服务器也可以返回一个404响应，假如它不希望让客户端获得任何信息。

404 Not Found

服务器找不到请求的网页。

请求失败，请求所希望得到的资源未被在服务器上发现，但允许用户的后续请求。没有信息能够告诉用户这个状况到底是暂时的还是永久的。假如服务器知道情况的话，应当使用410状态码来告知旧资源因为某些内部的配置机制问题，已经永久的不可用，而且没有任何可以跳转的地址。404这个状态码被广泛应用于当服务器不想揭示到底为何请求被拒绝或者没有其他适合的响应可用的情况下。

500 Internal Server Error

服务器遇到错误，无法完成请求。

通用错误消息，服务器遇到了一个未曾预料的状况，导致了它无法完成对请求的处理。没有给出具体错误信息。

501 Not Implemented

服务器不支持当前请求所需要的某个功能。当服务器无法识别请求的方法，并且无法支持其对任何资源的请求。

502 Bad Gateway

作为网关或者代理工作的服务器尝试执行请求时，从上游服务器接收到无效的响应。

503 Service Unavailable

由于临时的服务器维护或者过载，服务器当前无法处理请求。这个状况是暂时的，并且将在一段时间以后恢复。如果能够预计延迟时间，那么响应中可以包含一个Retry-After头用以标明这个延迟时间。如果没有给出这个Retry-After信息，那么客户端应当以处理500响应的方式处理它。

504 Gateway Timeout

作为网关或者代理工作的服务器尝试执行请求时，未能及时从上游服务器（URI标识出的服务器，例如HTTP、FTP、LDAP）或者辅助服务器（例如DNS）收到响应。

注意 Windows 有个臭毛病

视频里的路径是 /Users/frank/Desktop ，Windows 上这个路径会报错。
你要把这个路径写成 Windows 的专属格式

1. /c/Users/frank/Desktop
2. C:\\Users\\frank\\Desktop
3. C:\Users\frank\Desktop
   具体是哪一个路径各种情况不一样，我就不细讲了，你把三个路径全试一遍，哪个能用用哪个就行了。

脚本

脚本就是给计算机照着做的

写一个Bash脚本

1. 找个地方新建文件，后缀随意，一般来说脚本的后缀是.sh,把脚本放在~/local目录里。（我知道你没有这个目录，创建一下这个目录就行啦）
   • mkdir ~/.local
   • cd ~/local(请注意倒车，此处需要留心)
   • touch demo.txt
2. 编辑demo.txt，内容如下：

1
2
3
4
5
6

pwd #确认一下当前路径是不是~/local
mkdir demo #在当前目录下创建demo文件夹
cd demo #进入demo文件夹里，切换所在目录
mkdir css js	#创建css，js文件夹
touch index.html css/style.css js/main.js	#新建相应的文件
exit	#退出，写不写都可以

3. （Windows 用户请跳过这一步）给 demo.txt 添加执行权限 chmod +x demo.txt
4. 在任意位置执行sh ~/local/demo.txt,即可运行此脚本
   • cd ~/Desktop
   • sh ~/local/demo.txt
   • 当前目录里多出一个demo目录，demo目录里面还有一些文件，这个demo.txt就是你写的第一个Bash脚本
5. 将~/local添加到PATH里
   1. cd ~/local; pwd 得到 local的绝对路径
   2. 临时设置 PATH
      1. 运行 export PATH="local的绝对路径:$PATH"，这句话是把 local 目录加到 PATH 里，注意替换 local的绝对路径
      2. 这时你只要运行 demo.txt 就相等于运行 sh ~/local/demo.txt 了（你可能会看到 File exists 的报错，不用管它）
   3. 永久设置PATH，上面的 PATH 在你重启 Bash 之后就会失效，如果你希望 PATH 一直生效，看下面
      1. 创建 ~/.bashrc：touch ~/.bashrc
      2. 编辑 ~/.bashrc：start ~/.bashrc（Windows下使用start，Mac使用open）
      3. 在编辑器里添加一行字：export PATH="local的绝对路径:$PATH"
      4. source ~/.bashrc
      5. 之前你要运行 sh ~/local/demo.txt，现在你只需要运行 demo.txt
6. 如果你觉得 demo.txt 的后缀 .txt 没什么用，可以用下面的命令删掉它
   1. mv ~/local/demo.txt ~/local/demo
   2. 现在你只要运行 demo 就能执行该脚本了。

细节

1. PATH 的作用
   你每次在 Bash 里面输入一个命令时（比如 ls、cp、demo），Bash 都会去 PATH 列表里面寻找对应的文件，如果找到了就执行。
2. 使用 type demo 可以看到寻找过程
3. 使用 which demo 可以看到寻找结果
4. 文件后缀的作用：毫无作用

参数

我们让目录名是可变的吧。

demo.txt 目录名

1
2
3
4
5

mkdir $1	#$1 表示你传的第一个参数
cd $1
mkdir css js
touch index.html css/style.css js/main.js
exit

判断目录是否已存在

1
2
3
4
5
6
7
8
9
10
11

if [ -d $1 ]; then	#-d $1 可以判断目录是否存在
	echo 'error: dir exists'
	exit 1
else
	mkdir $1
	cd $1
	mkdir css js
	touch index.html css/style.css js/main.js
	echo 'success'
	exit 0
fi

返回值

• exit 0 表示没有错误
• exit 1 表示错误代码为 1

小Tips

• 命令1 && 命令2：命令1执行成功后，就执行命令2
• 命令1 || 命令2：命令1执行失败后，就执行命令2
• 命令1; 命令2 ：命令1执行完后，就执行命令2

Node.js脚本

• 我们在 Bash 命令行里输入 Bash 命令，也可以在 Node.js 命令行里输入 JS 命令（Ctrl + D 退出）
• Bash 脚本能做的事情，JS 脚本也能做。(sh demo.sh 对应 node demo.js）

用JS切换目录

1
2
3
4

console.log(process.cwd())	//打印当前目录
// process.chdir('~/Desktop'); // 这句话不行的，因为 JS 不认识 ~ 目录
process.chdir('/Users/frank/Desktop')
//上面这条语句在Windows上有毛病，要修改

用JS脚本创建目录

Google nodejs create dir

1
2

let fs = require('fs');
fs.mkdirSync('demo');	//创建demo文件夹

用JS脚本创建文件

Google nodejs create file

1
2

let fs = require('fs');
fs.writeFileSync('./index.html','');	//创建index.html

用JS脚本重写demo.sh（Bash脚本）

1. 创建~/local/jsdemo.js,内容如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14

var fs = require('fs')

var dirName = process.argv[2] // 你传的参数是从第 2 个开始的

fs.mkdirSync("./" + dirName) // mkdir $1
process.chdir("./" + dirName) // cd $1 这一步很重要
fs.mkdirSync('css') // mkdir css
fs.mkdirSync('js') // mkdir js

fs.writeFileSync("./index.html", "")
fs.writeFileSync("css/style.css", "")
fs.writeFileSync("./js/main.js", "")

process.exit(0)

2. （Windows 用户跳过这一步）给 jsdemo.js 加上执行权限 chmod +x ~/local/jsdemo.js
3. cd ~/Desktop
4. node ~/local/jsdemo.js zzz，就可以看到 zzz 目录创建成功了

shebang

不加 node 也能执行呢（也就是指定当前脚本的执行环境），可以，在 jsdemo.js 第一行加上这一句即可：

1

#!/usr/bin/env node

1. 然后你就可以直接用 ~/local/jsdemo.js zzz 了（省得输入 node 了）。
2. 如果你已经把 ~/local 加入了 PATH，那么甚至可以直接输入 jsdemo.js zzz 来执行。
3. 如果你再把 jsdemo.js 的后缀 .js 去掉，就可以直接 jsdemo zzz 了。

总结

1. 脚本就是给机器一行一行执行的文本
2. Bash脚本有Bash脚本的语法，Node.js脚本有JS语法，实现的功能都差不多
3. Bash 脚本的语法挺奇葩的，比如 $1 $# 等符号
4. 不用特别去学 Bash 、Node.js脚本的用法，遇到不会的就 Google
5. 新人写代码最大的问题就是「抄错了」

练习

自己用Node.js脚本完成课堂中的 demo.js，实现以下功能

1. demo.js xxx 可在当前目录下生成目录 xxx，demo.js yyy 可生成目录 yyy

2. 如果要生成的目录已经存在，则直接退出

3. 生成的目录结构如下：

   1 2 3 4 5

   ├── css │ └── style.css ├── index.html └── js └── main.js

4. index.html 的内容为

   1 2 3

   <!DOCTYPE> <title>Hello</title> <h1>Hi</h1>

5. css/style.css 的内容为

   1	h1{color: red;}

6. js/main.js 的内容为

   1 2	var string = "Hello World" alert(string)

代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

#!/usr/bin/env node
var fs = require('fs');
var dirName = process.argv[2];  //传的参数是从第2个开始的

var exists = fs.existsSync('./'+dirName);
if(exists){//判断文件夹是否存在
    console.log(dirName+"这个文件夹已经存在");
}else{
    fs.mkdirSync('./'+dirName);     //mkdir $1
    process.chdir('./'+dirName);    //cd $1
    fs.mkdirSync('css');    //mkdir css
    fs.mkdirSync('js');     //mkdir js

    fs.writeFileSync('./index.html','<!DOCTYPE>\n<title>Hello</title>\n<h1>Hi</h1>');
    fs.writeFileSync('./css/style.css','h1{color: red;}');
    fs.writeFileSync('./js/main.js','var string = "Hello World";\nalert(string);');
}

process.exit(0)

学习命令行

• explainshell.com的使用技巧
• 金山词霸
• 常用命令行的使用

explainshell.com的使用技巧

ls命令

进入explainshell.com网站，然后搜索ls，直接按回车,详情请查看下图

搜索的结果如图：

这是作为一个英语不是很好的程序员，需要借助工具，正所谓“工欲善其事，必先利其器”。将上一张图片用矩形框起来的内容进行翻译。
list directory contents ==> 列出目录的内容(可能翻译出来的结果跟实际并不符合,可以一个单词一个单词的翻译)
原来ls的命令是列出目录的内容,目录也可以叫做文件夹.ls是list的缩写
下面的内容就是操作,通过实践把知识运用

打开git Bash,执行下面命令

1. 通过 cd ~/Desktop/,进入电脑桌面
2. 通过mkdir demo1,创建demo1文件夹
3. 进入目录 cd demo1
4. 通过touch test.md ,创建test.md文件
5. 运行touch index.html,创建index.html文件
6. 运行ls命令,查看该目录下的文件
   具体操作详情,请看下图,通过ls命令,可以显示当前目录中的可见内容(不包含隐藏的内容)
   
   还可以输入ls 目录路径显示某个目录中的内容

目录路径可以是相对路径,也可以是绝对路径,上面使用的是相对路径
路径形象生动的描述:
你家在哪里?

• 在XX超市旁边—相对路径
• 在XXX(照着身份证上的念一遍)—绝对路径
  难道ls命令真的是那么简单吗?我可以很严肃的告诉,不是那么简单,你被我骗了,ls命令还有一些参数
  
  由于ls命令的参数太多,所以就单单截一张图片而已.同样也要借助翻译工具o(╥﹏╥)o
  
  由于ls的参数太多,所以我只是举常用的命令

ls -a

显示该目录(当前目录)下的所有文件,可以显示隐藏文件(以点开头的文件夹)

1. 进入目录 cd demo1(需要提前创建demo1目录)
2. 运行mkdir .test,创建一个隐藏文件
3. 运行ls -a显示所有文件(包括隐藏文件),可以通过对比得出结果
   

ls -l

运行ls -l，可以显示该目录中内容的更多信息

下面简单来解释一下上面出现的信息

• -rw代表可读可写
• ASUS-PC代表电脑的用户名
• 10月 5 16:51创建的时间
• index.html文件名
  其他内容感兴趣的话,可以自己扩展

ls -al

显示该目录(当前目录)下的所有文件(包括隐藏文件)和更多信息,效果是ls -a和ls -l的叠加
可以查看下面的效果得出结论

因为我在上面已经说了explainshell.com的使用技巧,所以下面的命令我就直接说该命令代表什么操作

cat命令

cat命令用于连接文件并打印到标准输出设备上，也就是用来显示文件的内容

1. 运行`echo “hello world” > test.txt,创建test.txt文件并输入内容
2. 运行 cat test.txt,显示test.txt文件的内容
   

mv命令

mv是move的缩写，其作用是移动（重命名）文件/文件夹。
mv 源路径 目标路径
输入mv 1.txt 2.txt可将1.txt重命名为2.txt。

touch命令

1. 用来创建新的空文件
2. 把已存在文件的时间标签更新为系统当前的时间（默认方式），它们的数据将原封不动地 保留下来(改变文件的更新时间)
   
   了解更多

• 每天一个linux命令
• 使用explainshell.com

搭建博客的操作具体步骤

1. cd ~/Desktop终端进入Desktop目录

2. 在 GitHub 上新建一个空 repo，repo 名称是「你的用户名.github.io」（注意用户名是你的GitHub用户名，不是你的电脑用户名）

3. 运行npm install -g hexo-cli安装 Hexo
4. hexo init myBlog
5. cd myBlog
6. npm i
7. hexo new 开博大吉，你会看到一个 md 文件的路径,Windows 的路径中的 \ 需要变成 / 才行哦
8. start xxxxxxxxxxxxxxxxxxx.md，编辑这个 md 文件（windows下面使用start，Mac下使用open）
9. vi _config.yml，把 title 改成想要的名字，把author 改成你的名字，把最后一行 type 改成 type: git（git前有空格），在最后一行后新增一行，左边与 type 平齐，加上 repo: 仓库SSH地址（地址前有空格）
10. npm install hexo-deployer-git --save安装 git 部署插件
11. hexo deploy
12. 进入对应的 repo，点setting，将GitHub Pages 功能中的source改成master branch，点save，复制预览链接
13. 用浏览器访问「预览链接/index.html」就应该看到了你的博客！（GitHub Pages 存在延迟，如果没看到，过三分钟再刷新看看）

新建一篇博客

1. hexo new 博客文件名博客文件名需要改成你想要的那个
2. 复制显示的路径，使用 start 路径 来编辑它，Windows 的路径中的 \ 需要变成 / 才行哦
3. hexo generate
4. hexo deploy
5. 去看你的博客，应该能看到第二篇博客了

删除博客文章

先在本地删除，然后进入博客目录依次

1. hexo generate
2. hexo deploy`

更换主题

1. https://github.com/hexojs/hexo/wiki/Themes 上面有主题合集
2. 随便找一个主题，进入主题的 GitHub 首页，比如我找的是 https://github.com/iissnan/hexo-theme-next
3. 复制它的 SSH 地址或 HTTPS 地址，假设地址为 git@github.com:iissnan/hexo-theme-next.git
4. cd themes
5. git clone git@github.com:iissnan/hexo-theme-next.git
6. cd ..
7. 将 _config.yml 的第 75 行改为 theme: hexo-theme-next，保存
8. hexo generate
9. hexo deploy
10. 等一分钟，然后刷新你的博客页面，你会看到一个新的外观。如果不喜欢这个主题，就回到第 1 步，重选一个主题。

第一次建立博客后创建源代码仓库

1.创建名叫 blog-generator 的空仓库
2.按图中在终端进入你的博客目录中执行！用SSH地址！

3.以后每次 hexo deploy 完之后，博客就会更新；然后你还要要 add / commit /push 一下，以防万一。这个 blog-generator 就是用来生成博客的程序，而「你的用户名.github.io」仓库就是你的博客页面。

如果你使用的是 Windows 系统，Hexo 很容易安装不成功，请google解决问题，或弃用windows

##配置Github

###1.注册一个github账号

进入Github个人首页，然后选择Settings，再选择SSH and GPG keys，一开始是没有SSH keys的钥匙的，新建一条钥匙。具体详情请看图

2.新建 SSH key

下面的图片是Github官网提供的方法，具体请看下图和文字解析

打开Git Bash，运行 ssh-keygen -t rsa -b 4096 -C "你的邮箱"，邮箱是github注册时的邮箱，方便以后别人来找你，然后按回车三次

在Git Bash里面输入 cat ~/.ssh/id_rsa.pub，复制得到的一串东西

3.Add SSH key

然后需要你输入Github的密码

4.在Git Bash上运行 ssh -T git@github.com

如果你看到类似于上面的图片的最后一句的话，恭喜你，你成功添加SSH key

如果你看到 Permission denied (publickey). 就说明你失败了，需要重新操作

小Tips：

• 一胎电脑只需要一个SSH key
• 一个SSH key 可以访问你的所有仓库，即使你有很多个仓库，都没有问题
• 如果你新买了电脑，就在新电脑上重新生成一个SSH key，把这个key也上传到GIthub，它和之前的key共存在Github上
• 如果你把key从电脑上删除了，重新生成一个key即可，代替之前的key

配置git

依次运行

1
2
3
4
5

git config --global user.name “英文名”
git config --global user.email “邮箱”
git config --global push.default matching
git config --global core.quotepath false
git config --global core.editor "vim"

使用git的三种方法

1. 建立本地仓库

1. 在一个安全目录（桌面）创建一个git-demo目录mkdir git-demo

2. cd git-demo,进入你创建的目录

3. git init，初始化一个仓库，在git-demo里创建一个.git目录,默认是隐藏的ls -al可以看到。git目录

4. 在git-demo目录里添加index.html和css/style.css

   ①touch index.html

   ②mkdir css

   ③touch css/style.css

5. 运行 git status -sb 可以看到文件前面有 ?? 号

6. 使用git add将文件添加到「暂存区」

   ①一个一个地add,git add index.html ,git add css/style.css

   ②一次性 add，git add .把当前目录（.表示当前目录）里面的变动都加到「暂存区」

7. 再次运行 git status -sb，可以看到 ?? 变成了 A,你告诉 git，这些文件我要加到仓库里

8. 使用 git commit -m “信息” 将你 add 过的内容「正式提交」到本地仓库（.git就是本地仓库），并添加一些注释信息，方便日后查阅

   ①一个一个地 commit，git commit index.html -m '添加index.html',git commit css/style.css -m '添加 css/style.css'

   ②可以一次性 commit,git commit . -m "添加了几个文件"

9. 运行 git status -sb，发现没有文件变动了，这是因为文件的变动已经记录在仓库里了

10. 你使用 git log 就可以看到历史上的变动：

11. 上传到Github仓库

12. git pull先把github上的文件拉下来（一般可忽略）
13. git push推上去

小Tips：

• 上面的git status -sb其实是可以不运行的，只要足够熟练的
• 文件变动，每一次改动，都要经过 git add 和 git commit 两个命令，才能被添加到 .git 本地仓库里。先 add，再 commit，等你熟练之后再去理解区别。先形成肌肉记忆，在去形成大脑记忆！

2.将本地仓库上传到Github

1. 先确保有本地仓库，再在github上创建一个仓库
2. name和电脑上的目录名一样，其他东西不动，创建
3. 点击SSH地址！然后复制页面上这行代码运行git remote add origin git@github.com:xxxxxxxxx/git-demo-1.git，xxxxxxxxx代表的是你Github的用户名，请替换掉
4. 复制第二行 git push -u origin master运行

3. 直接在 GitHub 创建一个仓库，然后下载到本地

1. 创建仓库时，勾选initialize this … ，Add .gitignore 选node，Add a license 选MIT License
2. 点击页面中唯一的绿色按钮「clone or download」，会看到一个弹出层
3. 点 Use SSH，并复制下面的地址
4. 终端进入桌面运行 git clone 你刚才得到的以git@github.com开头的地址

总结

总结一下用到的命令

1. git init，初始化本地仓库 .git
2. git status -sb，显示当前所有文件的状态，-s 的意思是显示总结（summary），-b 的意思是显示分支（branch），所以 -sb 的意思是显示总结和分支
3. git add 文件路径，用来将变动加到暂存区
4. git commit -m “信息”，用来正式提交变动，提交至 .git 仓库
5. 如果有新的变动，我们只需要依次执行 git add xxx 和 git commit -m ‘xxx’ 两个命令即可。别看本教程废话那么多，其实就这一句有用！先 add 再 commit，行了，你学会 git 了。
6. git log 查看变更历史
7. git clone git@github.com:xxxx，下载仓库

如何上传更新

你在本地目录有任何变动，只需按照以下顺序就能上传：

1. git add 文件路径
2. git commit -m “信息”
3. git pull （将网上更新的文件拉到电脑上）
4. git push

git ignore

在项目目录创建 .gitignore 文件就可以指定「哪些文件不上传到远程仓库」，比如

.gitignore

1
2

/node_modules/
/.vscode/

这样就可以避免 node_modules/ 和 .vscode/ 目录被上传到 github 了。

记住一句话：永远都不要上传 node_modules 到 github。

如果你想防止自己手贱上传 node_modules 到 github ，可以：

1. 在项目根目录 touch .gitignore
2. 在 .gitignore 里添加一行 /node_modules/
3. git add .gitignore; git commit -m ‘ignore’

资源

• 常用 Git 命令清单
• 读懂 diff - 阮一峰
• 搭建一个免费的，无限流量的Blog—-github Pages和Jekyll入门
• Git 菜鸟教程
• 廖雪峰的 Git 教程

首先背单词

基本已经学会命令行了。接下来我们学习这些单词的缩写

缩写规则就是：删掉元音字幕（A E I O U），保留前 2 到 3 个辅音字母

练习

1. cd ~/Desktop 进入桌面
2. mkdir demo-1 创建目录，这时你可以切到桌面，看到 demo-1 目录
3. rm -rf demo-1 删除目录
4. touch 1.txt 创建文件，如果你发现文件后缀不见了，请让该死的 Windows 显示文件后缀
5. mv 1.txt 2.txt 这样我们就把 1.txt 移到 2.txt 了，也就是重命名

绝对路径与相对路径的区别

以 / 开头的路径就是绝对路径

路径形象生动的描述:
你家在哪里?

• 在XX超市旁边—相对路径
• 在XXX(照着身份证上的念一遍)—绝对路径

常用的自带命令*

快捷键

• ↑ ↓ 上一命令 / 下一命令
• !! 上一命令占位符
• Tab 自动补全路径
• Alt+. 上一命令的最后一个参数
• && 前面的执行成功了，再执行后面的
• || 前面的执行失败了，就执行后面的
• ; 前面执行完了，不管成功失败，就执行后面的
• > 重定向
• | 管道

Vim

如何退出vim

• 强制退出（不保存）：狂按 ESC，然后按下 :q! 回车
• 保存后退出：狂按 ESC，然后按下 :wq 回车

命令行技巧*

~/.bashrc

操作步骤

1. 首先 touch ~/.bashrc 创建一下这个文件
2. start ~/.bashrc 选用编辑器编辑这个文件，内容为 echo 'Hi'
3. 你也可以用命令行编辑文件 echo "echo 'hi'" >> ~/.bashrc
4. 关闭退出 Git Bash，然后打开 Git Bash，是不是看到了 Hi，这说明每次进入 Git Bash，就会优先运行 ~/.bashrc 里面的命令
5. 重新编辑 ~/.bashrc，内容改为 cd ~/Desktop，重启 Git Bash，有没有发现默认就进入桌面目录了？

可以在进入Git Bash前执行任何命令

alias

利用这个alias技巧，我们可以把很多常见的命令缩写一下，比如

1
2
3
4
5
6
7

alias la = "ls -a"
alias ll = "ls -l"
alias gst = "git status -sb"
alias ga = "git add"
alias ga. = "git add ."
alias gc = "git commit"
alias gc. = "git commit ."

保存退出，然后运行source ~/.bashrc

通过这个技巧，简化了Git操作了

环境变量

还可以在 ~/.bashrc 里面设置一些环境变量，比如你可以在 ~/.bashrc 里面添加一行

1

export SASS_BINARY_SITE="https://npm.taobao.org/mirrors/node-sass"

那么以后你安装 node-sass 的时候就不会因为被墙而报错了。以后会用到的，现在先说一下。

设置 PATH

在 .bashrc 里面写下

1

export PATH="目录的绝对路径:$PATH"

可以在 PATH 里添加一个目录。看不懂这句话没关系，等你用得到的时候你再回来看。

• Git Bash的安装与配置
• Node.js的安装与配置
• Git 的安装与配置
• VSCode的安装和配置

错误言论

• 大神写代码都是用记事本（记事本存在的问题，tab默认是8个空格，默认的编码不是UTF-8）
• IDE很笨重，编辑器很轻便（IDE是集成开发环境，会分析代码有无错误）
• 我可以把我的编辑器配置的像IDE一样强大

正确观点

• 用好的工具能让你效率提高很多倍
• 收费的工具往往比免费的工具靠谱
• 你需要花时间来学习工具的使用方法，才能更好地利用工具
• 越复杂的，越要花时间

Git Bash的配置

Git Bash的安装比较简单，这里就不多说啦。

配置外观

最后记得点击Apply,再点击Save，然后关闭重启Git Bash即可

使用方式

方式1：

找一个目录，在目录上右键点击，然后选中「Git Bash Here」，就可以打开Git Bash，并且当前路径是你的选择的目录

1

touch 1.txt

回车后看看目录了是不是多了一个文件

方式2

直接点击Git Bash的快捷方式，打开Git Bash，输入cd ~/Desktop,即可来到桌面所在的目录，PS.当你输入cd ~/des时，然后按Tab键，Git Bash会自动补全，剩下的操作同上

简单的命令

• 创建目录：mkdir my-dir
• 删除目录：rm -r my-dir
• 创建文件：echo "hello" > newFile.txt
• 删除文件：rm newFile.txt

FQ

我现在正在使用免费的FQ软件，以后出来工作之后，才购买付费的

Node.js的安装与配置

Node.js的安装比较简单，这里就不多说啦。

配置

打开Git Bash，依次输入一下命令，按回车：

1
2
3

npm config set registry https://registry.npm.taobao.org/
npm config set loglevel http
npm config set progress false

npm 的配置被存储在 ~/.npmrc，你可以随时改。

检测是否安装好Node.js

可以在 Git Bash 里面使用 node 和 npm 这两个命令

1
2
3
4

which node
which npm
node -v
npm -v

npm 安装命令行小工具

可以用 npm 的翻译工具做一个随时可用的小字典，这个小工具的名字叫做 fanyi。

1

mpm i -g fanyi

安装好fanyi后，可以尝试一下fanyi 中文/英文

使用方式

方式1

1. 进入Git Bash
2. 输入Node，回车，进入node运行环境，现在可以写JS啦
3. 试试写最简单的 JS 语句，比如 1+2，回车
4. Ctrl+d是退出命令
5. Ctrl+c是终止命令

方式2

1. 来到桌面： cd ~/Desktop
2. 新建一个目录（安全的）：mkdir hello-node
3. 进入这个目录：cd hello-node
4. 新建一个有内容的JS文件：echo "console.log('Hi, Node.js')" > main.js,没有什么反应，就意味着main.js新建成功
5. 输入node main.js，回车，node 就会执行这个 main.js 文件，你会看到「Hi, Node.js」字样
6. 玩完了，删除 hello-node：cd .. ; rm -rf hello-node
7. cd ..是返回上一级目录

Git 的安装与配置

不需要安装，Git Bash内置了Git命令，Git Bash 还内置了以下命令：ls,mkdir,cp,mv

Git Bash 其实是一个 Bash，不是 Git。

Git Bash 给我们提供了一个虚拟的 Linux 环境，这样我们就不用忍受 Windows 里面垃圾一般的命令行体验了。

配置

在Git Bash运行下面这五句话

1
2
3
4
5

git config --global user.name 你的英文名字           #方便产品经理找（怼）你
git config --global user.email 你的常用邮箱          #方便产品经理找（怼）你
git config --global push.default simple            # 本来我写的是 matching，不过想了想可能 simple 更好
git config --global core.quotepath false           #防止文件名变成数字
git config --global core.editor "vim"              # 使用vim编辑提交信息

你的英文名字和你的常用邮箱是要替换的，不要傻傻的直接复制粘贴上去

VSCode的安装和配置

VSCode的安装比较简单，这里就不多说啦。

使用方式

1. 找个地方新建一个目录（目录名不要中文），假设目录名为 vs-demo
2. 右键点击该目录，open with code
3. 使用 Ctrl+Shift+E 打开资源管理器，在 vs-demo 目录里新建 HTML 文件，文件名为 index.html
4. 在 index.html 依次输入：英文感叹号、回车 键，即可看到一个完整的 HTML 页面
   • 由于 vscode 时常更新，如果 回车 键不行，就试试 Tab 键

代码书写快捷方式（简单几个）

1
2
3
4
5
6
7
8
9

//加按Tab键（Emmet）
div
div.red
div.red*10
div.red>a
div.red*10>a
div.red*10>a[href=#]
div.red*10>a[href=#page$]
div.red*10>a[href=page$]{链接$}

安装open in browser

按 Ctrl + Shift + X 打开扩展面板，然后输入 open in browser，点击第一个结果的「安装」按钮，稍等片刻就安装好了

用户设置：文件–>首选项–>设置

换肤：文件–>首选项–>颜色设置

计算机是如何存储数据的?

前端为什么要学编程基础?

• 操作系统运行在硬件之上
• 浏览器运行在操作系统之上
• HTML/CSS/JS运行在浏览器之上
• HTML/CSS/JS和数据都来自服务器

存在三层依赖,所以我们前端需要学习编程基础,我们才会知道

• CSS/JS是怎样运行的?

• JS的变量存储在哪里?

• 数据怎么从服务器获取?

计算机: 二进制的世界

1. 如何存储0和1
2. 如何存储数字
3. 如何存储字符
4. 如何存储中文
5. 如何存储所有字符
6. 如何用更少的空间来存储

1.内存如何存储0和1*

计算机首先纵向,从上往下选中8个点,然后横向输入电量

存储

• 1就充电(变成红色)
• 0就不充电(不变色)

读取

• 电量大于50% 就是1
• 电量小于50% 就是0

通过这样内存就实现可以存储0和1

2. 如何存储数字*

计算机只存储0和1,所以存储数字,需要将数字转换为二进制的0和1

十进制 –> 二进制

37(10) == 100101(2) 括号里面的数字代表是什么进制

*代表是乘,^代表是多少次方,?代表未知,需要求出来

1
2
3
4
5
6

37(10)  = 3 * 10^1 + 7 * 10^0
		= n1 * 2^? + n2 * 2^?
		= 32 + 4 + 1
		= 1 * 2^5 + 1 * 2^2 + 1 * 2^0
		= 1 * 2^5 + 0 * 2^4 + 0 * 2^3 + 1 * 2^2 + 0 * 2^1 + 1 * 2^0
		= 100101(2)

-37(10) == -100101(2)

负数会以补码的形式存储,比较复杂,这里不做多讲

0.75(10) == 0.11(2)

1
2
3
4
5

0.75(10)  = 7 * 1/10 + 5 * 1/10^2
		  = n1 * 1/2 + n2 * 1/4
		  = 0.5 + 0.25
		  = 1* 1/2 + 1 * 1/4
		  = 0.11(2)

小Tips:

为了方便书写,一般会将二进制写为十六进制

二进制 –> 十六进制,每四个二进制代表一个十六进制数

举个例子下面的转换可以跟这个例子推出来:

1111(2) –> F(16)

1

1111(2) = 2^3 + 2^2 + 2^1 + 2^0 = F(16)

3.如何存储字符*

将每个字符编号

ASCII(American Standard Code for Information Interchange,美国信息交换标准代码)

美国信息交换标准代码是基于拉丁字母的一套计算机编码系统。它主要用于显示现代英语，而其扩展版本EASCII则可以部分支持其他西欧语言，并等同于国际标准ISO/IEC 646。

你想存储a,就需要存储97(10)对应的二进制

1
2
3
4
5

97(10)  = 9 * 10^1 + 7 * 10^0
		= n1 * 2^? + n2 * 2^?
		= 64 + 32 + 1
		= 1 * 2^6 + 1 * 2^5 + 1 * 2^0
		= 01100001(2) == 61(16)

你想存储A,就需要存储65(10)对应的二进制

1
2
3
4
5

65(10)  = 6 * 10^1 + 5 * 10^0
		= n1 * 2^? + n2 * 2^?
		= 64 + 1
		= 1 * 2^6  + 1 * 2^0
		= 01000001(2) == 41(16)

通过上面的例子说明计算机会认为A和a是不一样,因为所对应的ASCII不同

4. 如何存储中文

• GB 2312 中国国家标准简体中文字符集
• 微软推出的GBK 字符集(存储生僻字、繁体字、日语、朝鲜语等)
• GB2312 共收录 6763 个汉字，同时收录了包括拉丁字母、希腊字母、日文平假名及片假名字母、俄语西里尔字母在内的 682 个字符。

5.如何存储所有字符

• Unicode 字符集
• unciode万国码,将全球字符编号,包括中日韩文字、藏文、盲文、楔形文字、 颜文字:-)、 绘文字

6. 如何将Unicode存到计算机里

低性价比

a -> 00000000 00000000 00000000 011000012 = 0061(16)

你 -> 00000000 00000000 01001111 011000002 = 4F60(16)

高性价比 UTF-8

a -> 01100001

你-> 11100100 10111101 10100000

低性价比,因为计算机需要使用4个字节来存储

下面解释一下”你”的UTF-8

1
2
3
4
5

//Unicode
你 -> 00000000 00000000 01001111 011000002
//utf-8
你-> 11100100 10111101 10100000
//1110 表示告诉计算机,读取的时候往后读三个字节,每个字节开头都是10,除我之外,10都是表示我跟着前面的

UTF-8 是一种编码方式，不是字符集

UTF-8的编码方式

现实问题

• 为什么有些中文软件喜欢用GBK,不用Unicode?
  • 因为在93年-99年都在使用GB 13000,GBK这两种
• Javascript使用Unicode字符集,但是没有使用UTF-8编码
  • Javascript用了UCS-2编码,因为1995年UTF-16还没被发明出来,Javascript也不想使用 UTF-32,Unicode与JavaScript详解
  • 出现的后果:ES5 无法表示 \uFFFF 之后的字符（如 \u1D306）,某些情况下会出 bug,Javascript有个Unicode的天坑

哪些东西必须学?搞清楚前端要学什么?

需要学习的语言

• HTML
• CSS
• JavaScript
• HTTP

HTML

• 记住常用的标签,div span,input meta
• 之后见到一个稍微记一下
• 使用到才去了解一些标签

CSS

语法

• CSS选择器
• 属性
• .xxx > .yyy + p{color: red;},学了语法就不要往下学,之后会经常使用HTML和CSS

套路

• 左中右布局
• 居中布局

工具

• caniuse.com
• css xxx generator(css 3 box-shadow generator)
• JS Bin/js.jirengu.com
• xxx mdn(animation mdn)
• 通过使用工具,就可以实现不写代码,就可以实现酷炫的效果

应用

做静态页面(任何你喜欢的静态页面,思考怎样做)

JavaScript

语法

• ES5
• ES6(不能直接运行在IE8上面,需要借助工具将ES6–>ES5)
• ES9(在ES6的基础上增加一下东西)
• 垃圾,但有用(坑多)

套路

• DOM(如何操作页面,通过JS操作HTML)
• AJAX(如何HTTP请求)
• 排序
• Promise(处理异步)

工具

• git和github
• webpack
• MDN

应用

• 大不大不重要,颜值最重要
• 不只是毕设
• 可以在平时的作业/作品体现自己的个性
• 记住不要自己设计,要找好看的设计稿

HTTP

概念

• 缓存
• 请求
• 响应
• cookie
• session

还需要学习脚本,做一个服务器

编程工具

• VScode(性价比高,对机器要求不高)
• Webstorm(功能强大,对硬件要求高,内存4G以上,I5以上,SSD硬盘)
• sublime(中看不中用)

面试加分项

• JS语法
• AJAX
• 作品/项目

面试必问

• AJAX(能不能说明什么是AJAX)
• jsonp
• 跨域

学习的方法

• 写博客
• 问人