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

请求方法,常见的有:

  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. 后端

讲座 - Web 基础
https://physnya.top/2024/11/17/learn-web/
作者
菲兹克斯喵
发布于
2024年11月17日
许可协议