526互联

认识前端

发布时间 2024-01-02 11:53:25作者: Way*yy

前端

什么是前端？
	前端就是用户可以直接看得到的视图层就是前端
    
什么是后端？
	后端是和数据打交道的，在用户看不到的

前端学习的内容

"""前端三剑客"""
HTML：一个网页的骨架，没有任何样式
CSS：给一个网页添加样式，让其变得更加美观
JavaScript：让网页有动效

前端框架：
	jQuery、bootstrap、Vue----->中国人开发的（尤雨溪）、react、angluar等等

在浏览器中我们是如何拿到自己想要的想要的数据？

"""
	1、客户端（浏览器）向服务器发送请求
	2、服务端接受浏览器的请求
	3、服务器将处理好的前端要的数据进行返回
	4、把数据返回给前端---->在浏览器中，按照一定的规则把后端的数据展示给用户
"""
"""
	如果我们写一个服务端，让浏览器充当服务端的客户端，那么也可以写一个基于浏览器的项目,但是会发现当我们浏览这个网址的时候会显示无响应，这是因为如果我们返回的数据想要被浏览器识别，必须要遵循HTTP协议
"""

HTTP协议

HTTP协议又被称为"超文本传输协议"，其作用就是规定了服务端与客户端（浏览器）之间的数据传输格式

常见的协议："TCP协议、UDP协议、IP协议、以太网协议等"

HTTP协议的四大特性：
	1、是基于请求和响应的---->请求：客户端主动向服务端发送请求----->响应：服务端向客户端返回
    2、HTTP协议是基于TCP/IP协议之上的应用层协议
    	"HTTP协议是基于TCP协议写出来的"
    3、无状态：
    	"无法保存用户的信息"
    4、短连接/无连接
    	短连接：
        	当服务端和客户端要想传输数据就必须建立连接，正常情况。二次成功发送一次消息就断开连接，称之为"短连接"
        长连接：
        	二者成功发送一次消息之后，不会立马断开连接，而是中间隔一段时间，如果双方没有通信就会断开连接，称之为"长连接"
            
"""客户端向服务端发起请求会携带一些数据，就称之为请求数据"""
HTTP协议的请求数据格式：
	# 常用的版本号就是HTTP1.X版本
    请求首行（请求方式、协议/版本号）
    请求头
    \r\n
    请求体(不是什么请求方式都有请求体，GET请求方式就没有)
    
HTTP的相应数据格式：
	响应首行（响应状态码）
    响应头
    \r\n
    响应体
    
响应状态码：
	"""简单描述就是使用一个简单的数字代表一段复杂的描述性信息"""
    1xx：了解，服务端接收数据成功，客户端还可以继续提交
    2xx：掌握，200代表的是响应成功
    3xx：301、302代表的是重定向，代码内部帮助我们跳转到指定页面
    4xx：404，资源不存在，找不到，NO FOUND，404页面可以定制
    5xx：500，服务器内部错误
    
请求方式："重要"
	GET请求：
    	"""向服务器要数据的时候一般使用GET"""
        https://www.baidu.com/s?ie=utf-8&f=8&rsv_bp=1&tn=49055317_42_hao_pg&wd=%E7%BE%8E%E5%A5%B3
        协议：//域名/后缀?参数k=v&k1=v1....
        URL："同意资源定位符号（网址）"
    POST请求：
    	"""向服务器提交数据的时候，一般使用POST请求方式"""
        
****聊聊GET跟POST的请求区别：
	1、get请求数据不够安全，post请求数据更加安全
    2、get请求没有请求体，而post请求有请求体
    3、get请求能够携带的数据量没有post请求携带的多
    	get请求一般携带4kb大小
        post基本没有限制

import socket

server = socket.socket()
server.bind(('127.0.0.1', 8000))
server.listen(3)

while True:
    sock, addr = server.accept()
    data = sock.recv(1024)
    print(data)
    """TCP协议的流式协议特征"""
    sock.send(b'HTTP/1.1 200 OK \r\n\r\n')
	'按照http协议的规格传出就看拿到我们服务端反馈过去的信息了'
    # 给客户端返回服务端的数据
    sock.send(b'HelloKitty')
    sock.close()

HTML文档介绍

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

</body>
</html>

head标签写的不是给用户看得
body标签：给网页做定制的，给用户看得
title标签：网页名称
<link rel="stylesheet" href="css/my.css">：引入外部CSS

body中常用的标签

基本标签：
	<h1>一级标题</h1>
    <h2>二级标题</h2>
    <h3>三级标题</h3>
    <h4>四级标题</h4>
    <h5>五级标题</h5>
    <h6>六级标题</h6>
    <b>这是粗体</b>
    <i>这是斜体</i>
    <u>这是下划线</u>
    <s>这是删除线</s>
    <p>段落标签1，<br> 换行，段落标签2</p>
    <p>段落标签2</p>
    <hr>这是水平线

块儿元素：
		<独自占据一行，不管自身的大小>
		像h1、p标签等等
行内元素：
        <自身文本有多大就占多大，不会独占一行>
        像<b></b> <i></i> <u></u>等等.
       
双标签：
       <h1> </h1> 等等
            
单标签：
       <br> <hr>
            
特殊字符：
            内容	对应代码
            空格	&nbsp;
            >	 &gt;
            <	 &lt;
            &	 &amp;
            ¥	 &yen;
            版权	&copy;
            注册	&reg;

dive标签和spend标签

div、spend没有实际意义只是为了布局使用

<div>块儿级元素，给页面占布局</div>
<spend>行内元素，用来给文本内容占布局</spend>

标签的嵌套

<div> <!--dive是p标签的父标签-->
    <p> <!--p是spend标签的父标签，是dive的子标签-->
        <spend><!--spend是品标签的子标签，是dive的孙标签-->
            
        </spend>
    </p>
<p><!--p标签是div的子标签是p标签的兄弟标签，也是下面那个spend的兄弟标签-->
    
    </p>
<spend></spend>
</div>

<!--
	块级儿级元素能够嵌套所有的行内元素，块儿级元素也能够嵌套所有的块儿级元素。
	行内元素不能够嵌套块儿级元素，但是可以嵌套所有的行内元素。
-->