前端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.rhkb.cn/news/248955.html

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

相关文章

鸿蒙ArkUI开发-实现增删Tab页签

场景介绍 部分应用在使用过程中需要自定义添加或删除标签的场景&#xff0c;比如在浏览器中的顶部标签栏中需要新打开或关闭网页页签&#xff0c;而这种场景与Tabs组件效果类似&#xff0c;但Tabs组件不提供增加或删除页签的功能&#xff0c;不能自由的增加删除页签&#xff0…

python数据类型-列表

1 python中列表的定义 python中列表是一种有序和可更改的集合&#xff0c;允许重复的成员&#xff0c;列表中的元素之间数据类型可以不同&#xff08;元素之间数据类型可以不相同&#xff0c;这一点和其它的面向对象的开发语言有很大的不同&#xff0c;如C#、Java&#xff09;…

UI设计行业的就业前景如何?

UI设计师的就业前景是许多新人进入这个行业之前关注的问题之一。在数字时代&#xff0c;用户界面设计在各个行业发挥着越来越重要的作用。优秀的UI设计师需要优化他们的产品和服务&#xff0c;无论是互联网公司、软件开发公司、医疗器械、汽车制造等传统行业。本文将从市场需求…

基于Javaweb开发的二手图书零售系统详细设计【附源码】

基于Javaweb开发的二手图书零售系统详细设计【附源码】 &#x1f345; 作者主页 央顺技术团队 &#x1f345; 欢迎点赞 &#x1f44d; 收藏 ⭐留言 &#x1f4dd; &#x1f345; 文末获取源码联系方式 &#x1f4dd; &#x1f345; 查看下方微信号获取联系方式 承接各种定制系统…

【Vue】前端项目引入阿里图标

【Vue&React】前端项目引入阿里图标 方式11、登录自己的iconfont-阿里巴巴矢量图标库&#xff0c;把需要的图标加入到自己的项目中去&#xff1b;2、加入并进入到项目中去选择Font class 并下载到本地3、得到的文件夹如下4. 把红框中的部分粘贴到自己的项目中&#xff08; …

【HarmonyOS 4.0 应用开发实战】TypeScript入门之接口详讲

个人名片&#xff1a; &#x1f43c;作者简介&#xff1a;一名大三在校生&#xff0c;喜欢AI编程&#x1f38b; &#x1f43b;‍❄️个人主页&#x1f947;&#xff1a;落798. &#x1f43c;个人WeChat&#xff1a;hmmwx53 &#x1f54a;️系列专栏&#xff1a;&#x1f5bc;️…

接口的多继承

接口的多继承也就是一个接口可以同时继承多个接口&#xff0c;也是使用extends关键字实现。 接口的多继承的好处&#xff1a;假如有一个实现类要继承三个接口&#xff0c;现在只需要将多个接口“合并”为一个接口&#xff0c;就可以便于实现类实现。 注意&#xff1a;1.如果一…

为什么要用云手机养tiktok账号

在拓展海外电商市场的过程中&#xff0c;许多用户选择采用tiktok短视频平台引流的策略&#xff0c;以提升在电商平台上的流量&#xff0c;吸引更多消费者。而要进行tiktok引流&#xff0c;养号是必不可少的一个环节。tiktok云手机成为实现国内跨境养号的一种有效方式&#xff0…

Kafka-服务端-PartitionLeaderSelector、ReplicaStateMachine

PartitionLeaderSelector 通过对前面的分析可知&#xff0c;PartitionMachine将Leader副本选举、确定ISR集合的工作委托给了PartitionLeaderSelector接口实现&#xff0c;PartitionMachine可以专注于管理分区状态。这是策略模式的一种典型的应用场景。 图展示了PartitionLead…

WINDOWS中电源设置小工具

你可以使用WinPowerSet&#xff0c;玩CS2之前&#xff0c;把电源设置为“高性能”&#xff0c;玩后设置为“平衡”。 WinPowerSet 下载地址&#xff1a; 链接&#xff1a;https://pan.baidu.com/s/1iOp29c4ica9L47t_l9lZ2w?pwdd248 提取码&#xff1a;d248 最近新配了一台12…

vue使用富文本

