前端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:图片大小(像素)

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

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

相关文章

德国布局离子阱量子计算机!德国电信与奥地利量子公司AQT达成合作

​内容来源&#xff1a;量子前哨&#xff08;ID&#xff1a;Qforepost&#xff09; 编辑丨慕一 编译/排版丨琳梦 璧园 深度好文&#xff1a;1000字丨8分钟阅读 近期&#xff0c;德国电信宣布&#xff0c;其子公司T-Systems与奥地利量子计算公司Alpine Quantum Technologies …

ubuntu gedit主题更改

ubuntu16.04 gedit 编辑器又有首选项如何设置主题 这里下载主题 将主题XML复制到 /usr/share/gtksourceview-3.0/styles 文件夹内&#xff1b; 使用gsettings 命令设置喜欢的配色方案&#xff0c;使用方式如下&#xff1a;(实测不带.xml后缀哦) gsettings set org.gnome.gedi…

电气防火限流式保护器在可燃性粉尘危害场所的作用

安科瑞戴婷 摘要&#xff1a;文章阐述了可燃性粉尘的特点及可燃性粉尘环境粉尘爆炸的危害性&#xff0c;结合国家现行的电气产品规范的要求&#xff0c;通过一个提取车间内部粉尘爆炸危险区域的电气设计实例&#xff0c;系统阐述了可燃性粉尘危险环境的分区原则、电气设备选型…

Kotlin快速入门系列11

Kotlin的集合 集合类 Java类库有一套相当完整的容器集合类用来持有对象。跟Java一样&#xff0c;集合类存放的都是对象的引用&#xff0c;而非对象本身(我们经常说的集合指的是集合中对象的引用)&#xff0c;Kotlin的集合类是在Java的集合类库基础上进行的优化&#xff0c;新引…

第九节HarmonyOS 常用基础组件21-ImageAnimator

1、描述 提供帧动画组件来实现逐帧播放图片的能力&#xff0c;可以配置需要播放的图片列表&#xff0c;每张图片可以配置时长。 2、接口 ImageAnimator() 3、属性 参数名 参数类型 描述 images Array<ImageFrameInfo> 设置图片帧信息集合&#xff0c;每一帧的帧…

Python实现avif图片转jpg格式并识别图片中的文字

文章目录 一、图片识别文字1、导包2、代码实现3、运行效果 二、avif格式图片转jpg格式1、导包2、代码实现3、运行效果4、注意事项 三、Python实现avif图片转jpg格式并识别文字全部代码 在做数据分析的时候有些数据是从图片上去获取的&#xff0c;这就需要去识别图片上的文字。P…

C# 多线程(2)——线程同步

目录 1 线程不安全2 线程同步方式2.1 简单的阻塞方法2.2 锁2.2.1 Lock使用2.2.2 互斥体Mutex2.2.3 信号量Semaphore2.2.3 轻量级信号量SemaphoreSlim2.2.4 读写锁ReaderWriterLockSlim 2.3 信号同步2.3.1 AutoResetEvent2.3.1.1 AutoResetEvent实现双向信号 2.3.2 ManualResetE…

【算法与数据结构】300、LeetCode最长递增子序列

文章目录 一、题目二、解法三、完整代码 所有的LeetCode题解索引&#xff0c;可以看这篇文章——【算法和数据结构】LeetCode题解。 一、题目 二、解法 思路分析&#xff1a;   程序如下&#xff1a; class Solution { public:int lengthOfLIS(vector<int>& nums)…

函数高级.

函数高级 1. 函数嵌套1.1 函数在作用域中1.2 函数定义的位置1.3 嵌套引发的作用域问题练习题 2.闭包3.装饰器3.1 第一回合3.2 第二回合3.3 第三回合优化伪应用场景重要补充&#xff1a;functools 总结作业 各位小伙伴想要博客相关资料的话关注公众号&#xff1a;chuanyeTry即可…

广告营销为什么需要使用代理IP

在广告营销中使用代理IP有几个主要原因 绕过限制和封禁 某些广告平台或网站可能会限制或封禁特定IP地址或IP地址范围&#xff0c;以防止滥用或欺诈行为。使用代理IP可以帮助您绕过这些限制&#xff0c;使您能够在被封禁的IP范围之外进行广告投放。 地理定位和目标市场 广告…

