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

【一】前端和后端介绍

【1】什么是前端

与用户进行交互，让用户输入数据以及展示相应数据的媒介就叫前端
前端可以是浏览器的界面，也可以是客户端的界面，还可以是手机的界面。。

【2】什么是后端

在整个应用的背后，不直接与用户打交道的用于执行真正业务逻辑的代码。
比如我们自己写的 Python程序...

【3】前端的学习思路

（1）前端三剑客

HTML / CSS / JavaScript（JS）

（2）HTML

网页的骨架，没有任何样式

（3）CSS

在骨架的基础上，添加血肉渲染，让它成为一个人

（4）JavaScript

控制页面的动态效果
- 让这个人活动起来，会哭会笑，成为一个真正的man。

【二】浏览器访问地址全流程

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

用户在浏览器的地址栏中输入目标地址：（https://www.bilibili.com/）后回车，则进入目标网址
域名：https://www.bilibili.com/

（1）URL的组成

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

HTTP 请求报文的例子：

【2】DNS解析

浏览器会先检查是否有缓存过该域名的 IP 地址，如果有缓存则直接使用，若没有则浏览器会向本机的DNS缓存查找域名对应的 IP 地址。
带着域名就会不断地找服务器做域名解析直至解析出指定的 IP 和 PORT
举个例子
- 我们经常通过 ping www.baidu.com 来检验我们的服务器是否能连通外网
- 其实在 ping www.baidu.com 过程中，就发生了 DNS 解析操作

C:\Users\11158>ping www.baidu.com

正在 Ping www.a.shifen.com [180.101.50.242] 具有 32 字节的数据:
来自 180.101.50.242 的回复: 字节=32 时间=9ms TTL=52
来自 180.101.50.242 的回复: 字节=32 时间=9ms TTL=52
来自 180.101.50.242 的回复: 字节=32 时间=10ms TTL=52
来自 180.101.50.242 的回复: 字节=32 时间=9ms TTL=52

180.101.50.242 的 Ping 统计信息:
    数据包: 已发送 = 4，已接收 = 4，丢失 = 0 (0% 丢失)，
往返行程的估计时间(以毫秒为单位):
    最短 = 9ms，最长 = 10ms，平均 = 9ms

我们可以看到，百度的 IP 地址就是 180.101.50.242
- 通过浏览器输入 http://180.101.50.242/
- 等价于，我们在浏览器输入 https://www.baidu.com/

【3】建立TCP连接

TCP连接的三次握手
- 第一次：客户端向服务端提交请求
- 第二次：服务端确认客户端并回复
- 第三次：客户端和服务端建立连接
浏览器和服务器建立TCP连接（80端口）

【4】发送HTTP请求

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

【5】服务器处理请求

后端服务器接收到请求和携带的数据后，对传入的数据进行处理。
Python的后端框架 Django / flask / fastapi 等。

【6】服务器发送HTTP响应

数据处理完成后返回给客户端指定的响应内容。该响应包括状态码、响应头和响应体。
状态码：服务器对请求的处理结果。
响应头：包含了一些元信息
响应体：包含了请求的实际内容。

【7】前端拿到响应数据

浏览器接收到服务器发送的HTTP响应后，会根据响应的内容进行解析和渲染。
在前端页面上渲染指定的结果或者页面

【8】断开TCP连接

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

【三】HTTP协议初始

【1】什么是HTTP协议

HTTP协议（HyperText Transfer Protocol，超文本传输协议）
HTTP协议构建于 TCP / IP 协议之上
- 属于应用层协议
主要用于传输与超文本相关的资源文件。
- 如HTML网页，CSS，JS，图片，视频，音频等。
规定了服务端与浏览器之间的数据交互格式及其他事项
如果服务端遵循 HTTP协议就可以被浏览器正常访问并展示内容
如果服务端不遵循其协议浏览器就不会正常访问和展示，但是并不影响服务端

【2】HTTP协议特点

现在的HTTP协议基于数据是否加密，主要分两种。
直接构建于TCP协议之上
- 没有进行加密传输数据的是HTTP协议
- 默认通信端口是80端口
- 常用端口有：3000，5000，8000，8080等
构建于TLS或SSL协议之上
- 对数据使用SSL加壳加密传输数据的是HTTPS协议
- 默认通信端口是443端口
- 常用端口8443。
HTTP协议具有无状态、无事务、所有请求必有所回应的特点

【重点】

（1）基于请求、响应

