标签：Web HTTP 请求 标签 响应 HTML 服务端 客户端

Ⅰ 前端引入

【一】前端/后端

【1】什么是前端

• 任何与用户直接打交道的操作界面都可以称之为前端
• 前端可以是浏览器的界面、也可以是客户端的界面、还可以是手机的界面 ...
  • 比如电脑界面、手机界面、平板界面

【2】什么是后端

• 不直接与用户打交道的用于执行真正业务逻辑的代码
• 在整个应用的背后，不参数用户输入和输出交互的背后，对用户输入的数据进行校验和加密等逻辑的位置
  • 比如C代码，Java代码，Python代码

【二】为什么学前端

• 看懂前端代码，能搭建简单的页面

【三】前端学习思路

【1】成仙途

【2】什么是 HTML/CSS/JavaScript

【3】前端基础

【四】前端三剑客

【1】HTML

• 网页的骨架，没有任何样式
  • 蜡笔小新不穿衣服 赤裸裸的(难看)

【2】CSS

• 给骨架添加样式
  • 穿上衣服 化好妆(好看)

【3】JavaScript(JS)

• 控制页面的动态效果
  • 扭起来 跳起来 动起来(生动)

【五】前端框架

• BOOTSTRAP/JQuery/Vue
• 提前封装好了很多操作，只需要按照固定的语法调用即可

【1】Bootstrap （ HTML + CSS ）

• 做前后端结合项目的时候，因为 Bootstrap 小而轻便并且好上手! 学
• 在后面的开发过程中如果 对 Vue 掌握不牢 直接用 Bootstrap

【2】jQuery ( JavaScript )

• 封装了一系列 JS 操作 能够大大简化你的 js 代码和操作方式
• jQuery封装了一个工具 Ajax ----> 帮助我们从前端向后端发送请求获取数据
• Vue框架 里面也有一个类似的东西 axios

Ⅱ Web服务器的本质

【一】从浏览器输入一个地址到看到页面信息的过程

【1】在浏览器中输入网址（URL）

• 用户在浏览器的地址栏中输入目标网址（例如：https://www.example.com），并按下回车键。

【2】DNS解析

• 浏览器会先检查是否有缓存过该域名的IP地址，如果有缓存则直接使用，否则浏览器会向本机的DNS缓存查找域名对应的IP地址。
• 如果找不到，则浏览器会向递归解析服务器发送DNS查询请求。
• 这个过程中可能包括本地Hosts文件的解析，本地DNS缓存的查询以及顶级域名服务器（Root DNS Server），依次通过多级的DNS服务器逐步解析出目标域名的IP地址。
• 例如：
  • 用户输入的URL为https://www.example.com，经过DNS解析后得到IP地址为192.0.2.123。

【3】建立TCP连接

• 浏览器使用获取到的IP地址和默认的端口号（通常是80）与目标服务器建立TCP连接。
• 这个过程涉及到TCP/IP的三次握手，确保客户端和服务器之间建立稳定可靠的连接

【4】发送HTTP请求

• 一旦TCP连接建立成功，浏览器会发送一个HTTP请求给目标服务器。
• 该请求会包含一些重要信息，例如请求方法（GET、POST等），请求头（User-Agent、Cookies等）和请求体（如果有数据需要上传）。
• 例如：
  • 浏览器发送一个GET请求给服务器，请求的资源路径为/。

【5】服务器处理请求

• 目标服务器接收到浏览器发送的HTTP请求后，会根据请求的内容进行相应的处理。
• 这个过程会涉及到后端服务的运行，例如使用Nginx作为反向代理服务器将请求转发给后端Web框架（如Django、Flask等）。

【6】服务器发送HTTP响应

• 服务器处理完请求后，会生成一个HTTP响应，该响应包括状态码、响应头和响应体。
• 状态码表示服务器对请求的处理结果，响应头包含了一些元信息，而响应体包含了请求的实际内容。服务器将该HTTP响应发送回客户端浏览器。

【7】接收并渲染页面

• 浏览器接收到服务器发送的HTTP响应后，会根据响应的内容进行解析和渲染。
• 浏览器会根据Content-Type等响应头信息确定如何展示内容，如果内容是HTML页面，则浏览器会解析HTML标记、加载外部样式表和脚本文件，并将页面渲染出来。

