前端、HTTP协议(重点)

台州吃柴小男孩

已于 2023-11-27 22:08:58 修改

阅读量772

点赞数

文章标签：前端

于 2023-10-27 17:23:08 首次发布

本文链接：https://blog.csdn.net/m0_71292438/article/details/134076870

版权

什么是前端

前端是所有跟用户直接打交道的都可以称之为是前端
比如：PC页面、手机页面、平板页面、汽车显示屏、大屏幕展示出来的都是前端内容
能够用肉眼看到的都是前端

为什么要学前端

学了前端以后我们就可以做全栈工程师(会后端、会前端、会DB、会运维等)
咱们学前端不会学的太深入，能够写一些简单的页面，以及会调试别人写的页面和能够看懂一些别人的页面代码

前端学习的内容

1. HTML # 网页的骨架、只是负责显示一些内容，但是显示出来的内容不好看，没样式
2. CSS # 对网页骨架的美化、让网页变得更加的好看而已
3. JavaScript # html、css都是不能动的，静态的，js就是让网页能够动起来，变得更加的美观
4. bootstrap、jQuery
称为是前端的三剑客!
学习一些前端配套的框架(库): bootstrap、jQuery、vue、react、angular.js

网址栏中输入地址回车，到看到页面的返回，整个过程发生了什么事?

1. 客户端输入网址向服务端发起请求
2. 服务端收到客户端的请求，处理请求
3. 服务端要给客户端做出响应
4. 把服务端返回的内容渲染(显示)到浏览器页面中

我们学习前端谁来翻译前端的代码? 浏览器(就是前端代码的执行环境)

学习前端只需有一个浏览器即可，浏览器就是前端的解释器

浏览器就是一个万能的客户端，超级客户端，言外之意，他可以作为很多服务端的客户端
比如：淘宝、腾讯视频、京东、等

开发一个服务端即可，浏览器已经存在了，让浏览器作为我们的客户端，你会写服务端吗?

利用socket写一个服务端，让浏览器作为我们的客户端

你说浏览器它是很多服务端的客户端，问题是：浏览器是怎么识别是哪个服务端的?

很多服务端必须都要遵循浏览器的规则，所以，浏览器才能够正常的识别他们(数据传出的规则)
这个规则是：协议(HTTP协议)

HTTP协议在那一层起的作用?

HTTP协议：最上层：应用层
TCP/UDP: 传输层
ip协议: 网络层

HTTP协议(重点)

HTTP协议是Hyper Text Transfer Protocol（超文本传输协议）

作用：

服务器与本地浏览器之间传输超文本的传送协议

特点：

1.基于TCP协议之上的【应用层】协议----》它是可靠传输
2. 基于请求－响应模式：必须客户端主动发起--》服务端才有响应
- 如果实时跟服务端通信---》每隔2s发送一次请求--》轮询---》实现实时聊天
- web版微信
- 实时通信---》使用轮询， webscoket 协议

3. 无状态保存
- 发送多次请求，对于服务端来讲，都是新的
- cookie，session做会话保持
4 无连接客户端不会一直跟服务端链接
- 基于tcp---》有链接

http请求协议与响应协议

请求协议
- 请求首行---》请求方式--》请求地址--》请求协议版本号 1.1 \r\n
- 请求头：key-value形式 \r\n \r\n\r\n
- 请求体：get请求一般没有请求体，post请求有请求体
响应协议
- 响应首行：HTTP/1.1 200 OK\r\n --协议版本---响应状态码--》响应描述符
- 响应头：响应头有什么
- 响应体：一般给个html标签
  - 浏览器中看到的页面，都是响应体的内容

HTTP协议的四大特性

1. 基于请求和响应的(有请求，有响应)
2. 它是基于TCP协议之上的应用层协议
3. 无状态：就是这个协议它不能够在浏览器中保存数据，现在使用的：淘宝、支付宝、京东等这些网站都需要登录 cookie、session、token、jwt等保存的，他们才是真正的保存用户数据的
4. 短链接