服务端永远不会主动给客户端发消息，必须是客户端先请求服务端被动响应。
服务端必须响应数据
所有的请求都是由客户端发起

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

应用层协议：HTTP，HTTPS，FTP...

（3）无状态

客户端每次都会主动向服务端发送请求
服务端响应客户端请求，但是服务端不保存客户端状态
所以无状态是指HTTP协议默认情况下，服务端不识别客户端的。

（4）短连接

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

（5）长连接

客户端和服务端不断地在数据交互直至数据拿到并处理，处理完成后不会断开连接
websocket：就是一个长连接

【四】HTTP协议请求和响应格式

【1】请求格式

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

【2】响应格式

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

【3】请求头（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通信过程中，请求头也可以自定义的，但是不能出现多节编码字符，例如中文。

常见的 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视频

【4】请求方法（HTTP Request Method）

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

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

（1）数据格式

服务端给客户端发送消息应该遵循的数据格式
- 响应首行（HTTP协议，响应状态码，协议版本）
- 响应头（一堆的 K:V 键值对）
- \r，\n 换行（换行不能省略）
- 响应体（用浏览器展示给用户看的页面内容）

（2）响应状态码

用于表达本次服务端在接收客户端请求之后的操作结果的成功或失败结果

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

（3）常见的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	服务器无法存储完成请求所必须的内容。

（4）响应头

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	指定客户端请求服务器的报文中，允许包含哪些请求头。

（5）示例

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:
    from_client_data = conn.recv(1024)
    from_client_str = from_client_data.decode()
    print(f'from_client_str:>>>>{from_client_str}')

    # [1]响应首行：协议版本 响应状态码 换行（\r\n）
    response_line = "HTTP/1.1 200 OK\r\n"
    # [2]响应头
    response_header = "Server: Python Studyclass\r\n"
    # [3]换行
    response_blank = '\r\n'

    html_head = '<html>'
    # [4]响应体
    response_content = "Hello World!"

    html_foot = '<html/>'

    response_body = html_head + response_content + html_foot

    # [5]拼接响应数据并转为二进制发送
    to_client_data = response_line + response_header + response_blank + response_body
    to_client_data_bytes = to_client_data.encode()
    conn.send(to_client_data_bytes)

【五】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://img-baofun.zhhainiao.com/fs/f69cdfdca9b7ebb1efe68cc5172b88ba.jpg">
</body>
</html>

【3】文档结构

<!-- 单行注释 -->

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

<html>
    <head></head>：head内的标签不是给用户看的，而是定义一些配置，主要是给浏览器看的
    <body></body>：body内的标签，写什么浏览器就渲染什么，用户就能看到什么
</html>

<!DOCTYPE html>  #声名当前文档的类型 html / xml
<html lang="en">  # lang 语言
<head>  # 头
    <meta charset="UTF-8">  # meta 声名编码格式等参数
    <title>Title</title>  # title 页面标题
</head> # 头的结尾
<body> # 身体
# 放入想要设计的标签及页面的样式
</body>  # 身体的结尾
</html>  # 整个文档的结尾

示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>莱昂纳多·迪卡普里奥。小李子</title>
</head>
<body>
<h1>小李子</h1>
<img src="https://q9.itc.cn/images01/20240326/e02aec2fea0d477fb79c7afdbdceccab.jpeg">
</body>
</html>

【六】常用标签介绍

【1】title

标题标签
控制网页小标题

<title>Title</title>

【2】style

内部用来书写CSS代码

<style></style>

【3】script

内部用来书写JS代码(可以引入外部JS文件)

<script></script>

【4】link

引入外部CSS文件

<link rel="stylesheet" href="">

【5】meta

标签是一种HTML标签，用于在网页中提供元数据（metadata）。
- 元数据是描述数据的数据，它们提供关于网页内容、字符集、作者、关键字等信息，帮助搜索引擎和浏览器理解和处理网页。

<!-- 【5】meta 标签 用来 定义当前文档的参数 元数据 charset ： 默认文档的编码格式-->
    <meta charset="UTF-8">

【示例】

<!DOCTYPE html>
<html lang="en">
<head>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.js"></script>

    <!--【1】title：控制页面上显示的页面标题内容-->
    <title>Title</title>

    <!--【2】style标签 用来书写css样式 -->
    <style>
        h1 {
            color: red;
        }
    </style>

    <!--【3】script标签  用来书写 JavaScript  动作 -->
    <script>
        // 获取到当前 id 值为 d1 的标签
        $("#d1").click(function () {
            alert(111)
        })
    </script>

    <!--【4】link 标签  用来引入css文件-->
    <link rel="stylesheet" href="h2.css">

    <!-- 【5】meta 标签 用来 定义当前文档的参数 元数据 charset ： 默认文档的编码格式-->
    <meta charset="UTF-8">
