前端基础三剑客之——HTML超文本标记语言（上篇）

前端基础三剑客之——HTML超文本标记语言（上篇）

前端简介：

1、前端OR后端

前端
任何与用户直接打交道的操作界面都可以称之为前端
比如电脑、手机、平板界面等
后端
后端就类似于幕后操作者，不直接与用户打交道，其实就是一堆代码，这堆代码用户是看不懂的，除非是一个喜欢装逼的程序员

2、前端内容（三大核心+主流框架）：

html ：
作用：搭建网页框架
css ：
作用：美化html网页框架，给网页框架添加各种各样的样式，使其变得好看
js：
作用：控制网页的动态效果

前端框架：（提前封装好了很多的操作，只需按照固定语法调用即可）bootstrap，jquery， vue，react，angular

3、网络相关知识点复习总结：

小思考：
在浏览器中地址栏里面输入网址以后一按回车键到底发生了什么事情？？

网址的本质就是服务端的一个ip+端口（经过域名解析以后网址也就是一个ip加端口组成的一串数字），也就是你根据网址找一个服务端体验服务，输入一个网址也就是向一个服务端发送链接（请求）
1、浏览器朝服务端发送请求
2、服务端接受请求
3、服务端返回相应的响应数据
4、浏览器接收响应，并且根据特定的规则渲染页面展示给用户看

我们可以简单的使用python代码来模拟这个过程，下面是基于socket写的一个服务端：

# 只要是基于网络通信，他的底层走的都是socket
import socket

server = socket.socket()      #实例化一个对象，默认是tcp协议
server.bind(('127.0.0.1',8080))   #服务端的ip和端口（可以在客户端例如浏览器中输入'127.0.0.1:8080'访问该服务端，网址经过域名解析也就是这一串数字而已）
server.listen(5)

while True:          #构建通信循环
    conn,addr = server.accept()  #conn用来接收客户端发送的消息  （等待连接）
    data = conn.recv(1024)       #客户端来连立马收到客户端消息   （收到消息）
    print(data)        #data是一个二进制类型的数据bytes类型
    conn.send(b"hello~baby~~")    #回复客户端信息，用b转二进制  （回复消息[响应]）
    conn.close()                  #                        （关闭连接，并进入下一次循环等待连接）

因为bs架构本质也是cs架构，所以我们可以不用自己再写一个客户端，直接使用浏览器来充当客户端即可，但是，当我们开开心心的往浏览器地址栏里面输入’127.0.0.1:8080’时，结果：
图：

再来看看服务端的运行结果：
图：
显然这里面服务启动成功的，但是浏览器显示报错
为啥会出现这种情况捏？
要注意到这里的报错信息是：
报错信息是：127.0.0.1发送的响应无效
（我给了你响应，只不过响应是无效的，你看不到的而已）
造成这种情况的原因是：
请求确确实实发送到了服务端，并且服务端也给出了响应，只不过在浏览器这边渲染不出来而已

浏览器可以充当很多服务端的客户端
百度，腾讯，优酷等等
客户端只有一个（浏览器）
显然正常情况下不同服务端返回的响应数据格式规范都不一样

如何做到浏览器能够跟多个不同的客户端之间进行数据交互？
1、浏览器很牛逼，能够自动识别不同服务端，并能够对不同服务端返回数据做不同处理（显然不可能）
2、制定一个统一的标准，如果你想让你写的服务端能够和客户端之间做正常的数据交互，那么你就必须要遵循一些规则，这个规则就是http协议

HTTP协议

超文本传输协议
作用：用来规定服务端和浏览器之间的数据交互的格式
需要注意的是：
该协议你可以不遵循，但是那样你写的服务端就不能被浏览器正常访问，就只能自己跟自己玩（那样你就要自己写客户端）用户要想使用就得下载你专门的app即可

HTTP协议的四大特性：

• 1、基于请求响应：（不断地重复执行请求响应的过程）

我请求你      客户端——>服务端
往地址栏输入一个网址就是一个请求，或者点击网页中的某个跳转链接进行网页跳转;
你响应我       服务端——>客户端
返回一个页面就是一个响应

• 2、基于TCP/IP协议，是一种作用于应用层之上的协议（协议之上再加协议）
• 3、无状态（每次的请求响应是不保存状态的）

