前端Web开发

安装flask框架

pip install flask

导入flask模块

from flask import Flask

【可能遇到的问题】

出现了如下警告:

WARNING: You are using pip version 21.2.4; however, version 22.0.4 is available.

You should consider upgrading via the 'D:\Python\python.exe -m pip install --upgrade pip' command.

【原因】版本过低,要更新
【解决】 在命令行中敲入如下命令,即可update
python -m pip install --upgrade pip

可通过如下命令查看当前的pip3版本

pip3 show pip

函数:

Flask(__name__):创建一个应用程序

app.run():运行应用程序

app.route(""):装饰器

一般所有的web首先要有一个主页,即相对地址为"/"
app.route("/")

html:前端,负责布局、排版页面展示的内容

设置模板:在项目下创建templates(此名字不可写错)文件夹,在此文件夹中创建htm文件

html介绍:

Title:网页标题
body:页面内容

语法:

{{}}:表示引入一个变量的值(变量名要与后端传的名字对应)

{% for i in 列表名字 %}:遍历列表
{% endfor %}:遍历结束
<br>:实现换行
<head>:标签、网页设置
<body>:网页正文内容
<div>:分区,用于将某些内容当成一个整体
<font>:字体
<img>:图片
<audio>:背景音乐
<a>:超链接

前端向后端传数据:

例:登陆网站时输入用户名和密码,发送到后端进行验证

导入模块:request

from flask import request

超链接文本:

href 是 HTML 超链接(超文本引用)的属性,它指定了链接目标资源的 URL 地址。当用户单击这个链接时,浏览器将会打开一个新的页面或在当前页面导航到该链接的URL地址中。

href 属性可以包含多种类型的 URL 地址,如绝对路径、相对路径、协议相对 URL 等等。

下面是一些使用 href 属性的示例:

1.链接到另一个网页
html复制代码<a href="http://www.example.com">这是一个链接</a>
2.链接到同一站点的另一个页面
html复制代码<a href="/about.html">关于我们</a>
3.链接到当前页面的某个位置
html复制代码<a href="#section-1">跳转到第一章节</a>
4.链接到电子邮件地址
html复制代码<a href="mailto:example@example.com">发邮件给我们</a>
5.链接到电话号码
html复制代码<a href="tel:123-456-7890">拨打电话:123-456-7890</a>

这些只是HTML超链接的一些常见用法,您还可以根据实际需要进行更灵活的使用。

网页设计:

字体:

font常用属性:
  • size:字体大小
  • color:字体颜色
  • face:字体名称
图片:
  • 在项目下新建一个static文件夹,然后将想要的图片、音乐、视频复制粘贴上去

设置背景图片:

  • image:设置图片路径
  • repeat:设置图片排布方式
  • size:设置图片大小

插入图片:

添加img标签

src:图片位置

width/height:图片大小(像素)

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/359595.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

EPSON RC 机器人-第一个程序

创建项目 有机械人且用USB线连接好。可以USB。没有真机的选择 C4 Sample 可以运行程序。 否刚会提示【不能连接到控制器&#xff0c;未安装USB驱动器】 代码 按F5打开运行窗口 再点【开始】 点 【是】&#xff0c;查看运行结果

GMS测试BTSfail-CVE-2022-20451

描述&#xff1a; 项目需要过GMS兼容性测试&#xff0c;BTS这块我们环境没有&#xff0c;送检之后出现了一个BTS的Alert&#xff0c;这个是必须要解决的。下面的warning可以不考虑。 这个是patch问题&#xff0c;根据代理提供的pdf文件找到一个id:为A-235098883的补丁&#xf…

C#,德兰诺依数(Dealnnoy Number)的算法与源代码

1 Dealnnoy Number 德兰诺依数&#xff0c;德兰诺伊数 德兰诺依数是以法国军官、业余数学家亨利德兰诺依&#xff08;Henry Dealnnoy&#xff09;的名字命名。 Henry Dealnnoy 在组合数学中&#xff0c;德兰诺依数描述了从(0,0)到(m,n)的格路问题中&#xff0c; 只允许按照(0…

TensorFlow2实战-系列教程14:Resnet实战1

&#x1f9e1;&#x1f49b;&#x1f49a;TensorFlow2实战-系列教程 总目录 有任何问题欢迎在下面留言 本篇文章的代码运行界面均在Jupyter Notebook中进行 本篇文章配套的代码资源已经上传 1、残差连接 深度学习中出现了随着网络的堆叠效果下降的现象&#xff0c;Resnet使用残…

BTC交易数据是什么样子的

如何储存 交易数据是用字节的形式存储在区块链中&#xff0c;但是我们分析和处理的时候一般使用16进制。另外BTC的数据都是通过小端模式存储的。 16进制&#xff1a;计算机的世界只有2进制&#xff0c;但是为了节省空间已经增加可读性&#xff0c;BTC使用了16进制的形式来保存数…

蓝桥杯 第 1 场 小白入门赛