1、安装 cnpm install vue-quill-editor2、在main.js中引入 // 富文本 import VueQuillEditor from vue-quill-editor // require styles 引入样式 import quill/dist/quill.core.css import quill/dist/quill.snow.css import quill/dist/quill.bubble.css Vue.use(VueQuill…

Roxlabs全球IP代理服务:解锁高效数据采集与网络应用新境界

引言 在这个数字化迅速发展的时代&#xff0c;数据采集和网络应用的重要性显得愈发突出。江苏阿克索网络科技有限公司旗下的Roxlabs&#xff0c;以其卓越的全球IP代理服务&#xff0c;正引领着这一领域的创新和发展。Roxlabs不仅提供遍及200多个国家和地区的高质量动态住宅IP资…

Linux下使用信号量实现PV操作

一.信号量与PV操作概述 在多道程序系统中&#xff0c;由于资源共享与进程合作&#xff0c;使各进程之间可能产生两种形式的制约关系&#xff0c;一种是间接相互制约&#xff0c;例如&#xff0c;在仅有一台打印机的系统&#xff0c;同一时刻只能有一个进程分配到到打印机&…

ONLYOFFICE | 免费开源办公神器新选择

目录 前言&#xff1a; 1、什么是ONLYOFFICE&#xff1f; 2、ONLYOFFICE下载使用 3、ONLYOFFICE团队协作云办公功能 4、ONLYOFFICE 8.0新版本的亮点功能 4.1、显示协作者头像 4.2、插件 UI 界面更新 4.3、可填写的 PDF 表单 5、最后 前言&#xff1a; 一个好的开发工具…

(五)MySQL的备份及恢复

1、MySQL日志管理 在数据库保存数据时&#xff0c;有时候不可避免会出现数据丢失或者被破坏&#xff0c;这样情况下&#xff0c;我们必须保证数据的安全性和完整性&#xff0c;就需要使用日志来查看或者恢复数据了 数据库中数据丢失或被破坏可能原因&#xff1a; 误删除数据…

PyTorch深度学习实战(34)——Pix2Pix详解与实现

PyTorch深度学习实战&#xff08;34&#xff09;——Pix2Pix详解与实现 0. 前言1. 模型与数据集1.1 Pix2Pix 基本原理1.2 数据集分析1.3 模型构建策略 2. 实现 Pix2Pix 生成图像小结系列链接 0. 前言 Pix2Pix 是基于生成对抗网络 (Convolutional Generative Adversarial Netwo…

[数据结构]-哈希

前言 作者&#xff1a;小蜗牛向前冲 名言&#xff1a;我可以接受失败&#xff0c;但我不能接受放弃 如果觉的博主的文章还不错的话&#xff0c;还请点赞&#xff0c;收藏&#xff0c;关注&#x1f440;支持博主。如果发现有问题的地方欢迎❀大家在评论区指正 本期学习目标&…

Golang 流媒体服务器lalserver使用指南

目录 安装 使用 1.推流 2.播放 官方地址 安装 1.下载源码 wget https://github.com/q191201771/lal/releases/download/v0.36.7/lal_v0.36.7_linux.zipunzip lal_v0.36.7_linux.zip cd lal_v0.36.7_linux 2.启动 ./bin/lalserver -c ./conf/lalserver.conf.json 使用 …

蓝桥杯---牌型种数

小明被劫持到X赌城&#xff0c;被迫与其他3人玩牌。一副扑克牌(去掉大小王牌,共52张)&#xff0c;均匀发给4个人&#xff0c;每个人13张。这时&#xff0c;小明脑子里突然冒出一个问题&#xff1a;如果不考虑花色&#xff0c;只考虑点数&#xff0c;也不考虑自己得到的牌的先后…

WSL2+ubuntu 18+VsCode 配置C/C++开发环境 踩坑

1. 管理员模式打开cmd&#xff0c;或PowerShell &#xff0c;输入 wsl --install 可能出现的错误&#xff1a;无法解析服务器名称或地址 解决方式&#xff1a;科学上网 安装WSL时遇到“无法解析服务器名称或地址”的错误及解决方法 - 知乎 错误2&#xff1a;Error 0x8037…