--- url: /posts/e7osczep/index.md --- ## 讲座 - 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 请求方法，常见的有： 1. GET：获取资源 2. POST：提交数据 3. PUT：更新 / 替换服务器资源 4. DELETE：删除服务器资源理论上很多方法可以混用，但是这并不好. 请求如何携带信息，比如说用户名和密码？有常用的三种方法： 1. 路径传参：`http://www.site.com/info/aaa/head.png` 2. 查询字符串传参：`http://www.site.com/info?username=aaa&require=head` 3. 请求体传参：`http://www.site.com/info` ```json { "username": "aaa", "telephone": "123456789" } ``` \[拓展]用户身份验证：可能的使用场景是个性化推送之类. 最简单的想法是使用验证码，但是这样太麻烦；一种常用验证方法是使用 Cookies，Cookie 保存在客户端，之后的请求中自动携带 Cookie 信息. 但是 Cookie 带来安全问题：一是存在第三方 Cookie，它可能多个平台同时采集用户行为，进行广告个性化推送之类；二是 Cookie 如果泄露，问题就会很严重. #### HTTP response 服务器收到请求返回响应. 相应用状态码表示结果，下面是几个常见的状态码： 1. 200 OK：请求成功 2. 400 Bad Request：请求错误 3. 403 Forbidden：没有权限 4. 404 Not Found：请求资源未找到 5. 500 Internal Server Error：服务器内部错误容易发现“4”开头的都是客户端问题，“5”开头的都是服务器问题. #### HTTP 调试浏览器一般帮助我们处理了请求使用哪一种方法，但是我们如果想要手动发送请求，就要使用一些工具，比如 Postman / Apifox. \[拓展]HTTPS，它是 HTTP Secure，超文本传输安全协议. HTTP 的不安全之处在于信息明文传递、无法证明信息完整、无法验证身份. 改进之处是在 HTTP 上面加入 SSL / TLS. ### Web 页面 #### HTML Hyper-Text Markup Language，超文本标记语言. 其中定义了很多标签，标签表示网页内容的类型以及格式，标签内含有具体内容. 常用的 HTML 标签：略去吧，这些用用就会了. 在一个 HTML 文档中，首先要声明：``，然后是根标签``. HTML 标签具有属性： 1. class：类名 2. id：唯一标识符 3. style：样式 4. …… 需要专门介绍的是`

`标签，本身没有语义，仅仅作为一个容器. #### CSS 样式表文件. 在 HTML 中用``引用这个 CSS 文件，使得它在整个文件中都被引用. CSS 是 Cascading Style Sheet，层叠样式表，实际上大家有兴趣可以引用两个相互矛盾的 CSS 来看看效果是什么. #### JavaScript 这是一种脚本语言，可以不用编译，直接嵌入 HTML，能操纵 HTML 文件中的元素，而且写法和 c++ 很像. 有意思的是 Java 和 JavaScript 什么关系都没有，甚至不是一个公司开发的. 注意的是，最好在``里面引入 CSS，而在``中引入 JS，以实现提高加载速度的目的. 上面三者被称为前端三件套. #### Web 开发工具可以在浏览器中使用 F12+Fn 进入开发者模式，用 Ctrl+S 保存网页文件. ### Web 应用基础对于静态网页，网页的内容全部都是固定的，服务器不需要进行逻辑处理. 但是静态网页并不能满足所有的需求，这时候我们就需要考虑动态网页. 在动态网页中，服务器可能有一个模板文件，收到请求后读取特定的文件，然后进行填充. 但是服务器不一定能做完所有事，我们可以将“填充”的任务交给客户端完成. 这时候就是一种前后端分离. 一个简单的例子是在 B 站上搜索某个关键词： 1. 客户向前端服务器请求 2. 前端服务器返回模板 3. 网页上 JS 脚本向后端服务器请求数据 4. 客户端收到响应进行填充这里面传输数据的格式由开发者决定，称为 API. 这与动态网页也不相同，它提升了用户体验——在动态网页情况下，返回的是一整个网页，而前后端分离时，用户会看到一个网页框架，然后内容逐渐显示出来. \[拓展]前后端分离的安全问题：攻击者可以修改 JS 中的 API，使得请求本身是错误的. 建议的之后学习路径： 1. 数据库 & SQL 2. 前端 3. 后端