前端、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.mzph.cn/news/122596.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

actual combat 21——华为云从零开始项目部署(附nginx转发域名方式)

一、IP地址方式&#xff1a; 后端&#xff1a; 确保项目本地跑通建立并运行华为云流水线 前端&#xff1a; 打包&#xff08;测试环境&#xff09;手动上传 nginx&#xff1a; 配置一下即可 华为云&#xff1a; 安全组&#xff1a;暴露后端网关端口安全组&#xff1a;暴…

036-第三代软件开发-系统时间设置

第三代软件开发-系统时间设置 文章目录 第三代软件开发-系统时间设置项目介绍系统时间设置演示效果QML 实现小伙伴自创 TumblerQt 家 Tumbler C 端实现 总结一下 关键字&#xff1a; Qt、 Qml、 Time、 时间、 系统 项目介绍 欢迎来到我们的 QML & C 项目&#xff01;…

Flink Data Sink

本专栏案例代码和数据集链接: https://download.csdn.net/download/shangjg03/88477960 1. Data Sinks 在使用 Flink 进行数据处理时,数据经 Data Source 流入,然后通过系列 Transformations 的转化,最终可以通过 Sink 将计算结果进行输出,Flink Data Sinks 就是用于定义…

【杂记】Ubuntu20.04装系统,安装CUDA等

装20.04系统 安装系统的过程中&#xff0c;ROG的B660G主板&#xff0c;即使不关掉Secure boot也是可以的&#xff0c;不会影响正常安装&#xff0c;我这边出现问题的主要原因是使用了Ventoy制作的系统安装盘&#xff0c;导致每次一选择使用U盘的UEFI启动&#xff0c;就会跳回到…

QTcpServer简单的TCP服务器连接

1、简介 简单实现控制TCP服务器获取连接的套接字。点击断开服务器即可关闭所有连接&#xff0c;最大连接数量为5个。 声明源文件 #include "mainwindow.h"MainWindow::MainWindow(QWidget *parent): QMainWindow(parent) {//设置固定大小setFixedSize(1024,600);b…

状态机图和活动图

在面向对象软件分析过程中&#xff0c;状态机图和活动图用于建立软件的动态模型&#xff0c;主要描述系统随时间变化的行为。 1.状态图 1.1概念 状态图用来描述对象状态和事件之间的关系&#xff0c;强调一个实体基于事件反应的动态行为。状态图适合用于表述在不同用例之间的…

【windows 脚本】netsh命令

netsh 是 Windows 操作系统中的一个命令行工具&#xff0c;用于配置和管理网络设置。它提供了一系列的命令和参数&#xff0c;可以用于配置网络接口、防火墙、路由表等网络相关的设置。以下是一些常用的 netsh 命令和用法&#xff1a; 配置静态IP&#xff0c;IP地址、子网掩码和…

【电路笔记】-交流波形和交流电路理论

交流波形和交流电路理论 文章目录 交流波形和交流电路理论1、概述2、交流发电2.1 涡轮发电2.2 变压器 3、交流功率3.1 RMS值3.2 功率分配 4、总结 当谈论电流或电压时&#xff0c;这些信号可以分为两大类&#xff1a;直流和交流。 DC 状态为“直流电”&#xff0c;该定义重新组…

Webpack简介及打包演示

Webpack 是一个静态模块打包工具&#xff0c;从入口构建依赖图&#xff0c;打包有关的模块&#xff0c;最后用于展示你的内容 静态模块&#xff1a;编写代码过程中的&#xff0c;html&#xff0c;css&#xff0c; js&#xff0c;图片等固定内容的文件 打包过程&#xff0c;注…

深度学习_1 介绍;安装环境

深度学习 学习自李沐老师的课程。笔记主要以总结老师所讲解的内容以及我个人的想法为主&#xff0c;侵删&#xff01; 课程链接&#xff1a;课程安排 - 动手学深度学习课程 (d2l.ai) 介绍 AI地图&#xff1a; 我们以前写的非 AI 类程序基本都是人自己去想会遇到什么样的问题…