</head>
<body>

【七】常用标签介绍二

【1】标签分两类

<h1>【一】标签分两类</h1>
<h2 id="d1">【1】单标签(自闭和标签)</h2>

<img src="" alt="">  # 只有头没有尾
<h2>【2】双标签</h2>
<p>标签既有头有尾</p>

【2】head 头里面常用的标签

<h1>【二】head头里面常用的标签</h1>
<p>link : 引入css文件</p>
<p>script : 内部可以书写js代码 标签上可以引用外部 js 文件</p>
<p>style : 内部书写css代码</p>

【3】body里面常用的标签

<h1>【三】body里面常用的标签</h1>
<h2>【1】标题标签</h2>
<p>几级标题 1 ~ 6 及标题 并且标题标签会自动加粗</p>
<h3>3</h3>
<h4>4</h4>
<h5>5</h5>
<h6>6</h6>
<h7>7</h7>
<h8>8</h8>
【2】加粗标签
<b>加粗的文本</b>

【3】斜体标签
<i>斜体的文本</i>

【4】下划线标签
<u>有下划线的文本</u>

【5】删除线标签
<s>删除线的文本</s>

【6】段落标签
<p>段落的文本</p>
<p>段落的文本</p>

【7】换行标签
<p>白日依山尽，
<br>
黄河入海流!</p>

【8】水平分割线标签
<p>白日依山尽，</p>
<hr>
<p> 黄河入海流!</p>

【9】a标签：超链接标签
<p>可以指定跳转地址进行跳转</p>
<a href="https://wwww.baidu.com">点我有惊喜!</a>

【10】img标签：图片渲染标签
渲染图片 本地或者基于网络的链接
<img src="OIP-C.jpg" alt="">
<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="">

【11】ul标签和 li标签
<p>无序列表</p>
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>

【12】ol标签和li标签
<p>有序列表</p>
<ol>
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ol>

【13】div标签
<p>块级标签:在页面中划分出一块位置来存储相应的内容</p>
<div>
    <p>1</p>
    <p>2</p>
</div>
<div>
    <p>3</p>
    <p>4</p>
</div>

【14】span标签
行级标签：每一个span都是一行
<span>1111</span>
<span>222</span>

【15】table标签
<p>表格标签</p>
<table style="border: 1px solid red">
    <!--表头-->
    <thead>
    <!-- 一行数据 标识 -->
    <tr>
        <!--加粗-->
       <th>用户名</th>
        <!--普通-->
        <td>密码</td>
    </tr>
    </thead>
    <!--表体-->
    <tbody>
    <tr>
        <td>username</td>
        <td>password</td>
    </tr>
    </tbody>
</table>

标签：HTTP,请求,标签,介绍,响应,HTML,服务端,客户端
From： https://www.cnblogs.com/chosen-yn/p/18261297

前端和后端介绍、浏览器访问全过程、HTTP协议以及协议请求和响应格式、HTML介绍及常用标签介绍

【一】前端和后端介绍

【1】什么是前端

【2】什么是后端

【3】前端的学习思路

（1）前端三剑客

（2）HTML

（3）CSS

（4）JavaScript

【二】浏览器访问地址全流程

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

（1）URL的组成

【2】DNS解析

【3】建立TCP连接

【4】发送HTTP请求

【5】服务器处理请求

【6】服务器发送HTTP响应

【7】前端拿到响应数据

【8】断开TCP连接

【三】HTTP协议初始

【1】什么是HTTP协议

【2】HTTP协议特点

【重点】

（1）基于请求、响应

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

（3）无状态

（4）短连接

（5）长连接

【四】HTTP协议请求和响应格式

【1】请求格式

【2】响应格式

【3】请求头（Request Head）

【4】请求方法（HTTP Request Method）

（1）数据格式

（2）响应状态码

（3）常见的HTTP状态码

（4）响应头

（5）示例

【五】HTML介绍

【1】什么是HTML

【2】基础页面

【3】文档结构

【六】常用标签介绍

【1】title

【2】style

【3】script

【4】link

【5】meta

【示例】

【七】常用标签介绍二

【1】标签分两类

【2】head 头里面常用的标签

【3】body里面常用的标签

相关文章

赞助商

阅读排行