前端系统课程 - 17. JavaScript 小作品

JS 相关知识点

  • 图片加载错误事件：

    error ，事件句柄为 onerror；可以用它来指定图片加载失败时的替代图片。

  • 元素的上一个兄弟元素：

    node.previousSibling，用来获取指定元素的上一个兄弟元素。

  • 元素的 class 属性在 JS 中需要用 node.className 或 node['class'] 的方式访问，因为在 JS 中 class 是关键字。

CSS 相关知识点

HTML 相关知识点

前端系统课程 - 15. 数据结构入门

哈希表（Hash Table）

  • 计数排序中的“桶”，

队列（Queue）

  • 可以理解为数据先进先出的方式。

  • 数组中的 Array.push() 方法将数据推入至数组末尾（先进），Array.shift() 方法将数组的第一个数据取出（先出），这就属于队列操作。

  • 现实生活中的排队。

栈（Stack）

  • 可以理解为数据先进后出的方式。

  • 数组中的 Array.push() 方法将数据推入至数组末尾（先进），Array.pop() 方法将数组的末一个数据弹出（后出），这就属于栈操作。

  • 现实生活中拆墙。

链表（linked List）

  • 数组由于其连续性而使得无法直接删除中间的某项，而链表可以。

  • 链表可以用哈希实现，例如 JS 中的多层嵌套的对象数据。

  • 链表中 head 和 node 的概念：head 指的就是链表中的第一个数据，其余的就是 node（包括 head 中包含的数据）。

树（Tree）

  • 层级结构、DOM结构等都属于树形结构。

  • 概念包含：层数（数据分层所在的不同位置）、深度（树形结构有多少层）、节点个数（数据节点的数量）。

  • 二叉树：每层数据分支最多不超过两个的树形结构，两个分叉分别用“左子树”和“右子树”表示。

    • 满二叉树：每一层数据都是两个的二叉树。

    • 完全二叉树；除最后一层外，其余层都是满的，并且最后一层或是满的，或是只在右边缺少连续若干节点的二叉树。

    • 以上两种二叉树都能用数组实现。

  • 其他树可以用哈希（对象）实现。

  • 其他树例如：B 树，红黑树、AVL 树等。

堆（Heap）

  • 堆（二叉堆）可以视为一颗完全二叉树。

  • 二叉堆分为最大堆和最小堆。

  • 利用二叉树特性可以实现堆排序。

  • 堆排序的速度与快排相同。

  • 堆排序可视化。

前端系统课程 - 11. CSS 布局与定位 (1)

文档流与高度

  • 元素的自动高度，是由其内部所有文档流元素的高度总和决定的（注意“决定”不代表“相等”）。

  • 文档流就是文档内元素流动的方向。

    • 行内元素（内联元素）的流动方向是从左往右，当一行不够时换行；

    • 块级元素（外联元素）的流动方向是从上往下，每个块级元素独占一行，宽度不影响这个特性；

  • 行内元素中的文字换行时，默认是不会将一个完整的英文单词或连续的字母和数字截断的，而会将汉字截断；如果想让换行时截断任意字符，可以给行内元素添加属性 word-break: break-all。

  • 字体的居中不是以中线对齐，而是以基线对齐。

  • 字体的默认行高是由每种字体内置的推荐行高决定的，不同的字体有不同的推荐行高。

  • 行内元素的自动高度等于默认行高、上下内边距以及上下边框的总和。

  • 实际开发中，尽量不使用 height 属性设置元素的高度。

脱离文档流与定位

  • 除了浮动属性外，使用元素的定位属性也可以使元素脱离文档流，例如相对定位和固定定位。

  • 当子元素脱离文档流后，父元素的高度会塌陷。

  • 元素脱离文档流后，元素拥有行内块级元素特性，元素的自动宽度由内部的内容决定。

  • 固定定位 fixed 会使元素相对于 <body> 元素定位。

  • 使用绝对定位 absolute 定位元素时，一般要将元素的父元素设置为相对定位 relative，简称“子绝父相”。

背景图

  • 使用 background-position 属相来设置背景图的定位方式。

  • 使用 background-size 属性来设置背景图的填充方式。