2023年9月电子学会Python等级考试试卷(五级)答案解析

青少年软件编程(Python)等级考试试卷(五级) 一、单选题(共25题,共50分) 1. 阅读以下代码,程序输出结果正确的选项是?( ) def process_keywords(keywords_list): unique_keywords = list(set(keywords_list)) sorted_keywords = sorted(unique_keywords) …

LVS-DR模式+keepalived+nginx+tomcat实现动静分离、负载均衡、高可用实验

实验条件&#xff1a; test2——20.0.0.20——主服务器——ipvsadm、keepalived服务 test3——20.0.0.30——备服务器——ipvsadm、keepalived服务 nginx5——20.0.0.51——后端真实服务器1&#xff08;tomcat的代理服务器&#xff09;——nginx服务 nginx6——20.0.0.61—…

Echarts渲染不报错但是没有内容

&#x1f525;博客主页&#xff1a; 破浪前进 &#x1f516;系列专栏&#xff1a; Vue、React、PHP ❤️感谢大家点赞&#x1f44d;收藏⭐评论✍️ 问题&#xff1a;在开发项目的时候使用了Echarts但是好端端的忽然就不渲染了 感觉很无语啊&#xff0c;毕竟好好的就不渲染了&am…

msigdbr hallmarks gsea broad研究所

使用msigdbr r包 #BiocManager::install("msigdb") #https://www.gsea-msigdb.org/gsea/msigdb #https://cran.r-project.org/web/packages/msigdbr/vignettes/msigdbr-intro.html #https://bioconductor.org/packages/release/data/experiment/vignettes/msigdb/ins…

【swagger动态配置输入参数忽略某些字段】

文章目录 一&#xff0c;背景1.介绍2. 现有做法13. springfox支持的方式2 二&#xff0c;问题三&#xff0c;思路四&#xff0c;实现1. 定义注解SwaggerInputFieldIgnore2. 实现WebMvcOpenApiTransformationFilter3. 实现WApiListingBuilderPlugin 五&#xff0c;结果 一&#…

故障诊断入门书籍资料免费领取

前言 本期分享免费提供9本故障诊断领域相关的书籍资料&#xff0c;可自行下载 一、主要内容 二、书籍获取

Clickhouse数据库部署、Python3压测实践

Clickhouse数据库部署、Python3压测实践 一、Clickhouse数据库部署 版本&#xff1a;yandex/clickhouse-server:latest 部署方式&#xff1a;docker 内容 version: "3"services:clickhouse:image: yandex/clickhouse-server:latestcontainer_name: clickhouse …

基于STC系列单片机实现定时器扫描数码管显示定时器/计数器产生频率的功能

#define uchar unsigned char//自定义无符号字符型为uchar #define uint unsigned int//自定义无符号整数型为uint #define NixieTubeSegmentCode P0//自定义数码管段码为单片机P0组引脚 #define NixieTubeBitCode P2//自定义数码管位码为单片机P2组引脚 sbit LED P1^0;//位定义…

【Hello Algorithm】滑动窗口内最大值最小值

滑动窗口介绍 滑动窗口是一种我们想象中的数据结构 它是用来解决算法问题的 我们可以想象出一个数组 然后再在这个数组的起始位置想象出两个指针 L 和 R 我们对于这两个指针做出以下规定 L 和 R指针只能往右移动L指针不能走到R指针的右边我们只能看到L指针和R指针中间的数字 …

不同碳化硅晶体面带来的可能性

对于非立方晶体&#xff0c;它们天生具有各向异性&#xff0c;即不同方向具有不同的性质。以碳化硅晶体面为例&#xff1a; 4H-SIC和6H-SIC的空间群是P63mc&#xff0c;点群是6mm。两者都属于六方晶系&#xff0c;具有各向异性。3C-SIC的空间群是F-43m&#xff0c;点群是-43m。…