前端及html介绍

相对后端主要实现业务逻辑来说，前端就是与用户交互的界面。

而前端最基础的就是：HTML\CSS\Javascript

这三个语言分别负责网页的骨架、样式和动态效果（逻辑）。

而这三个语言的学习就可以帮助我们完成B/S架构中的浏览器B端的界面。

html介绍

B/S架构是基于网络的软件架构，我们的服务端可以和浏览器建立tcp连接（7层协议的传输层以下都用socket模块完成了），而建立连接后所交互的内容想要在浏览器上呈现出来，就需要遵循http协议，帮助我们完成渲染应用层。

B/S是服务端提供的web服务，我们用python代码简单模拟以下服务端：

import socket

sk = socket.socket()

sk.bind(("127.0.0.1", 8080))
sk.listen(5)

while True:
    conn, addr = sk.accept()
    data = conn.recv(8096)  # 接收数据
    conn.send(b"HTTP/1.1 200 OK\r\n\r\n")  # 发送http报头
    conn.send(b"<h1>Hello world!</h1>")  # 发送http文件内容
    conn.close()

我们启动这个py程序，然后在浏览器中输入IP:PORT(就是url的本质)，会发现页面上出现了一句：

hello world！

当我们输入网址的电光火石间其实经历了如下几件事：

浏览器发请求 --> HTTP协议 --> 服务端接收请求 --> 服务端返回响应 --> 服务端把HTML文件内容发给浏览器 --> 浏览器渲染页面

当然有时候我们输入网址也可能无法获取正常的内容，如下：

这是因为我们的服务端返回给浏览器的内容并没有遵循http协议，浏览器无法识别并做后续的操作。

HTML是什么？

超文本标记语言（Hypertext Markup Language, HTML）是一种用于创建网页的标记语言。
本质上是浏览器可识别的规则，我们按照规则写网页，浏览器根据规则渲染我们的网页。对于不同的浏览器，对同一个标签可能会有不同的解释。（兼容性问题）
网页文件的扩展名：.html或.htm

html四大特性

基于请求响应

B浏览器发送请求，S服务端回应响应，请求和响应都基于一定的格式
基于tcp、ip作用于应用层之上的协议
无状态

服务端不会保护客户端的状态，每次输入网址都相当于浏览器第一次访问服务端
无/短链接

浏览器客户端发送请求后，服务端短暂的将html文件发送回去，后续两端不保持连接

请求和响应格式

http协议规定了浏览器与服务端的交互方式。

请求格式

请求首行（请求方式有很多的协议版本）
请求头（一大堆kv键值对）
换行\r\n
请求体（存放敏感信息，并不是所有的请求都有请求体）

响应格式

响应首行（状态码 协议版本）
响应头（一大堆kv键值对）
换行\r\n
响应体（给浏览器展示的数据）

响应状态码

状态码	意义
1xx	服务端已经接收到了你的请求正在处理，客户端可以继续发送或者等待
2xx	200 OK 请求成功，服务端发送了对应的响应
3xx	重定向(想访问网页A但是自动调到了网页B) 302临时跳转一定操作后返回原网页，304永久跳转到一个界面
4xx	客户端问题导致无法访问 403访问权限不够，404请求资源不存在
5xx	服务端问题导致无法访问

在一些项目中，我们可能还会自己定义一些状态码，通常以10000打头。

html文件结构

在前面我们最简单的服务端中，我们发送了一句hello world并按一点格式显示在浏览器中，实际上发送的语言是html超文本标记语言，而在python代码中写大量的html格式的语言显示是不方便的，所以通常我们会引入其他文本文件，通过读取文件的方式按socket发送给浏览器，而按照html格式来写的文本文件以html后缀，被称为html文件。

其基本结构如下：

<!DOCTYPE html>     
<html lang="en">     <!---lang属性是对html中语言进行说明，en表英文，ch表中文--->
<head>    
    <meta charset="UTF-8">    
    <title>本地页面</title>
</head>
<body>

</body>
</html>