边框的妙用

利用加粗加大的边框，配合不同的样式属性，可以做出很多不同的效果，例如做个三角形：

1
2
3
4
5
.test{
    width: 0;
    border: 10px solid transparent;
    border-left-color: red;
}

图标资源

  • 阿里图标库 了解一下；

  • <svg> 元素的宽高需要同时设置；颜色设置使用 fill 属性。

前端系统课程 - 10. CSS 入门

CSS 的历史

  1. 1994 年，哈肯·维姆·莱（ Håkon Wium Lie）与伯特·波斯（Bert Bos）一起合作设计了 CSS。

  2. 1998 年，W3C 发布了应用最广泛的 CSS2。

  3. 2011 年，CSS 被分为多个模块单独升级，统称为 CSS3。

CSS 编译器

  • LESS

  • SASS / SCSS

  • PostCSS

学习资源

  • MDN

  • CSS Tricks

  • 阮一峰 / 张鑫旭博客

  • Codrops

  • 《CSS 揭秘》

  • CSS 文档

开始写 CSS

  1. 引入方法：

    • 内联样式；

    • <style> 标签；

    • 外部样式，使用 <link> 标签引入；

    • 导入方式，使用 @import url() 方式，这种方式不推荐使用。

  2. 善用开发者工具。

  3. 常用样式：

    • 清除列表默认样式 list-style: none；

    • 浮动 float；

    • 清除浮动 clear: both;，常用方式，给浮动元素的父元素加此类名：

    1
    2
    3
    4
    5
    .clearfix::after {
      content: '';
      display: block;
      claer: both;
    }

    • 子元素选择器 >；

    • 背景颜色 background；

    • 文字颜色 color；

    • 去除 <a> 标签下划线 text-decoration: none；

    • 外边距 margin；

    • 内边距 padding；

    • 文字加粗 font-weight: bold；

    • 伪类选择器，鼠标移入 :hover；

    • 展示为块级元素 display: block；

    • 继承属性值 inherit，可用于字体和颜色等属性；

    • 文字大小 font-size；

    • 文字字体 font-family；

    • 边框 border。

课后拾遗

  • 不要记住了缩写，就忘记了全写，例如 margin、border、padding 等属性；

  • 当 height 的值和 line-height 的值相同时，或者 line-height 的值与 padding-top、padding-bottom 的值加起来等于 height 的值，并且 padding 是上下相等的情况时，文字会垂直居中。

前端系统课程 - 09. HTML (2)

常用标签

  • <a> 标签和 <button> 标签的选择：

    • 如果要跳转到一个链接，用 <a> 标签；

    • 如果要弹出提示或进行提交等操作，则可以使用 <button> 标签。

  • <main> 标签代表整个页面最主要的部分，每个页面中只能有一个 main 标签。

  • <section> 标签代表一个章节，一般用于一个完整文章或独立区块。

  • <h1> ~ <h6> 表示 6 个等级的标题，其中 <h1> 在整个页面一般也只有一个。

  • <nav> 标签表示导航，有导航性质的列表或菜单，要用此标签包裹。

  • <div> 和 <span> 标签没有语义，只是用来划分区域的，所以在使用这两种标签时，要给它们指定类名来使其语义化。

iframe 标签

  • 使用“src”属性可以指定 iframe 窗口打开的网址。

  • 使用“name”属性可以和 <a> 标签配合，使指定的 iframe 窗口打开新网页。

  • 将“frameborder”属性设置为“0”可以去除 iframe 窗口自带的边框。