【8】断开TCP连接

• 页面渲染完成后，如果没有keep-alive机制或者WebSocket等长连接技术，浏览器会发送一个关闭TCP连接的请求给服务器，进而两者断开连接。

• 需要注意的是，上述过程中还涉及到重定向、HTTPS安全连接以及其他一些特殊情况的处理，但基本的流程如上所述。

• 此外，还有一些细节可以进一步扩展和讨论，例如HTTP/2、HTTP/3等协议的特点及优化。

【9】总结模板

# 【一】从浏览器输入地址 ---> 回车
【1】需要再浏览器的地址栏中输入指定的网址
输入目标网址后回车 https://www.baidu.com/
# 【2】https://www.baidu.com/ 这叫域名
域名是 用一串英文字符来代表 一串IP和端口的标志
有了域名 ---> 需要的是 IP和PORT ---> 需要做 DNS 解析
带着域名就会不断地找服务器做域名解析 直至 解析出指定的 IP和PORT
拿到 IP 和 PORT
# 【3】带着 IP 和 PORT 和你的服务器之间建立 TCP连接
三次握手
第一次：客户端想服务端提交请求
第二次服务端回复给客户端
第三次客户端和服务端建立连接
# 【4】TCP的连接
流式协议 数据就会一直传输 不断想你的服务器发送请求和携带响应的数据
# 【5】后端服务器接收到请求和携带的数据
并且对你传入的数据进行处理
Python的后端框架 Django / flask  /fastapi
# 【6】数据处理完成后返回给客户端指定的响应内容
在响应内容中会携带相应的响应标志
# 【7】前端拿到响应数据
在前端页面上渲染指定的结果或者页面
# 【8】渲染完成后，和服务端断开连接
断开的连接不是指TCP的连接
本次的请求被断开

【二】从浏览器输入一个地址到看到页面信息的详细过程

【1】总览

• 浏览器先分析超链接中的URL:分析域名是否规范
• 浏览器向DNS请求解析请求解析 https://www.example.com/index.html 中的ip地址
• DNS将解析出的ip地址返回浏览器
• 浏览器与服务器建立TCP连接（80端口，三次握手）
• 服务器接收到浏览器请求文档（GET/index.html）进行处理
• 服务器给出响应，将文档index.html发送给浏览器，浏览器进行解封装。
• 浏览器渲染 index.html 中的内容（渲染页面）
• 释放TCP连接（四次挥手）

【2】浏览器先分析超链接中的URL

（1）输入的浏览器网址分析

