讲座 - Web 基础
讲座 - Web 基础
Web 具有按需操作的特性，需要有服务器（server）提供内容，需要客户（client）进行请求. Web 客户通常指浏览器（browser），比如 Microsoft Edge 或者 Google Chrome.
网页是一种文件，客户通知服务器，请求文件. 服务器在接到请求之后做出相应，浏览器按照一定规则组织好显示在屏幕上.
Web 通信
交互过程中如何保证信息被正确处理？我们需要约定，这里就是“协议（protocol）”，指的是交换信息的格式和顺序、事件发生时的操作.
准确定位请求，需要网址（URL，uniform resource locator）. URL 一般能分成三个部分：协议://主机名[:端口号]/路径[?查询].
现在讲一讲 Web 的核心协议，HTTP（Hyper-Text Transfer Protocol，超文本传输协议），它定义请求的方式和响应的方式.
HTTP request
请求方法，常见的有：
- GET：获取资源
- POST：提交数据
- PUT：更新 / 替换服务器资源
- DELETE：删除服务器资源
理论上很多方法可以混用，但是这并不好.
请求如何携带信息，比如说用户名和密码？有常用的三种方法：
路径传参：
http://www.site.com/info/aaa/head.png查询字符串传参：
http://www.site.com/info?username=aaa&require=head请求体传参：
http://www.site.com/info1
2
3
4{
"username": "aaa",
"telephone": "123456789"
}
[拓展]用户身份验证：可能的使用场景是个性化推送之类. 最简单的想法是使用验证码，但是这样太麻烦；一种常用验证方法是使用 Cookies，Cookie 保存在客户端，之后的请求中自动携带 Cookie 信息.
但是 Cookie 带来安全问题：一是存在第三方 Cookie，它可能多个平台同时采集用户行为，进行广告个性化推送之类；二是 Cookie 如果泄露，问题就会很严重.
HTTP response
服务器收到请求返回响应. 相应用状态码表示结果，下面是几个常见的状态码：
- 200 OK：请求成功
- 400 Bad Request：请求错误
- 403 Forbidden：没有权限
- 404 Not Found：请求资源未找到
- 500 Internal Server Error：服务器内部错误
容易发现“4”开头的都是客户端问题，“5”开头的都是服务器问题.
HTTP 调试
浏览器一般帮助我们处理了请求使用哪一种方法，但是我们如果想要手动发送请求，就要使用一些工具，比如 Postman / Apifox.
[拓展]HTTPS，它是 HTTP Secure，超文本传输安全协议. HTTP 的不安全之处在于信息明文传递、无法证明信息完整、无法验证身份.
改进之处是在 HTTP 上面加入 SSL / TLS.
Web 页面
HTML
Hyper-Text Markup Language，超文本标记语言. 其中定义了很多标签，标签表示网页内容的类型以及格式，标签内含有具体内容.
常用的 HTML 标签：略去吧，这些用用就会了.
在一个 HTML 文档中，首先要声明：<!DOCTYPE html>，然后是根标签<html></html>.
HTML 标签具有属性：
- class：类名
- id：唯一标识符
- style：样式
- ……
需要专门介绍的是<div>标签，本身没有语义，仅仅作为一个容器.
CSS
样式表文件. 在 HTML 中用<link rel='stylesheet' href='xxx.css'>引用这个 CSS 文件，使得它在整个文件中都被引用.
CSS 是 Cascading Style Sheet，层叠样式表，实际上大家有兴趣可以引用两个相互矛盾的 CSS 来看看效果是什么.
JavaScript
这是一种脚本语言，可以不用编译，直接嵌入 HTML，能操纵 HTML 文件中的元素，而且写法和 c++ 很像.
有意思的是 Java 和 JavaScript 什么关系都没有，甚至不是一个公司开发的.
注意的是，最好在<head>里面引入 CSS，而在<body>中引入 JS，以实现提高加载速度的目的.
上面三者被称为前端三件套.
Web 开发工具
可以在浏览器中使用 F12+Fn 进入开发者模式，用 Ctrl+S 保存网页文件.
Web 应用基础
对于静态网页，网页的内容全部都是固定的，服务器不需要进行逻辑处理.
但是静态网页并不能满足所有的需求，这时候我们就需要考虑动态网页. 在动态网页中，服务器可能有一个模板文件，收到请求后读取特定的文件，然后进行填充.
但是服务器不一定能做完所有事，我们可以将“填充”的任务交给客户端完成. 这时候就是一种前后端分离.
一个简单的例子是在 B 站上搜索某个关键词：
- 客户向前端服务器请求
- 前端服务器返回模板
- 网页上 JS 脚本向后端服务器请求数据
- 客户端收到响应进行填充
这里面传输数据的格式由开发者决定，称为 API.
这与动态网页也不相同，它提升了用户体验——在动态网页情况下，返回的是一整个网页，而前后端分离时，用户会看到一个网页框架，然后内容逐渐显示出来.
[拓展]前后端分离的安全问题：攻击者可以修改 JS 中的 API，使得请求本身是错误的.
建议的之后学习路径：
- 数据库 & SQL
- 前端
- 后端