请求数据

请求首行(请求方式、协议和版本号)
请求头(一大堆的k:v的键值对)

换行符(\r\n)

响应数据

响应首行(响应状态码)
响应头(一大堆的k:v的键值对)

换行符(\r\n)

请求方式:

get

   """当朝服务端索要数据的时候，一般使用get请求方式"""
https://huodong.taobao.com/wow/a/act/tao/dailyact/4634/wupr?spm=a21bo.jianhua.201867-main.1.5af92a89NWpkvM&wh_pid=dailyAct-257518

https://huodong.taobao.com/index/v1/?k=v&k1=v1&k2=v2
https://huodong.taobao.com/func
def index()
   # 需要参数?
def func()

post

"""当朝服务端提交数据的时候，一般采用post请求"""

get和post的区别

       1. get:
   索要数据的时候使用
传参方式：在网址栏的问号后面：key=value的键值对方式
数据传递不安全
数据传递的时候，携带的数据量是有限制的，大概4KB左右的数据
2.post：
   提交数据的时候使用
在请求体里面
数据传递更加安全
数据传递没有限制，想传多少传多少

响应状态码：

"""使用一个特殊的数字代表一串复杂的描述性信息"""
1xx: 代表的是请求数据成功，但是这个时候还可以继续往服务端提交数据
2xx: 200 OK 代表的是请求成功
3xx：301 302 代表的是重定向
4xx: 404 Not Found 代表的是资源找不到
5xx：500 502 服务器内部错误(出现网页打不开的情况)

HTML介绍

你在网页中所能够看到的花里胡哨的东西都是HTML标签
<h1>hello python</h1>
<h5>hello python</h5>
<a href='http://baidu.com'>click me</a>
<img src=''>

写代码软件

1. pycharm
2. 直接在浏览器中写
3. 直接在txt文本也可以
4. vscode

html文档介绍

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

</body>
</html>

<head> 标签里面写的内容一般不是让用户看的，给程序员看的
<body> 标签才是用户看的，在body里面写什么，浏览器就显示什么，head里面写的代码是对body中的代码做控制

如何打开一个html文档

1. 直接点击pycahrm右上角的浏览器图标
2. 直接找到文档所在的位置，右键选择使用浏览器打开即可
"""浏览器就是前端的解释器，所有的前端代码都是有浏览器来翻译的"""

head标签中常用的标签

  <title>Title</title> 就是浏览器标签页上显示的内容
        <title>Title</title>
<!--    <style>-->
<!--        /*写css样式的*/-->
<!--        a {-->
<!--            color:  red;-->
<!--        }-->
<!--    </style>-->
    <link rel="stylesheet" href="my.css">
<!--    <script>-->
<!--        alert(123)-->
<!--    </script>-->
    <script src="my.js"></script>

body中常用的标签

# 基本标签:
    <b>加粗</b>
    <i>斜体</i>
    <u>下划线</u>
    <s>删除</s>
    <p>段落标签</p>

    <h1>标题1</h1>
    <h2>标题2</h2>
    <h3>标题3</h3>
    <h4>标题4</h4>
    <h5>标题5</h5>
    <h6>标题6</h6>

    <!--换行-->
    <br>

    <!--水平线--><hr>
# 特殊字符
	内容	对应代码
    空格	&nbsp;
    >	&gt;
    <	&lt;
    &	&amp;
    ¥	&yen;
    版权	&copy;
    注册	&reg;

台州吃柴小男孩

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端、HTTP协议(重点)

你在网页中所能够看到的花里胡哨的东西都是HTML标签写代码软件1. pycharm2. 直接在浏览器中写3. 直接在txt文本也可以4. vscode 标签里面写的内容一般不是让用户看的，给程序员看的标签才是用户看的，在body里面写什么，浏览器就显示什么，head里面写的代码是对body中的代码做控制。
复制链接

扫一扫