• 首先，URL是由协议、主机和端口（默认为80）以及文件名三部门构成。
• 如：https://www.example.com:80/index.html
  • 协议(https://www.example.com):端口(80)/详细地址
• 我们可以理解为 URL 就是我们在浏览器中输入的地址，而输入的URL中就携带者域名
  • 比如 https://www.baidu.com 访问百度官网
  • 其中 www.baidu.com 就是百度服务器的域名

（2）简析URL的组成

• URL 的元素组成也和上述大致相似
• 其中 访问协议 和 域名是必须的，目录名和文件名可以忽略

• 相应的 URL 请求对应在服务器上的文件路径如下

（3）分析域名是否规范

• 首先，浏览器做的第一步就是会解析URL得到里面的参数，分析域名是否规范，并将域名和需要的请求的资源分离开来，从而了解需要请求的是哪个服务器，请求的是服务器上的什么资源等等。
• 浏览器对URL进行解析之后，浏览器确定了目标服务器和文件名，接下来就是需要根据这些消息封装成一个HTTP请求报文发送出去。
• HTTP请求报文的例子为：

• 对于这个封装，其中涉及到计算机网络中的知识。
  • 就是说发送端在层与层之间传输数据的时候，每经过一层必定会被打上一个该层所属的首部信息。
  • 反之，接收端在层与层之间传输数据的时候，没经过一层就会把该层对应的首部消息消除。

Ⅲ HTTP协议

【一】引入

【1】Mac地址 / 广播 / ethernet / IP / / port / HTTP协议 internet协议

【2】哪些可以充当客户端

• 自己写的python代码(TCP客户端)
• 别人写的浏览器

cs架构与bs架构

bs本质也是cs

【3】问题

• 我们自己写的TCP服务端与浏览器之间通信了 但是浏览器不识别服务端数据

【4】HTTP协议的起源

• 不同的服务端数据的组织策略千差万别，但是浏览器却需要做到能够统一处理
• 最佳的解决措施是统一规定一个标准>>>:HTTP协议

【5】什么是HTTP协议

• 规定了服务端与浏览器之间的数据交互格式及其他事项
• 如果服务端遵循HTTP协议 就可以被浏览器正常访问并展示内容
• 如果服务端不遵循HTTP协议 浏览器就不会正常访问和展示 但是不影响服务端
• 如果这个应用特别火爆 那么完全可以让用户下载专属的客户端(app)

Ⅳ HTTP协议特点

【一】什么是HTTP协议

• HTTP协议（HyperText Transfer Protocol，超文本传输协议）
  • 由蒂姆·伯纳斯-李于1989年为了推广互联网技术而推出的一种无状态网络应用协议
• HTTP协议构建于TCP/IP协议族之上
  • 属于应用层协议。
• 主要用于传输与超文本相关的资源文件
  • 如HTML网页，css，js，图片，视频，音频等。

【二】现行的HTTP协议基于数据是否加密，主要分两种。

【1】一种是正常用的 HTTP协议

• 直接构建于TCP协议之上
  • 没有进行加密传输数据的是HTTP协议
  • 默认通信端口是80端口
  • 常用端口有：3000，5000，8000，8080等。

【2】一种是 有 TLS / SSL 认证的 HTTPS协议

• 构建于TLS或SSL协议之上
  • 对数据使用SSL加壳加密传输数据的是HTTPS协议
  • 默认通信端口是443端口
  • 常用端口8443。

注意：在本地电脑上双击html网页也可以通过浏览器来查看HTML网页信息，但是这种方式是采用file协议来访问的。
file协议叫本地文件浏览器协议，顾名思义，是只能访问本地电脑中的路径文件，用户无法通过file协议访问另一台电脑中的文件。

除了http或https协议可以提供html等资源的浏览服务以外，还有ws或wss也可以用于在浏览器中提供网页服务，但是ws或wss一般用于web网络即时通信比较多。

【三】HTTP协议的四大特性（重点）

• http协议具有无状态，无事务，所有请求必有所回应的特点。

【1】1. 基于请求和响应的协议

• 服务端永远不会主动给客户端发消息 必须是客户端先请求服务端被动响应
• 所有的请求都是由客户端发起
• 服务端必须响应数据
• http协议是基于客户端请求，服务端响应模型来实现的。
• 所以一般而言对于http协议通信的双方来说，发起请求的一方只能是客户端，而响应数据的一方只能是服务端。

【2】2. 基于TCP/IP作用于应用层之上的协议

• 应用层协议:HTTP HTTPS FTP ...

【3】3. 无状态

• 服务端不保存客户端状态(纵使见她千百遍 我都当她如初见)
• 所谓的无状态是指http协议默认情况下，服务端不识别客户端的。
• 在客户端多次发起请求到同一个服务器，服务端接收到客户端的请求在处理完成以后就会主动断开。
• 所以对于客户端的每一次请求，对于服务端来说，都是一次新的客户端请求。
• 也就是说，服务端无法区分多次请求的客户端是否同一个客户端。
• HTTP协议默认情况下不会保存客户端的状态

【4】4. 短连接

• 不保持客户端与服务端之间的链接通道
• 客户端向服务端发起请求，请求收到 建立连接
• 服务端响应数据，响应数据之后立马断开连接

【5】长连接

• 客户端和服务端不断地在数据交互直至数据拿到并处理，处理完成之后不会断开连接

补充:websocket(长连接) 主要用于加好友聊天等业务

Ⅴ HTTP协议的数据格式：请求和响应格式

【一】请求格式和 响应格式

【1】请求格式

• 客户端给服务端发送消息应该遵循的数据格式
  • 1.请求首行(请求方法 协议版本)
  • 2.请求头(一大堆k:v键值对)
  • 3.(换行不能省略)
  • 4.请求体(携带敏感数据:密码 身份照号...) 不是一直都有

【2】 响应格式

• 服务端给客户端发送消息应该遵循的数据格式
  • 1.响应首行(响应状态码 协议版本)
  • 2.响应头(一大堆k:v键值对)
  • 3.(换行不能省略)
  • 4.响应体(给浏览器展示给用户看的页面内容)

【二】请求响应模型

• HTTP协议永远都是客户端发起请求，服务器回送响应。

【1】请求报文格式

• 对于客户端的http请求格式一般分三部分组成
  • 分别是请求行、请求头、请求体（部分请求方法不具有请求体）。

• 一般如下：

请求方法  请求路径  http协议版本                   <---- http响应的一行内容，也叫请求行
请求头选项1: 选项值
请求头选项2: 选项值
....
请求头选项n: 选项值

请求体(可以有多行，前后必有空行)

• 例如，发起http请求访问，基本的http请求格式如下：

GET  /get  HTTP/1.1
Host: httpbin.org
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/103.0.0.0 Safari/537.36

【2】发送GET请求

telnet httpbin.org 80

GET  /get  HTTP/1.1
Host: httpbin.org
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/103.0.0.0 Safari/537.36

【3】发送POST请求

• 发送POST请求，并发送json数据格式。

POST /post HTTP/1.1
Host: httpbin.org
Content-Type: application/json
Content-Length: 44

{"name": "xiaoming", "age": 16,"pwd": "123"}

【4】响应报文格式

• 上面看到的内容实际上就是远程http服务器通过http通信返回的响应报文。格式如下

协议版本 响应状态码 响应文本提示                               <-----  http响应的第一行内容，响应行
响应头选项1: 选项值
响应头选项2: 选项值
....
响应头选项n: 选项值

响应体（服务端返回的正文信息，前后必有空行）

【三】协议报文详解

• 前面我们提到，http协议是应用层协议，是基于tcp协议。
• 在前面的网络编程曾经学习过tcp协议的通信是可靠安全的
  • 所以实际上来说，因为http协议是基于TCP协议来传输数据的，所以http协议就具有了有所请求必有所回应的特点，也因此我们可以说，http协议一次通信的最基本的流程都是具有请求报文与响应报文的。
• 请求报文与响应报文就组成http协议的通信内容（HTTP报文）。
  • 不管是请求报文还是响应报文在上面的发送请求与查看服务器响应报文
  • 我们都可以看到，实际上HTTP报文就是一段连续的多行的文本。

【1】HTTP请求流程

【2】请求报文

• 请求报文（HTTP Rquest）主要通过客户端发送用于表达对服务器资源的操作。
• 基本格式：

请求方法  请求路径  http协议版本                   <---- http响应的一行内容，也叫请求行
请求头选项1: 选项值
请求头选项:2 选项值
....
请求头选项n: 选项值

请求体(可以有多行，前后必有空行)

（1）请求行

• 请求行（HTTP Request Line）
  • 表示请求报文的首行
• 主要三部分组成，使用单个空格隔开，分别是：
  • 请求方法
  • 请求路径
  • HTTP协议版本。

（2）请求方法

• HTTP请求方法（HTTP Request Method）
• 表示客户端希望对服务器指定资源进行哪一种类型的操作
• 存在多种HTTP请求方法表达增删查改。
• 常见请求方法如下：

请求方法	描述	报文中是否包含请求体
GET	表示客户端希望从服务器中获取或下载资源信息	Flase
POST	表示客户端希望上传文件或通过请求在服务器创建资源信息。	True
PUT	表示客户端希望修改或更新服务器资源（表示修改全部资源信息，例如数据表的一整个记录）	True
PATCH	表示客户端希望修改或更新服务器资源（表示修改部分资源信息，例如数据表的一个记录里面某个属性值）	True
DELETE	表示客户端希望删除或废弃服务器资源	Flase
OPTION	表示客户端希望获取服务器所支持的请求方法列表	Flase
HEAD	表示客户端希望获取服务器支持的跨域地址列表	Flase

（3）请求路径

• 表示远程web服务器的一个可访问资源。
• 一般就是代表的就是一个服务器的具体文件或数据表中的记录信息，或一个服务端里面的函数或方法。

/     表示根路径
/1.html   表示web服务器中web根目录下的1.html文件
/login    表示web服务器中的一个login方法或者login函数

（4）http协议版本

• 表示客户端目前使用的HTTP协议版本，并期望服务端也采用同样版本的协议与客户端进行通信。
• http协议发送至今已经到了HTTP2.0版本，目前主流的使用版本有：HTTP/1.0 、HTTP/1.1

（5）请求头

• HTTP请求头（Request Head）
  • 主要对客户端请求操作进行限制条件与补充说明。
• 常见的标准HTTP请求头如下：

选项	描述	值
Host	指定客户端请求的服务器的域名和端口号。	www.baidu.com
Content-Type	告诉服务器，客户端请求携带的请求体数据的媒体类型信息（MIME类型）
User-Agent	告知服务器HTTP 客户端网络代理程序的版本信息，一般就是浏览器的版本信息。
Authorization	告知服务器客户端的Web认证信息。
Content-Length	HTTP报文中请求体的大小，以字节为单位。
Referer	告诉服务器该网页是从哪个页面链接过来。也就是上一页页面的地址。
Accept	指定客户端能够接收并理解的媒体类型类型（MIME类型），用于表达希望服务端的返回资源格式。
Accept-Encoding	指定浏览器可以支持的web服务器返回内容压缩编码类型。	gzip, deflate, br
Pragma	指定服务端控制缓存行为。http/1.0以前的字段。	Pragme: no-cache
Cache-Control	指定服务端控制缓存行为。http/1.1以后的字段。	Cache-Control: no-cache
Upgrade	向服务器请求在当前http协议的基础上升级采用新的某种传输协议以便服务器进行转换	常用于http协议升级到ws协议。
Connection	指定本次http通信结束以后，是否关闭TCP网络连接。如果设置持久连接，则可以在一次会话中，可以使用同一个TCP连接，进行多次的HTTP通信，提高效率。	持久连接，Connection: keep-alive 非持久连接，Connection: close

注意：在http通信过程中，请求头也是可以自定义的，但是不能出现多字节编码字符

（6）常见的MIME格式

类型	描述	别名
text/html	HTML网页
application/json	json文本	text/json
text/plain	纯文本，普通文本
text/xml	xml文档
application/javascript	js脚本	text/javascript
text/css	css样式
image/png	png格式图片
image/jpeg	jpg格式图片
image/gif	gif格式图片
application/x-gzip	gzip格式压缩包
application/msword	doc文档
application/vnd.openxmlformats-officedocument.wordprocessingml.document	docx文档
application/vnd.ms-excel	xls文档
application/vnd.openxmlformats-officedocument.spreadsheetml.sheet	xlsx文档
application/pdf	pdf文档
audio/mpeg	mp3音频
video/mp4	mp4视频

【3】响应报文

• HTTP响应报文（HTTP Response）
  • 是服务端在接收理解、处理并返回客户端操作的结果。
  • 主要有三部分组成：
    • 响应行，响应头与响应体。
• 注意：针对部分请求方法（delete、OPTION、HEAD）的返回结果有时候是没有响应体的。

协议版本 响应状态码 响应文本提示                               <-----  http响应的第一行内容，响应行
响应头选项1: 选项值
响应头选项2: 选项值
....
响应头选项n: 选项值

响应体（服务端返回的正文信息，前后必有空行）

（1）响应行

• HTTP响应行（HTTP Request Line），是HTTP响应报文的首行
• 由三部分组成，使用单个空格隔开：
  • HTTP协议版本
  • 响应状态码
  • 响应信息。

（2）HTTP协议版本

• 响应报文的HTTP协议版本，与客户端的协议版本保持一致。
• 例如：HTTP/1.0，HTTP/1.1。

（3）响应状态码

• 状态码（Status Code）

  • 用于表达本次服务端在接收客户端请求之后的操作结果的成功或失败结果，由三位整数组成。
• • 用于表达本次服务端在接收客户端请求之后的操作结果的成功或失败结果，由三位整数组成。

状态码类型	描述
1xx	告诉客户端，本次请求，服务端还在持续处理中，并没有结束。
2xx	告诉客户端，本次请求，服务端已经接收并成功受理了。
3xx	告诉客户端，服务端位置发生改变，希望客户端重定向访问跳转新的服务器地址进行请求
4xx	告诉客户端，本次请求有误，服务器无法处理。
5xx	告诉客户端，本次请求服务端在处理过程中服务端出错了。

（4）常见的HTTP状态码

状态码	响应信息	描述
101	Switching Protocols	服务器已经理解了客户端的请求，并将通过Upgrade消息头通知客户端采用升级协议来完成请求。
200	OK	请求已成功，请求所希望的响应头或数据体将随此响应返回。出现此状态码是表示正常状态。常用于GET，PUT或PATCH
201	Created	请求已成功，请求的资源已经创建成功或更新完成，常用于POST，PUT或PATCH
204	No Content	请求已成功，但是没有任何内容返回。常用于DEELTE
301	Moved Permanently	永久重定向，表示当前客户端请求的资源地址已经永久发生改变。
302	Move Temporarily	临时重定向，表示当前客户端请求的资源地址还存在，但是访问客户端达不到访问资源的条件，所以暂时无法访问。
304	Not Modified	表示本次客户端请求的资源，并非来自服务端，而是本地缓存。如果web项目有做了客户端缓存，一般静态文件都会出现304
305	Use Proxy	被请求的资源必须通过指定的代理才能被访问。
307	Temporary Redirect	请求的资源临时从不同的URI 响应请求。
400	Bad Request	本次请求，报文语义有误或请求参数有误，当前请求无法被服务器理解。
401	Unauthorized	本次请求，需要需要用户验证，但用户并没有提供认证。
403	Forbidden	服务器已经理解请求，但是拒绝执行它。一般是因为没有权限导致的。
404	Not Found	请求失败，请求所希望得到的资源未被在服务器上发现，请求路径不存在。
405	Method Not Allowed	请求行中指定的请求方法不能被用于请求相应的资源。使用了错误的请求方法。
500	Internal Server Error	服务器遇到了一个未曾预料的状况，导致了它无法完成对请求的处理。就是服务端的代码报错了。
502	Bad Gateway	网关宕机，作为网关或者代理工作的服务器尝试执行请求时，从上游服务器接收到无效的响应。一般就是大量访问请求导致服务器瘫痪或宕机了。
503	Service Unavailable	网关过载，由于临时的服务器维护或者过载，服务器当前无法处理请求。
504	Gateway Timeout	网关超时，作为网关或者代理工作的服务器尝试执行请求时，未能及时从上游服务器或者辅助服务器（例如DNS）收到响应。
507	Insufficient Storage	服务器无法存储完成请求所必须的内容。

（5）响应头

• HTTP响应头（Response Head），主要是服务器返回的内容进行补充说明，并提供下一次请求的一些辅助信息。

选项	描述
Content-Type	告知客户端，响应数据的MIME类型
Content-Length	告知客户端，响应数据的字节大小
Content-Encoding	告知客户端，响应数据采用的压缩格式
Server	告知客户端，响应服务器的名字或类型
Date	告知客户端，响应请求的时间
Location	告知客户端，实际要请求的资源地址（用于301或302进行页面跳转）
Cache-Control	告知客户端，响应数据的缓存机制
Refresh	告知客户端，要定时刷新的时间间隔
Connection	告知客户端，本次HTTP通信完成以后是否要保持TCP连接。
Transfer-Encoding	告知客户端，数据是以分块方式响应回来的。
Content-Disposition	告知客户端，以下载方式打数据的，格式：Content-Disposition: attachment;filename=文件名
Expires	告知客户端，响应数据的过期事件，-1表示马上过期，客户端不要缓存当前响应数据。
Retry-After	告知客户端，应该在多久之后再次发送请求。常见于服务端限流，或503中。
Access-Control-Allow-Origin	指定客户端通过哪些域名下的脚本可以访问服务器资源。
Access-Control-Allow-Methods	指定客户端通过哪些HTTP请求方法访问服务端资源。
Access-Control-Allow-Headers	指定客户端请求服务器的报文中，允许包含哪些请求头。

【四】总结

【1】什么是HTTP协议

• 超文本传输协议，用来规定服务器和浏览器之间数据交互的格式
• 该协议可以不遵循，但是自己写的服务端不能被浏览器正常识别，只能单机使用

【2】HTTP协议的四大特性

（1）基于请求响应

（2）基于TCP/IP之上，作用域应用层之上的协议

（3）无状态

• 不保存用户的信息
  • 早期的网站不需要用户注册 所有人访问的网页数据都是一样的
• 由于HTTP协议是无状态的，所以后来出现了一些专门用来记录用户状态的技术
  • cookie/session/token

（4）无/短链接

• HTTP协议默认是HTTP 1.0 短链接
  • 即两者请求响应后立刻断绝关系，绝大多数网站都用的短链接
• HTTP 1.1 长链接
  • 长链接：双方建立连接之后默认不会断开链接(websocket)

【3】HTTP协议的格式

（1）请求数据格式

• 请求首行（标识HTTP协议，当前请求方式）
• 请求头（多组K:V键值对）
• \r\n\r\n
• 请求体（并不是所有的请求都有，get没有post有，存放的是post请求提交的敏感数据）

（2）响应数据格式

• 响应首行（标识HTTP协议，当前请求方式，响应状态码）
• 响应头（多组K:V键值对）
• \r\n\r\n
• 响应体（返回给浏览器，展示给用户看的数据）

（3）请求方式

• get请求
  • 朝服务端要数据
    • 输入网址获取对应的内容
• post请求
  • 朝服务端提交数据
    • 用户登录 输入用户名密码之后 提交到服务端后端做身份校验

（4）响应状态码

• 用一堆简单的数字来表示一些复杂的状态或描述性信息

（5）URL

• 统一资源定位符(网址)

Ⅵ 服务器模板

# TCP服务端
import socket
 
 
def request_handler(new_client_socket, ip_port):
    """
    接收数据并响应
    :return:
    """
    # 7.接收客户端浏览器发送的请求协议
    request_data = new_client_socket.recv(1024)
    print(request_data.decode())
    # 8﹑判断协议是否为空
    if not request_data:
        print(f"{str(ip_port)}客户端已经下线！！！")
        new_client_socket.close()
        return
    # 9﹑拼接响应的报文
    # 9.1响应行
    response_line = "HTTP/1.1 200 OK\r\n"
    # 9.2响应头
    response_header = "Server:Python20ws/21.1\r\n"
    # 9.3响应空行
    response_blank = "\r\n"
    # 9.4响应主体
    response_body = "<html><h>HelloWorld!<h/><html/>"
    # 10、发送响应报文
    response_data = response_line + response_header + response_blank + response_body
    new_client_socket.send(response_data.encode())
    new_client_socket.close()
    return
 
 
def main():
    # 1，导入模块
    # 2·创建套接字
    tcp_server_socket = socket.socket(socket.AF_INET, socket.SOCK_STREAM)
    # 3·设置地址重用
    tcp_server_socket.setsockopt(socket.SOL_SOCKET, socket.SO_REUSEADDR, True)
    # 4、绑定端口
    address = ("", 10000)
    tcp_server_socket.bind(address)
    # 5﹑设置监听·让套接字由主动变为被动接收
    tcp_server_socket.listen(128)
    # 6﹑接受客户端连接 定义函数request——handler（）
    while True:
        new_client_socket, ip_port = tcp_server_socket.accept()
        print(f"新的连接请求：{ip_port}")
        # 调用函数处理请求
        request_handler(new_client_socket, ip_port)
    # 11·关闭操作
 
 
if __name__ == '__main__':
    main()

Ⅶ HTTP简单操作

【一】在pycharm中代码创建出一个服务端

import socket

server = socket.socket()

ip = '127.0.0.1'
port = 8080
addr = (ip, port)
server.bind(addr)

server.listen(5)


while True:
    conn, addr = server.accept()
    data = conn.recv(1024)
    print(data.decode('utf-8'))
    conn.send(b'hello idiot!')

【二】运行服务端等待连接

【三】在网页输入IP:PORT进行连接

【四】网页发送连接

• 前端网页得到消息，但是消息格式不正确

【五】网页得到响应，服务端有接收到请求

【六】问题:我们自己写的TCP服务端与浏览器之间通信了 但是浏览器不识别服务端数据

• 不同的服务端数据的组织策略千差万别 但是浏览器却需要做到能够统一处理
• 最佳的解决方法就是统一规定一个标准>>>:HTTP协议
• 以下是补全http协议的代码

import socket

server = socket.socket()

ip = '127.0.0.1'
port = 8010
addr = (ip, port)
server.bind(addr)

server.listen(5)

conn, addr = server.accept()
while True:

    data = conn.recv(1024)
    print(data)
    # conn.send(b'hello idiot!') 没有遵循HTTP响应数据 浏览器不识别
    # 【1】响应首行 ： 协议版本 响应状态码 换行(\r\n)
    response_line = "HTTP/1.1 200 OK\r\n"
    # 【2】响应头
    response_header = "Server:Python20ws/21.1\r\n"
    # 【3】换行
    response_blank = '\r\n'

    html_head = '<html>'
    # 【4】响应体
    response_content = "hello idiot!"

    html_foot = '<html/>'

    response_body = html_head + response_content + html_foot

    to_client_data = response_line + response_header + response_blank + response_body

    to_client_data_bytes = to_client_data.encode('utf-8')
    conn.send(to_client_data_bytes)
    
# 或者
    # data = conn.recv(1024)
    # # 发送HTTP响应
    # response = "HTTP/1.1 200 OK\r\n"
    # response += "Content-Type: text/plain\r\n"  # 或者使用 text/html 如果要发送HTML
    # response += "\r\n"  # 空行，表示响应头结束
    # response += "hello idiot!\r\n"  # 响应体，这里只是一个简单的文本字符串
    # 
    # response_bytes = response.encode('utf-8')
    # conn.sendall(response_bytes)
    # conn.close()  # 发送完响应后关闭连接
    

Ⅷ HTML基础

【一】HTML简介

【1】什么是HTML

• 超文本标记语言
• 如果想要让浏览器能够渲染出写的页面，都必须遵从HTML语法
• 我们浏览器看到的页面，内部其实都是HTML代码(所有的网站内部都是HTML代码)

【2】最基础的页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<img src="https://tse3-mm.cn.bing.net/th/id/OIP-C.XJ-2yBSMNIAvjkHkW8-r9gHaHa?w=190&h=190&c=7&r=0&o=5&pid=1.7" alt="my wifi">
</body>
</html>

• 上述语法就是HTML 用于构建网页的骨架(所有的网页都是由HTML组成)

【3】总结

• HTML就是书写页面的一套标准

【二】HTML中的注释语法

• 由于HTML代码非常杂乱无章且非常多，所以我们习惯性的用注释来划分区域方便后续的查找

【1】单行注释

<!-- 单行注释 -->

【2】多行注释

<!--
多行注释1
多行注释2
多行注释3
-->

【三】HTML的文档结构

【1】基础结构

<!DOCTYPE html>  # 声明当前文档的类型 html / xml
<html lang="en"> # lang 语言
<head> # 头
    <meta charset="UTF-8"> # meta声明编码格式 等参数
    <title>Title</title> # title 你的页面标题
</head> # 头的尾巴

<body> # 身体

# 放想要写的标签及页面样式
<img src="https://tse3-mm.cn.bing.net/th/id/OIP-C.XJ-2yBSMNIAvjkHkW8-r9gHaHa?w=190&h=190&c=7&r=0&o=5&pid=1.7" alt="my wifi">
</body> # 身体结尾
</html> # 整个文档的结尾 

注意：HTML代码是没有格式的，可以全部写在一行，只不过我们习惯了缩进来表示代码

【2】基本结构

• HTML的文档结构通常遵循以下基本结构

<!DOCTYPE html>
<html>
<head>
    <title>页面标题</title>
    <meta charset="UTF-8">
</head>
<body>
    <!-- 页面内容 -->
</body>
</html>

• 首先， 声明定义了当前文件是一个 HTML 文件。

  • 接下来是 标签，它是整个 HTML 文档的根元素。
  • 在 标签之内，有两个主要的部分： 和 。
• <head> 用于定义文档的头部信息，其中可以包含一些重要的元素
  • 例如

标签：Web,HTTP,请求,标签,响应,HTML,服务端,客户端
From： https://www.cnblogs.com/zyb123/p/18231747