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

Python之前端的学习

 前端学哪些内容


1. HTML    # 网页的骨架、只是负责显示一些内容,但是显示出来的内容不好看,没样式
2. CSS  # 对网页骨架的美化、让网页变得更加的好看而已
3. JavaScript # html、css都是不能动的,静态的,js就是让网页能够动起来,变得更加的美观
4. bootstrap、jQuery
称为是前端的三剑客!
学习一些前端配套的框架(库): bootstrap、jQuery、vue、react、angular.js
网址栏中输入地址回车,到看到页面的返回,整个过程发生了什么事?
1. 客户端输入网址向服务端发起请求
2. 服务端收到客户端的请求,处理请求
3. 服务端要给客户端做出响应
4. 把服务端返回的内容渲染(显示)到浏览器页面中
# 我们学习前端谁来翻译前端的代码? 浏览器(就是前端代码的执行环境)
学习前端只需有一个浏览器即可,浏览器就是前端的解释器
 
# 浏览器就是一个万能的客户端,超级客户端,言外之意,他可以作为很多服务端的客户端
比如:淘宝、腾讯视频、京东、等
"""我们自己能不能开发一个B/S架构的软件,能."""
开发一个服务端即可,浏览器已经存在了,让浏览器作为我们的客户端,你会写服务端吗?
利用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)
 
