菲兹克斯喵

外观

讲座 - Web 基础

复制页面

约 1446 字大约 5 分钟

interdisciplinaritylecture

2024-11-17

讲座 - 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

    {
	"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 文档中，首先要声明：<!DOCTYPE html>，然后是根标签<html></html>.

HTML 标签具有属性：

  1. class：类名
  2. id：唯一标识符
  3. style：样式
  4. ……

需要专门介绍的是<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 站上搜索某个关键词：

  1. 客户向前端服务器请求
  2. 前端服务器返回模板
  3. 网页上 JS 脚本向后端服务器请求数据
  4. 客户端收到响应进行填充

这里面传输数据的格式由开发者决定，称为 API.

这与动态网页也不相同，它提升了用户体验——在动态网页情况下，返回的是一整个网页，而前后端分离时，用户会看到一个网页框架，然后内容逐渐显示出来.

[拓展]前后端分离的安全问题：攻击者可以修改 JS 中的 API，使得请求本身是错误的.

建议的之后学习路径：

  1. 数据库 & SQL
  2. 前端
  3. 后端

版权归属：physnya

许可证：署名-非商业性-相同方式共享 4.0 国际 (CC-BY-NC-SA-4.0)