知识点积累系列(六)操作系统(Linux+Windows+MacOS)篇【持续更新】

云原生学习路线导航页&#xff08;持续更新中&#xff09; 本文是 知识点积累 系列文章的第六篇&#xff0c;记录日常学习中遇到的 操作系统相关 的知识点&#xff0c;包括 Linux、Windows、MacOS等 1.Linux相关 1.1.shell脚本 1.2.命令相关 1.2.1.vim命令 1.2.2.nslookup命…

GPT-4 Vision调试任何应用,即使缺少文本日志 升级Streamlit七

GPT-4 Vision 系列: 翻译: GPT-4 with Vision 升级 Streamlit 应用程序的 7 种方式一翻译: GPT-4 with Vision 升级 Streamlit 应用程序的 7 种方式二翻译: GPT-4 Vision静态图表转换为动态数据可视化 升级Streamlit 三翻译: GPT-4 Vision从图像转换为完全可编辑的表格 升级St…

本地配置Joplin Server用于Joplin笔记同步并实现公网远程访问

文章目录 1. 安装Docker2. 自建Joplin服务器3. 搭建Joplin Sever4. 安装cpolar内网穿透5. 创建远程连接的固定公网地址 Joplin 是一个开源的笔记工具&#xff0c;拥有 Windows/macOS/Linux/iOS/Android/Terminal 版本的客户端。多端同步功能是笔记工具最重要的功能&#xff0c;…

LabVIEW潜油电泵数据采集系统

LabVIEW潜油电泵数据采集系统 介绍一个基于LabVIEW的潜油电泵数据采集系统。该系统目的是通过高效的数据采集和处理&#xff0c;提高潜油电泵的性能监控和故障诊断能力。 系统由硬件和软件两部分组成。硬件部分主要包括数据采集卡、传感器和电泵等&#xff0c;而软件部分则是…

IMX6LL|打造自己的驱动总线

xbus&#xff1a;打造自属的驱动总线 驱动总线 软件与硬件代码分离&#xff0c;提高程序的复用性 device–关联硬件代码driver_devices–关联软件代码bus_type–统一管理、设置match匹配规则 设备驱动模型体现分离思想 bus-xbus-devices-drivers 总线管理 buses_init()函…

鸿蒙系统扫盲(七):勘误补充总结,收个尾

这是笔者鸿蒙扫盲系列的最后一篇了&#xff0c;准备对过去的六篇扫盲系列文章&#xff0c;错误的地方做一些勘误&#xff0c;并且补充更新一些朋友们感兴趣的知识&#xff0c;最后收个尾。 1.勘误&#xff0c;编译型语言和解释型语言 在鸿蒙系统扫盲&#xff08;五&#xff0…

网工内推 | 网络安全工程师专场,大平台,六险一金

01 汽车之家 招聘岗位&#xff1a;高级网络安全工程师 职责描述&#xff1a; 1、负责公司网站、系统与产品的漏洞扫描、渗透测试与安全评估工作&#xff1b; 2、负责公司安全系统与安全设备的运维&#xff0c;负责公司网络安全监控管理&#xff1b; 3、负责公司安全事件的应急…

社区投稿|Desig质押聚合器功能,帮助用户选出更适合的质押策略

在Sui上&#xff0c;不同的质押协议提供收益各异的产品&#xff0c;因此用户面临着众多可以质押token的协议&#xff0c;眼花缭乱无从选择。Desig质押聚合器功能现已整合到Desig钱包扩展中&#xff0c;极大地简化了寻找质押策略的流程。事实上&#xff0c;其智能质押功能支持完…

记录:Windows上QML程序打包

0.本文修改记录 &#xff08;2019-9-3&#xff09; 修改了VC环境相关的内容 &#xff08;2020-3-5&#xff09; 修改了QML模块相关的内容 &#xff08;2022-8-31&#xff09;one-rabbit大佬指出打包命令的参数错误&#xff0c;根据文档可知&#xff1a;qmldir应该为exe对应项…

transformer_位置编码代码笔记

transformer_位置编码代码笔记 transformer输入的序列中&#xff0c;不同位置的相同词汇可能会表达不同的含义&#xff0c;通过考虑位置信息的不同来区分序列中不同位置的相同词汇。 位置编码有多种方式&#xff0c;此处仅记录正余弦位置编码 正余弦位置编码公式如下&#x…