前端Web开发

news2024/12/29 9:44:17

安装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.coloradmin.cn/o/1421944.html

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

相关文章

java 社区资源管理系统Myeclipse开发mysql数据库web结构java编程计算机网页项目

一、源码特点 java Web社区资源管系统是一套完善的java web信息管理系统 &#xff0c;对理解JSP java编程开发语言有帮助&#xff0c;系统具有完整的源代码和数据库&#xff0c;系统主要采用B/S模式开发。开发环境为TOMCAT7.0,Myeclipse8.5开发&#xff0c;数据库为Mysql5.…

STM32低功耗模式概念

一、低功耗模式介绍 STM32 的低功耗模式有 3 种&#xff1a; 1)睡眠模式&#xff08;CM3 内核停止&#xff0c;外设仍然运行&#xff09; 2)停止模式&#xff08;所有时钟都停止&#xff09; 3)待机模式&#xff08;1.8V 内核电源关闭&#xff09; 在这三种低功耗模式中&#…

CGAL5.4.1 边塌陷算法

目录 1、使用曲面网格的示例 2、使用默认多面体的示例 3、使用丰富多面体的示例 主要对1、使用曲面网格的示例 进行深度研究 CGAL编译与安装CGAL安装到验证到深入_cgal测试代码-CSDN博客 参考资料CGAL 5.4.5 - Triangulated Surface Mesh Simplification: User Manual …

STM32通用定时器、计数器

时间记录&#xff1a;2024/1/30 一、时钟介绍&#xff08;TIM2-TIM5&#xff09; &#xff08;1&#xff09;通用定时器时钟频率介绍 内部时钟AHB为72MHz&#xff0c;经过APB1预分频器2分频变为36MHz&#xff0c;TIMxClk定时器时钟由时钟树可以看出&#xff0c;如果APB1预分…

力扣136、只出现一次的数字(简单)

1 题目描述 图1 题目描述 2 题目解读 在非空整数数组nums中&#xff0c;有一个元素只出现了一次&#xff0c;其余元素均出现两次。要求找出那个只出现一次的元素。 3 解法一&#xff1a;位运算 位运算&#xff0c;是一种非常简便的方法。 3.1 解题思路 异或运算&#xff0c;有…

PHP抽奖设置中奖率,以及防高并发

一、中奖率,先在后台设定好奖项名称,抽奖份数,以及中奖百分比 奖品表draw 二、 借助文件排他锁,在处理下单请求的时候,用flock锁定一个文件,如果锁定失败说明有其他订单正在处理,此时要么等待要么直接提示用户"服务器繁忙" 阻塞(等待)模式,一般都是用这个模…

如何开通GitHub Copilot

GitHub Copilot 是由GitHub 和OpenAI共同开发的人工智能代码辅助工具&#xff0c;可以自动地生成高质量代码片段、上下文信息等。 通过自然语言处理和机器学习技术&#xff0c;能够通过分析程序员编写的代码、注释和上下文信息&#xff0c;自动生成代码&#xff0c;减轻程序员的…

Centos 7.9 在线安装 VirtualBox 7.0

1 访问 Linux_Downloads – Oracle VM VirtualBox 2 点击 ​the Oracle Linux repo file 复制 内容到 /etc/yum.repos.d/. 3 在 /etc/yum.repos.d/ 目录下新建 virtualbox.repo&#xff0c;复制内容到 virtualbox.repo 并 :wq 保存。 [rootlocalhost centos]# cd /etc/yum.rep…

【js逆向】scrapy基础

目录 一, 爬虫工程化 二, scrapy简介 三, Scrapy工作流程(重点) 四, scrapy安装 4.1 pip 安装 4.2 wheel安装 五, Scrapy实例 六, 自定义数据传输结构item 七, scrapy使用小总结 一, 爬虫工程化 在之前的学习中我们已经掌握了爬虫这门技术需要的大多数的技术点, 但是我…

vue使用json格式化

安装 npm i bin-code-editor -S // Vue2 npm install vue-json-viewer --save 在main.js引用 //引入bin-code-editor相关插件和样式 import CodeEditor from bin-code-editor; import bin-code-editor/lib/styles/index.css; import JsonViewer from vue-json-viewer //vue使用…