a 标签

  • “target”属性有四个值，它们分别是：

    • _blank：代表在新窗口打开链接；

    • _self：代表在当前窗口或当前 iframe 窗口打开链接；

    • _parent：代表在当前 iframe 窗口外的父级窗口打开链接；

    • _top：代表在当前 iframe 窗口外的最顶层祖先窗口打开链接。

  • “download”属性，一般用在链接是一个需要下载的文件时，此属性会强制将目标链接的“Content-type”转换为“application/octet-stream”，使目标链接成为下载链接。

  • “href”属性值：

    • 如果只写了域名，会把这个值当作文件来打开，例如 href="qq.com"；当这种情况发生在是用 HTTP 协议打开时，会在网站的根目录寻找这个文件。

    • 如果不写协议，会把这个值按照当前协议来打开，例如 href="//qq.com"；当用文件协议打开网页时，便按照文件协议打开链接；当用 HTTP 协议打开时，便按照 HTTP 协议打开，才能正常访问目标网址。

    • 只有在把协议写全的时候，才能在协议不同的情况下，正常跳转到链接地址，正常应该写：href="http://qq.com。

    • 如果值是一个查询参数时，会向链接发起 GET 请求，页面会被刷新，例如：href="?name=user"。

    • 如果值是一个锚点时，会跳转到当前页的对应锚点位置；而如果只写一个“#”号，则会跳转到当前页面的顶部，两种情况都不会刷新页面；例如：href="#"，这种方式可以做“回到顶部”的功能。

    • 如果值是一个伪协议，例如：href="javascript:void(0);"，则会执行伪协议后面的脚本代码，例子中的意思是返回值为“0”，也就是什么都不做，最终达到的效果就是去除了 <a> 标签的默认操作，这样就得到了一个能点击，却不会有反应的 <a> 标签；void(0) 其实可以不写也可以。其他的伪协议还有”mailto“等……老师没说。

    • 如果值为空，点击 <a> 标签就会刷新当前页面。

form 标签

  • “action”属性用来设置表单提交的地址。

  • “method”属性用来指定提交表单的方式，只有两种方式，默认是 GET 方式，但提交表单都是用 POST 方式。

  • 使用 POST 方式提交表单时，请求中的“Content-Type”是“x-www-form-urlencoded”，这是表单数据所对应的类型，它会将汉字转换为 UTF-8 编码后，再提交到目标地址。

  • 表单中必须有提交按钮；如果 form 表单中有一个没有类型的 <button> 标签，那么这个按钮会自动成为该表单的提交按钮，从而具备点击后发起提交该表单的请求功能。

  • 表单中需要输入并提交数据的标签，都要有“name”属性，否则该标签中的数据将无法提交。

  • “target”属性可以指定表单提交成功后，在哪个窗口打开表单提交地址。

input 标签

  • 最主要的就是“type”属性，不同的值代表不同的输入方式，例如：“button”代表普通按钮，“submit”代表提交按钮，“checkbox”代表复选框等等，如果不设置，默认是“text”类型。

  • 要让 <input> 标签与指定内容关联，使之点击时获得焦点，要使用 <label> 标签包裹指定内容，并将其“for”属性与 <input> 标签的“id”属性设置为同一个值。

  • 使用“radio”类型的 <input> 标签可以做出单选按钮，要让多个单选按钮具有排外性，就得把这些按钮的“name”属性设置为同一个。

select 标签

  • 使用这个标签可以做下拉菜单，菜单的每一项，要用 <option> 标签包裹。

  • 要让某一项默认为选中状态，可以给此项添加“selected”属性并设置值为“true”，像此类的状态属性的属性值都可以省略，只要属性存在，浏览器就会使它的值自动为“true”。

  • 使用“disabled”属性可以使选项成为非可选状态。

  • 为 <select> 标签添加“multiple”属性，可以使之成为多选菜单。

textarea 标签

  • 这个标签被称为“文本域”，是用来输入和提交大量文字的文本框。

  • 默认情况下，文本框可以自由调整大小，如果要禁用这种效果，需要给 <textarea> 添加样式：resize: none。

  • 虽然文本域有设定宽和高的属性，但使用 CSS 样式设置最为靠谱。

table 标签

  • 按照规范，<table> 标签的子元素可以是 <thead>、<tbody>、<tfoot> 和 <colgroup>。

  • <colgroup> 标签的子标签是 <col> 标签，可以通过它来为每一列进行不同的设置，如宽度，背景色等，实际开发很少使用。

  • <table> 标签的子标签都可以省略，除了 <colgroup> 标签，其余的会自动生成；另外，如果这些标签的顺序颠倒，浏览器也会自动纠正为 <thead>、<tbody>、<tfoot> 的顺序。

  • <table> 标签的“border”属性可以设置表格的边框，但是每个表格元素都会有，如果要合并这些边框，可以给 <table> 标签添加样式 border-collapse: collapse。

