当前位置: 首页 > news >正文

前端、HTTP协议(重点)

什么是前端

前端是所有跟用户直接打交道的都可以称之为是前端
比如: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协议的四大特性

  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;

http://www.lryc.cn/news/212436.html

相关文章:

  • 软件开发项目文档系列之六概要设计:构建可靠系统的蓝图
  • [C++]命名空间等——喵喵要吃C嘎嘎
  • 安装ora2pg遇到如下问题
  • x86-32-Linux下栈溢出攻击原理
  • GPS学习(一):在ROS2中将GPS经纬度数据转换为机器人ENU坐标系,在RVIZ中显示坐标轨迹
  • chatgpt生成文本的底层工作原理是什么?
  • javaEE -11(10000字HTML入门级教程)
  • LeetCode75——Day21
  • 学习笔记---更进一步的双向链表专题~~
  • vscode格式化代码, 谷歌风格, 允许短if同行短块同行, tab = 4舒适风格
  • 百度富文本上传图片后样式崩塌
  • autoware.ai中检测模块lidar_detector caffe
  • CentOS安装Ruby环境
  • 力扣第509题 斐波那契数 新手动态规划(推荐参考) c++
  • canvas绘制签名并保存
  • Android渲染流程
  • 牛客-【237题】算法基础精选题单-第二章 递归、分治
  • leetcode-字符串
  • 多线程---synchronized特性+原理
  • Qt实现卡牌对对碰游戏
  • 【3D 图像分割】基于 Pytorch 的 VNet 3D 图像分割7(数据预处理)
  • 极米科技H6 Pro 4K、H6 4K高亮定焦版——开启家用投影4K普及时代
  • 软考系统架构师知识点集锦九:数据库系统
  • IOC课程整理-6 Spring IoC 依赖注入
  • FANUC机器人PRIO-621和PRIO-622设备和控制器没有运行故障处理
  • 《动手深度学习》线性回归简洁实现实例
  • 国家数据局正式揭牌,数据专业融合型人才迎来发展良机
  • 基于springboot实现休闲娱乐代理售票平台系统项目【项目源码+论文说明】
  • 3.AUTOSAR OS分析(一)
  • AB试验(七)利用Python模拟A/B试验