本文总结：学习前端基础的路线，HTTP协议和其四大特性，数据格式，响应格式和请求格式如何编写，HTTP的状态码都有哪些，最后一个简易的BS案例帮助大家理解👆

Web入门

什么是前端？

任何与操作系统打交道的界面都可以称之为"前端"

例如：手机界面(app) 电脑界面(软件) 平板界面(软件)

什么是后端？

不需要和用户打交道，不需要呈现给用户的逻辑结构，后端是控制核心逻辑的运行；

什么是全栈？

通俗的理解为前后端都会，但是不止于此；

学习web路线

接下来本类博文会分享前端的学习笔记，学习前端的路线是怎么样的呢？

从前端三剑客（HTML、CSS、JS）到框架（JQuery、Bootstrap）到”CV大法”·····

前端基础

HTML、CSS、JavaScript

• HTML：标签
• CSS：选择器和属性
• JavaScript：基础语法和BOM&DOM

三剑客的作用

• HTML：超文本标记语言 （HTML） 是用于构建 Web 内容并赋予其含义和目的的代码；
• CSS：级联样式表 （CSS） 是用于设置网站样式的代码；
• JavaScript ：用于向网站添加交互式功能的编程语言；

BS架构

我们学习Web的目的是为了更好的编写我们的BS架构程序，我们在编写TCP服务端的时候，针对客户端的选择可以是自己写的客户端代码也可以是浏览器充当客户端(bs架构本质也是cs架构)；

数据格式

如果我们在自己编写的服务端发送数据浏览器不识别，原因在于每个人的服务端发送的数据格式千差万别，浏览器有浏览器识别的标准；

这样统一格式的目的？

浏览器可以访问很多的服务端，如何做到无障碍与这么多不同程序员开发的软件实现数据交互？

主要原因：

1. 所选的浏览器自身功能强大，可以自动识别，但是不推荐这样，过于消耗资源
2. 统一与浏览器交互的数据方式，那么这时候就有了HTTP协议等，推荐

HTTP协议

通俗的理解协议就是大家共同认可的标准；

HTTP协议：规定了浏览器与服务端之间数据交互的方式及其他事项，如果我们开发的时候不遵循该协议 那么浏览器就无法识别我们的网站

四大特性

1. 基于请求响应：服务端永远不会主动给客户端发消息 必须是客户端先发请求，如果想让服务端主动给客户端发送消息可以采用其他网络协议；
2. 基于TCP/UDP、IP作用于应用层之上的协议

OSI七层：应（默认使用HTTP协议），表，会，传，网，数，物

1. 无状态：不保存客户端的状态信息，每次过来都仿佛第一次看见
2. 无连接/短连接：两者请求响应之后立刻断绝关系

数据格式

主要有以下两种：

请求格式：

请求首行(http协议版本,网络请求的方法)
   请求头(一大堆k,v键值对)
   /r/n   # 换行符不能省略
   请求体(存放的是一些数据，并不是每种请求方式都有请求体，get没有请求体，post有请求体)
    
# 请求方式
get:朝服务器索要数据，比如输入网址获得相应的数据
post:向服务器提交数据，比如用户登录输入用户名和密码后，提交到后端做身份校验

响应格式：

响应首行(http协议版本,网络请求的方法)
  响应头(一大堆k,v键值对)
   /r/n   # 换行符不能省略
  响应体(交给给浏览器展示给用户看的数据)

HTTP 状态码分类

HTTP 状态码由三个十进制数字组成，第一个十进制数字定义了状态码的类型。响应分为五类：信息响应(100–199)，成功响应(200–299)，重定向(300–399)，客户端错误(400–499)和服务器错误 (500–599)

# 注意
公司还会自定义状态码 一般以10000开头
参考:聚合数据

状态码列表

案例：简易的BS架构

# 浏览器做客户端，本机做服务端
import socket

server = socket.socket()
server.bind(('127.0.0.1',8080))
server.listen()

while True:
    sock, addr = server.accept()
    while True:
        data = sock.recv(1024)
        if len(data) == 0:break
        print(data)
        # 遵循HTTP响应格式
        sock.send(b'HTTP/1.1 200 OK\r\n\r\n')
        sock.send(b'<h1>hello<h1>')
        sock.send(b'<a href="https://www.jd.com"> shopping<a>')
        sock.send(b'<img src="https://tse4-mm.cn.bing.net/th/id/OIP-C.cx1FMyeUUYANoF_1jfSlzgHaLB?w=182&h=271&c=7&r=0&o=5&dpr=1.25&pid=1.7"/>')
        # 也可以发送文本内容等
        # with open(r'data.txt','rb') as f:
        #     data = f.read()
        # sock.send(data)

浏览器响应内容

# 请求首行
b'GET / HTTP/1.1\r\n  
# 请求头
Host: 127.0.0.1:8080\r\n
Connection: keep-alive\r\n
sec-ch-ua: " Not;A Brand";v="99", "Google Chrome";v="97", "Chromium";v="97"\r\n
sec-ch-ua-mobile: ?0\r\n
sec-ch-ua-platform: "macOS"\r\n
Upgrade-Insecure-Requests: 1\r\n
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/97.0.4692.71 Safari/537.36\r\n
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.9\r\n
Sec-Fetch-Site: none\r\n
Sec-Fetch-Mode: navigate\r\n
Sec-Fetch-User: ?1\r\n
Sec-Fetch-Dest: document\r\n
Accept-Encoding: gzip, deflate, br\r\n
Accept-Language: zh-CN,zh;q=0.9\r\n
\r\n
# 请求体(当前为空)
'