课后拾遗

今天学的标签只是 HTML5 中很少的一部分，而且也只是初步的介绍，实际还有很多常用标签，这些标签也还有很多属性可以设置。标签的属性不需要全部记住，在实际开发中，多加练习，就会把最有价值的属性设置烂熟于心。

前端系统课程 - 08. HTML (1)

说说简历

简历最好挂在自己买的域名上，这样显得专业一点。

简历模板

在追波网（dribbble.com）搜索 cv 或 resume 关键字，或者在五百丁上买。

简历内容

  • 必要的内容：

    • 个人信息：照片、姓名、性别、年龄、学校、所在城市、职位目标等；

    • 教育经历；

    • 工作经历；

    • 项目经验。

  • 可选的内容：

    • 开源代码，GitHub 要经常使用；

    • 博客链接：多写博客，自己搭建的最好；

    • 外文翻译；

    • 他人评价；

    • 对公司业务的分析；

  • 没用的内容：

    • 自我评价；

    • 对公司或产品的喜爱；

    • 段子。

什么是HTML

HTML（HyperText Markup Language，超文本标记语言），超级文本标记语言是标准通用标记语言，它通过标记符号来标记要显示的网页中的各个部分。

HTML版本

版本从 1.0 到 4.01，再到现在的 HTML5 版本，目前 HTML5.2 也已经发布。

“H5”和 HTML5 不是一个概念，所谓的“H5”页面其实只是在微信中能展示的页面，甚至可以用 HTML4.01 做出来。

HTML规范

规范由 W3C 制定，W3C 会根据浏览器的实际情况总结文档。

DOCTYPE

文档类型，用来标识 HTML 文档的版本，以判定文档遵循何种规范。目前使用的 HTML5 的文档类型应该写作：

1
<!DOCTYPE html>

HTML标签

  • HTML5 规范中，<head> 标签、<body> 标签为空标签时，是可以省略的；即使不写 html 标签，也是符合规范的；如果不写，浏览器在渲染时会自动补全。

  • 常见标签如：<p> 标签，含义是“paragraph”，段落的意思；<ul> 标签，含义是“unordered list”，意思是无序列表；div 标签，含义是“divide”，划分的意思，等等……

  • 了解标签的语义化，就是要了解标签的含义，并且在对应的使用场景时，正确的使用标签。

  • 各种浏览器都给除了 <div> 和 <span> 标签以外的 HTML 的标签定制了默认样式。

  • 遇到不会的标签，或者需要了解标签的更多规范，移步 MDN。

结构与样式分离

HTML 只是用来描述文档的结构，而文档以什么方式什么样子展示，那是 CSS 的事；例如内联元素与块级元素的区分，本质上是样式的区分，所以不归 HTML 管，HTML 中的内联与块级元素的概念，实际上是由 CSS 控制的，属于 CSS 中的概念。

前端系统课程 - 07. Node.js Server

TCP 与 UDP

  • HTTP 协议的底层是由 TCP/IP 协议构建的。

  • TCP（Transmission Control Protocol，传输控制协议）。

  • UDP（User Datagram Protocol，用户数据报协议）。

  • TCP 和 UDP 的区别：

    • TCP 可靠（成功与否都能感知），面向连接、相对 UDP 较慢；

    • UDP 不可靠，不面向连接、相对 TCP 较快。

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

  1. 客户端对服务端说：我要连接你了，可以吗？

  2. 服务端对客户端说：好的，我准备好了，连接我吧。

  3. 客户端对服务端说：那我连接你咯。

  4. 开始后面的步骤。