目录 1.蘑菇炸弹 2.构造数字 3.小蓝的金牌梦 4.合并石子加强版 5.简单的LIS问题 6.期望次数 1.蘑菇炸弹 我们直接依照题目 在中间位置的数进行模拟即可 void solve(){cin>>n;vector<int> a(n1);for(int i1;i<n;i) cin>>a[i];int ans0;for(int i2;i…

氢气泄漏检测仪使用方法:守护安全,从细节开始

随着科技的发展&#xff0c;我们的生活和工作环境中充满了各种潜在的危险。其中&#xff0c;氢气作为一种清洁能源&#xff0c;其使用日益广泛&#xff0c;但同时也带来了泄漏的风险。为了确保我们的安全&#xff0c;了解并正确使用氢气泄漏检测仪至关重要。下面将详细介绍氢气…

Optimism的挑战期

1. 引言 前序博客&#xff1a; Optimism的Fault proof 用户将资产从OP主网转移到以太坊主网时需要等待一周的时间。这段时间称为挑战期&#xff0c;有助于保护 OP 主网上存储的资产。 而OP测试网的挑战期仅为60秒&#xff0c;以简化开发过程。 2. OP与L1数据交互 L1&#xf…

STM32学习笔记二——STM32时钟源时钟树

目录 STM32芯片内部系统架构详细讲解&#xff1a; 1.芯片内部混乱电信号解决方案&#xff1a; 2.时钟树&#xff1a; 1.内部RC振荡器与外部晶振的选择 2. STM32 时钟源 3.STM32中几个与时钟相关的概念 4.时钟输出的使能及其流程 5.时钟设置的基本流程 时钟源——单片机…

上海亚商投顾:创业板指失守1600点 全市场超5000只个股下跌

上海亚商投顾前言&#xff1a;无惧大盘涨跌&#xff0c;解密龙虎榜资金&#xff0c;跟踪一线游资和机构资金动向&#xff0c;识别短期热点和强势个股。 一.市场情绪 沪指昨日低开低走&#xff0c;深成指跌超2%&#xff0c;创业板指失守1600点&#xff0c;续创年内新低。脑机接…

C语言KR圣经笔记 6.6 表查询 6.7 typedef

6.6 表查询 为了说明结构体的更多方面&#xff0c;本节我们来写一个表查询功能包的内部代码。在宏处理器或编译器的符号表管理例程中&#xff0c;这个代码是很典型的。例如&#xff0c;考虑 #define 语句&#xff0c;当遇到如下行 #define IN 1 时&#xff0c;名称 IN 与其对…

n-皇后-dfs

import java.io.BufferedReader; import java.io.BufferedWriter; import java.io.IOException; import java.io.OutputStreamWriter; import java.util.Scanner;public class Main {static int n,N 20; //这里只会用到2 * n - 1的格子,开大点保险static char[][] g new c…

Makefile编译原理 makefile中的include关键字

一.makefile中的include关键字 类似C语言中的include 将其他文件的内容原封不动的搬入当前文件 make对include关键字的处理方式&#xff1a; 在当前目录搜索或指定目录搜索目标文件 搜索成功&#xff1a;将文件内容搬入当前makefile中 搜索失败&#xff1a;产生警告&…

聚观早报 | 360 AI搜索App上线;岚图汽车与京东达成合作

聚观早报每日整理最值得关注的行业重点事件&#xff0c;帮助大家及时了解最新行业动态&#xff0c;每日读报&#xff0c;就读聚观365资讯简报。 整理丨Cutie 1月30日消息 360 AI搜索App上线 岚图汽车与京东达成合作 三星电子在硅谷新设实验室 小米平板7系列参数曝光 Spa…

大创项目推荐 题目:基于深度学习的中文对话问答机器人

文章目录 0 简介1 项目架构2 项目的主要过程2.1 数据清洗、预处理2.2 分桶2.3 训练 3 项目的整体结构4 重要的API4.1 LSTM cells部分&#xff1a;4.2 损失函数&#xff1a;4.3 搭建seq2seq框架&#xff1a;4.4 测试部分&#xff1a;4.5 评价NLP测试效果&#xff1a;4.6 梯度截断…

代码随想录算法刷题训练营day20

代码随想录算法刷题训练营day20&#xff1a;LeetCode(654)最大二叉树、LeetCode(617)合并二叉树、LeetCode(700)二叉搜索树中的搜索、LeetCode(700)二叉搜索树中的搜索、LeetCode(98)验证二叉搜索 LeetCode(654)最大二叉树 题目 代码 import java.util.Arrays;/*** Definit…

MATLAB有限元应用-四边形八节点梁受力弯曲

MATLAB在处理平面有限元问题和梁弯曲问题上有很强的能力,主要体现在以下几个方面: 建模与网格划分 MATLAB内置了方便的图形界面工具(pdetoolbox等),可以快速对几何模型进行二维三维网格划分,生成有限元分析需要的网格。 求解器 MATLAB内置了多种求解偏微分方程的有限元求解器…

大模型重塑车载语音交互:赛道巨头如何引领新周期?

车载语音交互赛道正进入新一轮竞争周期。 高工智能汽车注意到&#xff0c;传统车载语音交互赛道当前基本已进入成熟期&#xff0c;主要为任务型助手&#xff0c;包括从单轮对话到多轮对话&#xff0c;单音区到多音区&#xff0c;从单一的导航、多媒体娱乐等座舱功能扩展智能驾…

钢材表面缺陷YOLOV8,OPENCV调用

【免费】钢材表面缺陷YOLOV8资源-CSDN文库 钢材表面缺陷YOLOV8NANO&#xff0c;训练得到PT模型&#xff0c;然后转换成ONNX&#xff0c;OPENCV的DNN调用&#xff0c;支持C,PYTHON,ANDROID

VScode中使用Xdebug调试PHP

君衍. 一、下载VScode与PHPstudy二、配置PHP环境变量三、PHPstudy中启用xdebug扩展四、打开php.ini&#xff0c;修改配置五、修改vscode配置六、VScode安装相关插件七、配置launch.json八、设置断点&#xff0c;开始调试 一、下载VScode与PHPstudy 首先我们自然是需要搭建环境…