因为无状态的特点，所以http协议不保存用户的信息，同一个用户发10000次请求，服务端也会响应10000次，不会纠结“这个响应数据上次不是发送给你了么，怎么还要？”这种问题（因为他不保存用户的状态，所以服务端根本不知道是上次问他要数据的是谁，每次待你如初见）
无状态会导致一个问题，例如软件要是无状态的就没有办法保存用户的账户信息（支付宝里面钱刚放进去就没了）；
小扩展：web发展史：
最开始的时候，确确实实不需要保存用户的状态，因为那个时候的网页，你请求我，我给你返回一篇文章（一份报纸）就没了，往后面发展电商大规模兴起，大批购物和网络支付软件出现，他们需要保存用户的状态
所以为了弥补http无状态的这种缺陷，后续出现了一些专门用来记录用户状态的技术点：
cookie、session、token…

• 4、无链接/短链接

请求来一次我响应一次，完成这一次链接之后我们两个就没有任何链接和关系了；那么基于这种情况我们无法做聊天工具了，所以为了弥补http协议无链接的缺陷，后续出现了额外的补丁——长链接：即双方建立链接之后默认不断开
这个技术点叫做websocket

HTTP协议中规定的请求和响应数据的格式：

1、浏览器朝服务端发送请求的请求数据格式：

• 请求首行：用来标识http协议版本以及当前请求方式
  • 请求方式：
    1、get请求：朝服务端要数据的时候使用get请求（问别人要数据）
    比如：输入网址获得对应的内容
    2、post请求：朝服务端提交数据的时候使用post请求（把数据给别人）
    比如：在用户登录界面，你需要输入用户名和密码，然后点击登录，此时发送的请求就是post请求。因为你需要将用户名和密码提交到服务端后端做身份校验
• 请求头（包含一大堆k,v键值对）
• 请求头和请求体之间有一个\r\n（回车换行）必须要有的！！！面试经常被问到的一定不能少的！！
• 请求体（form data）（注意：不是所有的请求方式都有请求体；get没有，post有，这里面存放的是post请求提交的敏感数据例如用户名，密码，身份证号码等等…）

2、服务端给浏览器回复消息的响应数据格式（和请求数据格式基本上是一样的）：

• 响应首行：用来标识http协议版本以及响应状态码
  • 响应状态码：
  • 用一串简单的数字来表示一些复杂的状态或者描述性信息
    1、1xx：表示服务端已经成功接收到了你的数据正在处理，你可以继续提交额外的数据
    2、2xx：服务端成功响应你想要的数据（200 ok）
    3、3xx：重定向（比如你在没有登录淘宝的时候，点击商品详情会自动跳转到登录页面，这种现象就是重定向）通俗来说，有a和b两个网址，我原本想访问a但是由于不满足条件（比如没有登录），自动在内部被切换到了b网址，这种情况就是重定向，原本想定向a结果给定向成了b
    4、4xx：请求错误（404：请求资源不存在；403：当前请求不合法或者不符合访问资源的条件[你没有权限]）
    5、5xx：服务器内部错误
• 响应头（包含一大堆k,v键值对）
• 响应头和响应体之间有一个\r\n（回车换行）必须要有的！！！面试经常被问到的一定不能少的！！
• 响应体（返回给浏览器展示给用户看的数据，其实就是一个页面）

了解了http协议的相关知识以后可以对之前的简易服务端代码做一下修改使其能够被浏览器渲染

# 只要是基于网络通信，他的底层走的都是socket
import socket

server = socket.socket()      #实例化一个对象，默认是tcp协议
server.bind(('127.0.0.1',8080))   #服务端的ip和端口（可以在客户端例如浏览器中输入'127.0.0.1:8080'访问该服务端，网址经过域名解析也就是这一串数字而已）
server.listen(5)

while True:          #构建通信循环
    conn,addr = server.accept()  #conn用来接收客户端发送的消息  （等待连接）
    data = conn.recv(1024)       #客户端来连立马收到客户端消息   （收到消息）
    print(data)        #data是一个二进制类型的数据bytes类型
    #构造出符合http协议格式的数据
    conn.send(b'HTTP/1.1 200 OK\r\n\r\n')   #相当于连按两下回车键
    conn.send(b"hello~baby~~")    #回复客户端信息，用b转二进制  （回复消息[响应]）
    conn.close()                  #                        （关闭连接，并进入下一次循环等待连接）

小贴士：
1、关于\r、\n、\r\n的区别：
\r回车：
就是将光标移动到行首，但是不会移动到下一行，如果继续输入的话会覆盖掉前面的内容
\n换行：
移动到下一行，但不是行首，而是和上一行水平位置一样
\r\n回车换行：
换行并将光标移动到行首
Enter = 回车+换行（\r\n）；
2、浏览器中查看数据格式：
右键网页选择检查，刷新页面找到network（查看网络请求以及网络状态）选择一个请求页面点击headers可以查看数据格式；
3、url：
统一资源定位符（就是一个网址）url就是用来标识资源的具体位置；