内网与外网

  • 电信提供 DNS 服务。

  • 设备通过网线或 WIFI 与路由器连接。

  • 路由器通过光纤与电信服务器连接，路由器会有一个外网 IP，这就是你在互联网中的地址，但是这个地址通常是不固定的，重启路由器可能被重新分配一个外网 IP。

  • 可以花钱租一个固定外网 IP，但一般只有企业才会使用固定 IP，用来提供稳定的服务。

  • 路由器会创建一个内网，内网中的设备使用内网 IP，内网 IP 通常都是 192.168.xxx.xxx 的格式。

  • 路由器自身也占用一个内网 IP，它同时拥有一个外网 IP 和内网 IP。

  • 内网中的设备可以互相访问，但是不能直接访问外网，只能通过路由器中转才能访问外网。

  • 外网中的设备可以互相访问，但是不能直接访问内网，也只能通过路由器中转。

  • 路由器就是用来“指路”的，主要功能就是用来分发内容；

  • 内网与外网之间无法互通，唯一的连通点就是路由器，所以路由器又称为“网关”；

  • 除了内网 IP 和 外网 IP，还有两个特殊的 IP，一个是本地 IP：127.0.0.1，它代表设备自身；另一个是：0.0.0.0，它不表示任何设备，在不同地方有不同的含义。

端口

要使用 HTTP 协议（或 TCP/IP 协议）访问一个设备，只指定 IP 是不够的，还必须指定端口（Port）。

端口不是一种硬件，而是一个编号。

一个服务器不一定只提供一种服务，那么一个 IP 是无法告诉服务器要使用的是哪种服务的。所以需要用一个端口，对应一种服务。例如：通常使用 80 端口提供 HTTP 服务，使用 443 端口提供 HTTPS 服务，使用 21 端口提供 FTP 服务等等……

端口号从 0 到 1023 号端口都有对应的服务，具体可以谷歌查询。

每个机器有 65535（2 的 16 次方减 1）个端口，这些端口遵循一些规定：

  • 0 到 1023（2 的 10 次方减 1）号端口是留给系统使用的，只有拥有管理员权限后，才能使用这 1024 个端口。

  • 其他端口可以给普通用户使用。

  • 如果一个端口正在提供服务，也就是被占用了，那么就不能再使用这个端口；除非先停止正在占用这个端口的服务。

使用 HTTP 协议访问另一个 IP 时，必须同时提供 IP 和端口号，缺一不可。但是一般访问一个网址时，由于默认访问的就是 80 端口，所以这个端口号会被浏览器自动添加并且隐去不显示，所以在输入网址时一般不需要写 80 端口号。

Node.js 服务器

接收请求

前端系统课程 - 06. HTTP 入门

WWW 历史

  • 1989 年，万维网（World Wide Web）诞生。

  • 1990 年，蒂姆·伯纳斯-李（Tim Berners-Lee）发明了用网址访问网页的办法，他发明了第一个网页、第一个浏览器和第一个服务器。

  • 想了解更多可以去维基百科……

WWW 包含概念

主要包含 3 个概念：

  1. URI（Uniform Resource Identifier，统一资源标识符）。

  2. HTTP（HyperText Transfer Protocol，超级文本传输协议）。

  3. HTML（HyperText Markup Language，超文本标记语言）。

认识 URI

URI 分为：

  • URL（Uniform Resource Locator，统一资源定位符），我们一般使用 URL 作为网址。

  • URN（Uniform Resource Name，统一资源名称），例如书籍的 ISBN 号码。

通过 URL 可以确定一个“唯一的”地址（网址），例如：

https://www.baidu.com/s?wd=hello&rsv_spt=1#5

这就是一个 URL 地址，其中：https:// 表示协议；www.baidu.com 表示域名；/s 表示路径；wd=hello&rsv_spt=1 是查询参数；最后 #5 是锚点。

DNS 是什么

DNS（Domain Name System，域名系统），它的作用简单来讲就是：输入域名，输出 IP（Internet Protocol，互联网协议）。

在命令行中，使用 nslookup 命令可以查看域名对应的 IP 地址；使用 ping 命令可以知道域名对应的 IP 地址以及与该域名服务器的连接情况。

HTTP 入门

HTTP 翻译过来是超文本传输协议，可以简单理解为：对客户端和服务端之间数据传输的格式规范。

请求与响应

浏览器与服务器之间数据传输的过程大概是这样的：

  • 浏览器负责发起请求；

  • 服务器在 80 端口接收请求；

  • 服务器负责返回内容（响应）；

  • 浏览器负责下载响应内容。