请求方式:
    # 有很多种:现在你需要掌握2种
    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请求"""
        post请求,参数在哪里传递?
   面试题:get和post的区别?
        1. get:
            索要数据的时候使用
            传参方式:在网址栏的问号后面:key=value的键值对方式
            数据传递不安全
            数据传递的时候,携带的数据量是有限制的,大概4KB左右的数据
         2.post:
            提交数据的时候使用
            在请求体里面
            数据传递更加安全
            数据传递没有限制,想传多少传多少
            
 响应状态码:
    """使用一个特殊的数字代表一串复杂的描述性信息"""
    1xx: 代表的是请求数据成功,但是这个时候还可以继续往服务端提交数据
    2xx: 200 OK 代表的是请求成功
    3xx:301 302 代表的是重定向
    4xx: 404 Not Found 代表的是资源找不到
    5xx:500 502 服务器内部错误(出现网页打不开的情况)
    
面试题:请说出常见的响应状态码(1xx 2xx 3xx 301 201)
业务状态码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;


 

相关文章:

Python之前端的学习

前端学哪些内容 1. HTML # 网页的骨架、只是负责显示一些内容&#xff0c;但是显示出来的内容不好看&#xff0c;没样式 2. CSS # 对网页骨架的美化、让网页变得更加的好看而已 3. JavaScript # html、css都是不能动的&#xff0c;静态的&#xff0c;js就是让网页能够动起来…...

Python之numpy数组学习(五)——广播

Python之numpy数组学习(五)——广播 目录 Python之numpy数组学习(五)——广播 本文章向大家介绍Python之numpy数组学习(五)——广播,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。 前言 前面我们…...

k8s-----19、Helm

Helm 1、引入2、概述2.1 重点2.2 V3版本的Helm2.2.1 与之前版本的不同之处2.2.2 V3版本的运行流程 3、安装和配置仓库、一些附带操作3.1 安装3.2 配置仓库3.3 常用命令3.4 添加helm的自动补齐 4、快速部署应用(weave应用)5、 自行创建Chart5.1 Chart目录内容解析5.2 简单安装部…...

怒刷LeetCode的第28天(Java版)

目录 第一题 题目来源 题目内容 解决方法 方法一&#xff1a;动态规划 方法二&#xff1a;迭代 方法三&#xff1a;斐波那契数列公式 第二题 题目来源 题目内容 解决方法 方法一&#xff1a;栈 方法二&#xff1a;路径处理类 方法三&#xff1a;正则表达式 方法…...

Kotlin(八) 数据类、单例

目录 一&#xff1a;创建数据类 二&#xff1a;单例类 一&#xff1a;创建数据类 和Java的不同&#xff0c;kotlin的数据类比较简单&#xff0c;New→Kotlin File/Class&#xff0c;在弹出的对话框中输入“Book”&#xff0c;创建类型选择“Data”。如图&#xff1a; 然后编…...

IAR For ARM 安装教程

电脑环境 安装包下载 1、官网下载 ①搜索 IAR ②切换产品&#xff0c;选择Arm ③选择IAR Embedded Workbench for Arm ④免费试用 2、网盘下载 EWARM-CD-8202-14838.exe(访问密码: 1666) https://url48.ctfile.com/f/33868548-961057458-611638?p1666 软件下载 1、点击安…...

向量数据库Weaviate Cloud 和 Milvus Cloud:性能大比拼

最近,随着检索增强生成系统(RAG)的持续火爆,开发者对于“如何选择一个向量数据库”的疑惑也越来越多。过去几周,我们从性能和特性能力两个方面对 Weaviate Cloud 和 MilvusCloud 进行了详细的对比。在对比过程中,我们使用了开源的性能基准测试套件 VectorDBBench,围绕诸…...

微信小程序控制元素显示隐藏

微信小程序是一种轻量级的应用程序&#xff0c;它可以在微信中运行&#xff0c;具有快速、便捷、易用等特点。在微信小程序中&#xff0c;我们可以通过控制元素的显示和隐藏来实现特定的功能。本文将介绍如何使用微信小程序控制元素的显示和隐藏&#xff0c;以及如何应用这些技…...

轻量封装WebGPU渲染系统示例<2>-彩色立方体(源码)

当前示例源码github地址: https://github.com/vilyLei/voxwebgpu/blob/version-1.01/src/voxgpu/sample/VertColorCube.ts 此示例渲染系统实现的特性: 1. 用户态与系统态隔离。 2. 高频调用与低频调用隔离。 3. 面向用户的易用性封装。 4. 渲染数据和渲染机制分离。 5. …...

电脑技巧:Win10飞行模式相关知识介绍

目录 一、飞行模式简介 二、如何开关Windows 10中的飞行模式 方法一&#xff1a;使用硬件开关 方法二&#xff1a;使用Windows 10操作中心 方法三&#xff1a;使用Windows 10设置 三、飞行模式开关被卡住、变灰或不工作时怎么办 什么是 Windows 10 飞行模式? 用户如何打…...

化身全能战士:ChatGPT助我横扫办公室【文末送书两本】

化身全能战士&#xff1a;ChatGPT助我横扫办公室 半年签约 16 本书有 ChatGPT 不会的吗&#xff1f;解锁 ChatGPT 秘技&#xff0c;化身全能战士ChatGPT 基本知识办公自动化职场学习与变现 作者简介结语购买链接参与方式往期赠书回顾 &#x1f3d8;️&#x1f3d8;️个人简介&a…...

直方图均衡化算法

直方图均衡化是一种图像处理算法&#xff0c;通过调整图像的灰度级分布&#xff0c;增强图像的对比度和细节。下面是直方图均衡化算法的基本步骤&#xff1a; 统计原始图像的灰度直方图&#xff1a;遍历整个图像&#xff0c;计算每个灰度级出现的频次。 计算累积直方图&#x…...

通过el-tree 懒加载树,创建国家地区四级树

全国四级行政地区树数据库sql下载路径&#xff1a;【免费】全国四级地区(省市县)数据表sql资源-CSDN文库https://download.csdn.net/download/weixin_51722520/88469807?spm1001.2014.3001.5503 我在后台获取地区信息添加了限制&#xff0c;只获取parentid为当前的地…...

Power BI 实现日历图,在一张图中展示天、周、月数据变化规律

《数据可视化》这本书里介绍了一个时间可视化的案例&#xff08;如下图所示&#xff09;&#xff0c;以日历图的形式展示数据的变化&#xff0c;可以在一张图上同时观察到&#xff1a;&#xff08;1&#xff09;每一天的数据变化&#xff1b;&#xff08;2&#xff09;随周变化…...

C/C++计算表达式值 2020年12月电子学会青少年软件编程(C/C++)等级考试一级真题答案解析

目录 C/C计算表达式值 一、题目要求 1、编程实现 2、输入输出 二、算法分析 三、程序编写 四、程序说明 五、运行结果 六、考点分析 C/C计算表达式值 2020年12月 C/C编程等级考试一级编程题 一、题目要求 计算(ab)*(c-b)的值 1、编程实现 给定3个整数a、b、c&…...

XTU-OJ 1258-矩阵

编写一个程序&#xff0c;将1~n2按行依次填入nn的矩阵&#xff0c;执行若干条行或者列的循环移动的指令&#xff0c;再将数字按行依次取出。 指令如下&#xff1a; 指令含义L x yx行循环左移y次R x yx行循环右移y次U x yx列循环上移y次D x yx列循环下移y次 输入 第一行是一个整…...

Django token 认证原理与实战

概述 cookie、session 与token 的区别 Cookie的作用 cookie的存储量很小&#xff0c;一般不超过4Kcookie并不会保存很多信息&#xff0c;一般用来存储登录状态cookie是以键值对进行表示的(keyvalue),例如nameli,表示cookie的名字是name,cookie携带的值是licookie的存储分为会…...

JVM虚拟机:Java对象的头信息有什么?

本文重点 在前面的课程中,我们学习了对象头,其中对象头包含Mark Word和class pointer,当然数组还会有一个数组长度。本文主要分析Mark Work中包含的信息。 Mark Word 以下两张图是一个意思: 32位 32位 64位 以上就是Mark Word会存储的信息,这个意思是说Java对象在不同…...

场效应管器件

在面试硬件方面的工作时&#xff0c;我们通常会被提问模电方面的知识。 场效应管简称FET,有三级&#xff1a;源极(S)、漏极(D)、栅极&#xff08;G&#xff09;&#xff1b;可以实现电压控制电流源&#xff1b;“源极和漏极之间的漏极电流Id&#xff0c;由栅极的负电压进行控制…...

javascript之for循环介绍

javascript之for循环介绍 1&#xff09;语法&#xff1a; for ([initialization]; [condition]; [final-expression]) { // code to be executed }1&#xff09;initialization&#xff08;初始化&#xff09;&#xff1a;在循环开始之前执行&#xff0c;通常用于设置循环计…...

【机器学习可解释性】3.部分依赖图

机器学习可解释性 1.模型洞察的价值2.特征重要性排列3.部分依赖图4.SHAP Value5.SHAP Value 高级使用 正文 每个特征怎么样影响预测结果&#xff1f; 部分依赖图 Partial Dependence Plots 虽然特征重要性显示了哪些变量对预测影响最大&#xff0c;但部分依赖图显示了特征如…...

在CARLA中手动开车,添加双目相机stereo camera,激光雷达Lidar

CARLA的使用逻辑&#xff1a; 首先创建客户端 设置如果2秒没有从服务器返回任何内容&#xff0c;则终止 client carla.Client("127.0.0.1", 2000) client.set_timeout(2.0) 从客户端中get world world client.get_world() 设置setting并应用 这里使用固定时…...

【VUE】ArcoDesign之自定义主题样式和命名空间

前言 Arco Design是什么&#xff1f; Arco Design 是由字节跳动推出的企业级产品的完整设计和开发解决方案前端组件库 官网地址&#xff1a;https://arco.design/同时也提供了一套开箱即用的中后台前端解决方案&#xff1a;Arco Design Pro(https://pro.arco.design/) Arco De…...

TVRNet网络PyTorch实现

文章目录 文章地址网络各层结构代码实现 文章地址 An End-to-End Traffic Visibility Regression Algorithm文章通过训练搜集得到的真实道路图像数据集&#xff08;Actual Road dense image Dataset, ARD&#xff09;&#xff0c;通过专业的能见度计和多人标注&#xff0c;获得…...

opencv之坑(八)——putText中文乱码解决

opencv4.0之前版本和部分4.0版本的putText仅支持英文&#xff0c;如果中文会乱码&#xff0c;可以用下面方法构造函数解决&#xff1a; 头文件如下&#xff1a; #pragma once #ifndef PUTTEXT_H_ #define PUTTEXT_H_#include <windows.h> #include <string> #incl…...

nrf52832 开发板入手笔记:资料搜集

前言 最近翻箱&#xff0c;发现了两块几年前买的 NRF52832 与 NRF52840 的开发板&#xff0c;打算搭个 BLE 的开发环境 NRF52832 与 NRF51822 之前用过&#xff0c; NRF52840 没有用过&#xff0c;好像是 BLE4 与 BLE5 的区别吧 相关介绍 除了开发板&#xff0c;最重要的还是…...

PHP如何批量修改二维数组中值

每个name值加pex&#xff0c;age加5&#xff0c; 原数据&#xff1a; $data[["name">a,age>12],["name">b,age>22],["name">c,age>33],["name">d,age>44], ];实现效果 方案一、foreach引用方式 $data[["…...

Python 算法高级篇:归并排序的优化与外部排序

Python 算法高级篇&#xff1a;归并排序的优化与外部排序 引言 1. 归并排序的基本原理2. 归并排序的优化2.1 自底向上的归并排序2.2 最后优化 3. 外部排序4. 性能比较5. 结论 引言 在计算机科学中&#xff0c;排序是一项基本的任务&#xff0c;而归并排序&#xff08; Merge S…...

LeetCode--1991.找到数组的中间位置

1 题目描述 给你一个下标从 0 开始的整数数组 nums , 请你找到 最左边 的中间位置 middleIndex &#xff08;也就是所有可能中间位置下标最小的一个&#xff09; 中间位置 middleIndex 是满足 nums[0] nums[1] ... nums[middleIndex-1] nums[middleIndex1] nums[middleI…...

物联网数据采集网关连接设备与云平台的关键桥梁

随着工业4.0和智能制造的快速发展&#xff0c;物联网数据采集网关在工业物联网中的应用越来越广泛。物联网数据采集网关作为连接设备与云端之间的关键桥梁&#xff0c;能够实现高效、可靠、安全的数据传输和转换&#xff0c;为智能制造和工业4.0提供了强大的支持。 一、物联网…...