【C++航海王:追寻罗杰的编程之路】引用、内联、auto关键字、基于范围的for、指针空值nullptr

目录 1 -> 引用 1.1 -> 引用概念 1.2 -> 引用特性 1.3 -> 常引用 1.4 -> 使用场景 1.5 -> 传值、传引用效率比较 1.6 -> 值和引用作为返回值类型的性能比较 1.7 -> 引用和指针的区别 2 -> 内联函数 2.1 -> 概念 2.2 -> 特性 3 -…

布局管理和样式表

目录 手动操作 相关功能解释&#xff1a; Qt Designer或者QC中的Spacer控件及其属性 网格布局 代码操作 setFocusPolicy() 如果不进行布局&#xff0c;意味着界面上的东西都是写死的。 当我们进行布局操作之后&#xff0c;控件的位置、大小一般会根据窗口缩放来自动调整。…

计算机设计大赛 深度学习 opencv python 实现中国交通标志识别

文章目录 0 前言1 yolov5实现中国交通标志检测2.算法原理2.1 算法简介2.2网络架构2.3 关键代码 3 数据集处理3.1 VOC格式介绍3.2 将中国交通标志检测数据集CCTSDB数据转换成VOC数据格式3.3 手动标注数据集 4 模型训练5 实现效果5.1 视频效果 6 最后 0 前言 &#x1f525; 优质…

excel怎么设置密码?轻松保护您的工作表

在数字化时代&#xff0c;数据的安全性显得尤为重要。excel作为我们日常工作中广泛使用的办公软件&#xff0c;其中可能包含了大量的敏感数据。为了确保这些数据不被未授权的人访问&#xff0c;本文将为您详细介绍excel怎么设置密码&#xff0c;从而有效地保护您的数据安全。 方…

STM32F407ZGT6——实验9-4 通用定时器脉冲计数实验

一、配置路线 二、问题及反思 配置的时候误以为需要先把【输入捕获配置】了再去配置【从模式】&#xff0c;后面验证了这样配置没办法产生预期的效果。 代码如下&#xff1a;void gtim_timx_cnt_chy_init(uint16_t psc, uint16_t arr) void gtim_timx_cnt_chy_init(uint16_t…

全新魅思V20正规视频影视系统源码/APP+H5视频影视源码

全新魅思V20正规视频影视系统源码&#xff0c;APPH5视频影视源码。会员花费三千购入的&#xff0c;具体搭建教程放压缩包了&#xff01; 有兴趣的下载自行研究吧&#xff0c;搭建一共要用到3个域名&#xff0c;可以拿二级域名搭建。

企业级大模型的护城河:RAG + 微调

围绕LLM的炒作是前所未有的&#xff0c;但这是有道理的&#xff0c;生成式 AI 有潜力改变我们所知道的社会。 在很多方面&#xff0c;LLM将使数据工程师变得更有价值——这令人兴奋&#xff01; 不过&#xff0c;向老板展示数据发现工具或文本到 SQL 生成器的炫酷演示是一回事…

解密数据清洗,SQL中的数据分析

大家好&#xff0c;数据库表中的数据经常会很杂乱。数据可能包含缺失值、重复记录、异常值、不一致的数据输入等&#xff0c;在使用SQL进行分析之前清洗数据是非常重要的。 当学习SQL时&#xff0c;可以随意地创建数据库表&#xff0c;更改它们&#xff0c;根据需要更新和删除…

云原生 k8s 可能使用到的端口整理【不定期更新】

k8s 因为涉及到的组件太多了&#xff0c;所以端口有很多&#xff0c;这里整理了日常所接触的接口&#xff0c;后续有新的再更新。 如果是通过公网 IP 进行安装的时候需要根据实际情况有选择的进行放开&#xff1b;一般只有云厂商会提供公网 IP 访问&#xff0c;自建的话不建议 …

GrayLog踩坑历险记

背景 GrayLog作为ELK的替代产品&#xff0c;是新生代的日志采集框架。在一个采集节点日志的需求中&#xff0c;因为节点很多&#xff0c;产生的日志也很多&#xff0c;因此尝试了使用GrayLog进行日志的采集。下面记录一下使用GrayLog中遇到的坑和解决方案。 一、部署与启动 …