在这过程中，HTTP 指导浏览器和服务器如何进行沟通。

请求示例

在 Git Bash 中，使用 curl 命令可以访问一个域名。例如：

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

确认后会打印出响应内容，如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<!DOCTYPE html>
<!--STATUS OK--><html> <head><meta http-equiv=content-type content=text/html;charset=utf-8><meta http-equiv=X-UA-Compatible content=IE=Edge><meta content=always name=referrer><link rel=stylesheet type=text/css href=http://s1.bdstatic.com/r/www/cache/bdorz/baidu.min.css><title>百度一下，你就知道</title></head> <body link=#0000cc> <div id=wrapper> <div id=head> <div class=head_wrapper> <div class=s_form> <div class=s_form_wrapper> <div id=lg> <img hidefocus=true src=//www.baidu.com/img/bd_logo1.png width=270 height=129> </div> <form id=form name=f action=//www.baidu.com/s class=fm> <input type=hidden name=bdorz_come value=1> <input type=hidden name=ie value=utf-8> <input type=hidden name=f value=8> <input type=hidden name=rsv_bp value=1> <input type=hidden name=rsv_idx value=1> <input type=hidden name=tn value=baidu><span class="bg s_ipt_wr"><input id=kw name=wd class=s_ipt value maxlength=255 autocomplete=off autofocus></span><span class="bg s_btn_wr"><input type=submit id=su value=百度一下 class="bg s_btn"></span> </form> </div> </div> <div id=u1> <a href=http://news.baidu.com name=tj_trnews class=mnav>新闻</a> <a href=http://www.hao123.com name=tj_trhao123 class=mnav>hao123</a> <a href=http://map.baidu.com name=tj_trmap class=mnav>地图</a> <a href=http://v.baidu.com name=tj_trvideo class=mnav>视频</a> <a href=http://tieba.baidu.com name=tj_trtieba class=mnav>贴吧</a> <noscript> <a href=http://www.baidu.com/bdorz/login.gif?login&amp;tpl=mn&amp;u=http%3A%2F%2Fwww.baidu.com%2f%3fbdorz_come%3d1 name=tj_login class=lb>登录</a> </noscript> <script>document.write('<a href="http://www.baidu.com/bdorz/login.gif?login&tpl=mn&u='+ encodeURIComponent(window.location.href+ (window.location.search === "" ? "?" : "&")+ "bdorz_come=1")+ '" name="tj_login" class="lb">登录</a>');</script> <a href=//www.baidu.com/more/ name=tj_briicon class=bri style="display: block;">更多产品</a> </div> </div> </div> <div id=ftCon> <div id=ftConw> <p id=lh> <a href=http://home.baidu.com>关于百度</a> <a href=http://ir.baidu.com>About Baidu</a> </p> <p id=cp>&copy;2017&nbsp;Baidu&nbsp;<a href=http://www.baidu.com/duty/>使用百度前必读</a>&nbsp; <a href=http://jianyi.baidu.com/ class=cp-feedback>意见反馈</a>&nbsp;京ICP证030173号&nbsp; <img src=//www.baidu.com/img/gs.gif> </p> </div> </div> </div> </body> </html>
* STATE: INIT => CONNECT handle 0x48ef160; line 1404 (connection #-5000)
* Rebuilt URL to: http://www.baidu.com/
* Added connection 0. The cache now contains 1 members
* STATE: CONNECT => WAITRESOLVE handle 0x48ef160; line 1440 (connection #0)
*   Trying 61.135.169.125...
* TCP_NODELAY set
* STATE: WAITRESOLVE => WAITCONNECT handle 0x48ef160; line 1521 (connection #0)
* Connected to www.baidu.com (61.135.169.125) port 80 (#0)
* STATE: WAITCONNECT => SENDPROTOCONNECT handle 0x48ef160; line 1573 (connection #0)
* Marked for [keep alive]: HTTP default
* STATE: SENDPROTOCONNECT => DO handle 0x48ef160; line 1591 (connection #0)
> GET / HTTP/1.1
> Host: www.baidu.com
> User-Agent: curl/7.59.0
> Accept: */*
>
* STATE: DO => DO_DONE handle 0x48ef160; line 1670 (connection #0)
* STATE: DO_DONE => WAITPERFORM handle 0x48ef160; line 1795 (connection #0)
* STATE: WAITPERFORM => PERFORM handle 0x48ef160; line 1811 (connection #0)
* HTTP 1.1 or later with persistent connection, pipelining supported
< HTTP/1.1 200 OK
* Server bfe/1.0.8.18 is not blacklisted
< Server: bfe/1.0.8.18
< Date: Mon, 07 May 2018 08:02:59 GMT
< Content-Type: text/html
< Content-Length: 2381
< Last-Modified: Mon, 23 Jan 2017 13:27:32 GMT
< Connection: Keep-Alive
< ETag: "588604c4-94d"
< Cache-Control: private, no-cache, no-store, proxy-revalidate, no-transform
< Pragma: no-cache
< Set-Cookie: BDORZ=27315; max-age=86400; domain=.baidu.com; path=/
< Accept-Ranges: bytes
<
{ [2381 bytes data]
* STATE: PERFORM => DONE handle 0x48ef160; line 1980 (connection #0)
* multi_done
* Connection #0 to host www.baidu.com left intact
* Expire cleared

可以看到开头为大于号的内容行为发送的请求内容；而开头为小于号的内容行则是返回内容；开头的 HTML 格式内容则是下载的响应内容；其余以星号开头的都是注释。

GET 与 POST

改用 POST 请求，curl -X POST -s -v -H "xxx" -- "https://www.baidu.com"，返回“页面不存在”页面……

两者的区别可以从字面意思理解，“GET”就是获取数据，“POST”就是提交数据。

请求的格式

请求内容是有固定格式的：

1
2
3
4
5
6
7
1 动词 路径 协议/版本
2 key1: value1 // 例如：Content-Type: application/x-www-form-urlencoded
  key2: value2 // 例如：Host: www.baidu.com 
  key3: value3 // 例如：User-Agent: curl/7.54.0
  ...
3
4 要上传的数据

  1. 请求最多包含四部分，最少包含三部分（第四部分可以为空）。

  2. 第三部分永远都是一个回车 \n，主要是用来区分第二部分和第四部分内容的。

  3. 动词有 GET（获取）、POST（新增或上传）、PUT（整体更新）、PATCH（局部更新）、DELETE（删除）、HEAD、OPTIONS等。

  4. 请求中的路径包括“查询参数”，但不包括“锚点”；因为“锚点”不是由服务器识别，而是由浏览器识别的。

  5. 如果没有写路径，那么路径默认为 /，代表根目录。

  6. 第二部分中的“Content-Type”标注了第四部分的格式。

响应的格式

  • GET 请求和 POST 请求对应的响应内容可能一样，也可能不一样。

  • 响应的第四部分可以很长。

1
2
3
4
5
6
1 协议/版本 状态码 状态解释
2 key1: value1 // 例如：Content-Length: 17931
  key2: value2 // 例如：Content-Type: text/html
  ...
3
4 要下载的内容

  • 状态码要背，可以看作是服务器对浏览器说的话：

    • 1xx，不常用；

    • 2xx，表示成功；

    • 3xx，表示滚吧；

    • 4xx，表示你丫错了；

    • 5xx，表示好吧，我错了。

  • 状态解释没什么卵用。

  • 第二部分的“Content-Type”标注了第四部分的格式，它遵循 MIME 规范。

使用 Chrome 查看请求数据与响应数据

  1. 打开浏览器后，再按 F12 打开 Dev Tools（开发者工具）；

  2. 打开“Network”选项卡；

  3. 打开一个网页，网页打开后，“Network”内容下会出现很多请求列表；

  4. 点击你想查看的请求列表项的“Name”项，右侧便会显示该项的 Header 信息；

  5. Header 信息里的“Request Header”，就是请求数据；而“Response Header”则是响应数据；

  6. 要想看到请求数据与响应数据的源码，请展开响应数据后，点击“view source”，不然一辈子也看不到哦！这老师念了 N 遍……