【Python Web开发】Flask+HTML学习笔记

目录

  • Flask框架
    • 一、安装flask库
    • 二、运行一个网页
    • 三、库函数及变量
  • HTML标签语言
    • 一、基本格式
    • 二、标签
      • 2.1 块级标签
        • 2.1.1 标题
        • 2.1.2 div
        • 2.1.3 图片
        • 2.1.4 列表
        • 2.1.5 表格
      • 2.2 行内标签
        • 2.2.1 span
        • 2.2.2 超链接
        • 2.2.3 输入
      • 2.3 其他标签
        • 2.3.1 提交表单

Flask框架

一、安装flask库

pip install flask

二、运行一个网页

网页的html文件需要放在当前目录的templates文件夹下,即
在这里插入图片描述
之后就可以用render_template函数来读取文件加载网页。

from flask import Flask, render_template# 创建Flask对象
app = Flask(__name__)@app.route("/路径")
def index():return render_template("index.html")if __name__ == "__main__":app.run()

三、库函数及变量

接收到的get和post的信息

from flask import request
# 接收的get信息
request.args
# 接收的post信息
request.form

HTML标签语言

一、基本格式

<!DOCTYPE html>
<html lang = "en"><head><meta charset="UTF-8"><title>My Website</title></head><body><h6>Hello World</h6></body>
</html>

二、标签

2.1 块级标签

块级标签会占用一整行的内容

2.1.1 标题

有6个等级,分为h1~h6

<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
2.1.2 div

占据一整行内容

<div>该段内容占一行</div>
2.1.3 图片

显示一张图片

<img src="图片链接" />

如果加载的自己的图片,需要将图片放在static文件夹下。

<img src="static/图片名" />

控制图片的大小

<img src="图片链接" style="height:100px; width:100px;" />
<img src="图片链接" style="height:10%; width:10%;" />
2.1.4 列表

ul将在每一行前加圆点,ol则会为序号

<ul><li>内容1</li><li>内容2</li>
</ul>
2.1.5 表格
<table border="1"><thead><tr> <th>表头1</th> <th>表头2</th> <th>表头3</th> </tr></thead><tbody><tr> <td>内容1</td> <td>内容2</td> <td>内容3</td> </tr> <tr> <td>内容1</td> <td>内容2</td> <td>内容3</td> </tr> <tr> <td>内容1</td> <td>内容2</td> <td>内容3</td> </tr> </tbody>
</table>

2.2 行内标签

2.2.1 span

行内标签又称内联标签,之占用需要占用的地方

<span>该段内容只占需要的地方</span>
2.2.2 超链接

跳转其他网站需要写全

<a href="https://www.baidu.com">点击跳转</a>

跳转自己的网站只需要写路径,下面两句效果相同。

<a href="http://127.0.0.1:5000/路径">点击跳转</a>
<a href="/路径">点击跳转</a>
2.2.3 输入

输入文本

<input type="text">

输入密码

<input type="password">

选择文件

<input type="file">

单选框。如果名称一致,则表示这些按钮是互斥的,只能单选。

<input type="radio" name="test">内容1
<input type="radio" name="test">内容2

复选框

<input type="checkbox">内容1
<input type="checkbox">内容2
<input type="checkbox">内容3

按钮。button为普通按钮,submit为提交表单按钮。

<input type="button" value="按这里">
<input type="submit" value="按这里">

单选下拉菜单

<select><option>选项1</option><option>选项2</option><option>选项3</option>
</select>

多选下拉菜单

<select multiple><option>选项1</option><option>选项2</option><option>选项3</option>
</select>

多行文本。row控制默认大小为几行

<textarea row="3"></textarea>

2.3 其他标签

2.3.1 提交表单

提交需要利用form标签,当点击提交按钮时,会提交在form标签内的内容。提交方法有get和post。以下代码提交后会跳转到http://127.0.0.1:5000/提交的地址?tag=输入内容

<form method="get" action="提交的地址"><input type="text" name="tag"><input type="submit" value="提交">
</form>

未完待续……

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

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

相关文章

电阻柜柜体采用不锈钢材质有什么优点

电阻柜柜体采用不锈钢材质有什么优点&#xff1a; 1. **耐腐蚀性**&#xff1a;不锈钢材质具有极好的耐腐蚀性&#xff0c;能有效抵抗各种腐蚀物质的侵蚀&#xff0c;确保设备经久耐用。 2. **美观大方**&#xff1a;不锈钢表面光滑&#xff0c;质感细腻&#xff0c;呈现出大气…

Elasticsearch写入、读取、更新、删除以及批量操作(golang)

目录 1、背景 2、elasticsearch基础操作 2.1 创建es链接客户端 2.2 创建、删除索引 2.3 插入文档 2.3 查询文档 2.4 删除一条文档 2.5 更新文档 2.6 逻辑查询 2.7 滚动查询(批量查询) 2.8 批量插入数据 2.9 批量更新文档 2.10 批量删除文档 3、检索条件设置 4、测…

探索Unity与C#的无限潜能:从新手到高手的编程之旅

在数字创意与技术创新交织的今天&#xff0c;Unity游戏引擎凭借其强大的跨平台能力和灵活的编程接口&#xff0c;成为了无数开发者心中的首选。而C#&#xff0c;作为Unity的官方脚本语言&#xff0c;更是以其面向对象的特性和丰富的库支持&#xff0c;为游戏开发注入了无限可能…

Golang | Leetcode Golang题解之第375题猜数字大小II

题目&#xff1a; 题解&#xff1a; func getMoneyAmount(n int) int {f : make([][]int, n1)for i : range f {f[i] make([]int, n1)}for i : n - 1; i > 1; i-- {for j : i 1; j < n; j {f[i][j] j f[i][j-1]for k : i; k < j; k {cost : k max(f[i][k-1], f[…

关于Scrapy的那些事儿(四)Scrapy Shell

Scrapy Shell launch Scrapy shell 使用如下命令&#xff1a; scrapy shell <url>当运行scrapy shell的时候&#xff0c;它为我们提供了一些功能函数&#xff1a; shelp() :打印可用对象和快捷命令的帮助列表fetch&#xff08;request or url&#xff09;&#xff1a;…

CMake构建学习笔记11-minizip库的构建

准确来说&#xff0c;minizip其实是zlib提供的辅助工具&#xff0c;位于zlib库的contrib文件夹内。minizip提供了更为高级一点的接口&#xff0c;能直接操作文件进行压缩。不过&#xff0c;有点麻烦的是这个工具并没有提供CMake构建的方式。那么可以按照构建giflib的方式&#…

Java开发工程师-匹配性岗位(借鉴性质)

1.匹配性质 技能迁移:Java开发工程师通常具备较强的编程能力、逻辑思维和问题解决能力,这些技能可以迁移到其他领域。行业选择:考虑目前行业趋势以及未来发展方向,Java工程师可以转向大数据、人工智能、云计算等等领域。个人兴趣与职业发展:转行时个人的兴趣和职业发展规划…

1.1量化交易的定义与魅力

Hey&#xff0c;Python高手们&#xff0c;欢迎来到量化交易的世界&#xff01;在这里&#xff0c;我们不谈风花雪月&#xff0c;只谈数字和代码。量化交易&#xff0c;听起来是不是有点像是“用电脑代替人脑做交易”的黑科技&#xff1f;没错&#xff0c;你猜对了&#xff01; …

【JAVA入门】Day28 - 数据结构

【JAVA入门】Day28 - 数据结构 文章目录 【JAVA入门】Day28 - 数据结构一、栈二、队列三、数组3.1 ArrayList 四、链表4.1 LinkedList 五、二叉树5.1 二叉查找树5.2 二叉树的遍历方式5.3 平衡二叉树5.4 平衡二叉树的旋转5.5 平衡二叉树需要旋转的几种情况 六、红黑树6.1 红黑规…

永成防回水防回气装置煤矿毫不犹豫选择

永成防回水防回气装置煤矿毫不犹豫选择&#xff0c;不敢说我们有多好&#xff0c;我们只把简单的事做好&#xff0c;用心服务&#xff0c;因为品质&#xff0c;所以信任。因为信任&#xff0c;所以值得选择。 本防回水防回气装置是一种用于煤矿瓦斯管路爆渣和燃烧时防止回火、…

abstract类

1 问题 abstract类不能用 new运算符创建对象&#xff0c;必须产生其子类&#xff0c;由子类创建对象。若 abstract类的类体中有 abstract()方法&#xff0c;则只允许声明&#xff0c;不能带有方法体&#xff0c;而该类的子类必须实现 abstract()方法。一个abstract类只关心子类…

3_1_PID控制原理

自从计算机进入控制领域以来&#xff0c;用数字计算机代替模拟计算机调节器组成计算机控制系统&#xff0c;不仅可以用软件实现PID控制算法&#xff0c;而且可以利用计算机的逻辑功能&#xff0c;使PID控制更加灵活。数字PID控制在生产过程中是一种最普遍采用的控制方法&#x…

[Algorithm][综合训练][奇数位丢弃][求和][计算字符串的编辑距离]详细讲解

目录 1.奇数位丢弃1.题目链接2.算法原理详解 && 代码实现 2.求和1.题目链接2.算法原理详解 && 代码实现 3.计算字符串的编辑距离1.题目链接2.算法原理详解 && 代码实现 1.奇数位丢弃 1.题目链接 奇数位丢弃 2.算法原理详解 && 代码实现 解法…

YOLOv9改进策略【损失函数篇】| 利用MPDIoU,加强边界框回归的准确性

一、背景 目标检测和实例分割中的关键问题&#xff1a; 现有的大多数边界框回归损失函数在不同的预测结果下可能具有相同的值&#xff0c;这降低了边界框回归的收敛速度和准确性。 现有损失函数的不足&#xff1a; 现有的基于 ℓ n \ell_n ℓn​范数的损失函数简单但对各种尺度…

计算机网络速成(三)

一、网络协议与模型 什么是协议&#xff1f; 协议是指计算机系统中完成特定任务所必需的规则和约定&#xff0c;特别是数据传输和交换的规则和约定。OSI和TCP/IP是什么&#xff1f; OSI&#xff08;开放式系统互连参考模型&#xff09;是一种网络架构模型&#xff0c;将网络系…

linux配置jenkins环境

目录 一、安装javal环境 二、安装ansible 三、安装git 四、配置服务器免密登陆 五、安装jenkins 一、安装java环境 本次安装jdk的版本为11&#xff0c;jdk的版本需要和jenkins版本相匹配 1、下载jdk&#xff0c;可以去oracle官网注册账号进行下载&#xff0c;不想折腾的可…

Redis与SpringMVC的整合与最佳实践

整合Redis与Spring MVC&#xff08;现在通常是Spring Boot的一部分&#xff09;可以提高应用性能&#xff0c;特别是在处理大量数据缓存和会话状态管理方面。 下面是一些关于如何整合Redis与Spring MVC的最佳实践&#xff1a; 1. 引入依赖 首先&#xff0c;你需要在你的项目中…

【Java】Maven多环境切换实战(实操图解)

Java系列文章目录 补充内容 Windows通过SSH连接Linux 第一章 Linux基本命令的学习与Linux历史 文章目录 Java系列文章目录一、前言二、学习内容&#xff1a;三、问题描述四、解决方案&#xff1a;4.1 Maven多环境配置学习4.2 切换环境4.2.1 先打包4.2.2 之后可以切换 五、总结…

【ACM独立出版 | 厦大主办】第五届计算机科学与管理科技国际学术会议(ICCSMT 2024,10月18-20)

第五届计算机科学与管理科技国际学术会议(ICCSMT 2024) 定于2024年10月18-20日在中国厦门举行。 会议旨在为从事“计算机科学”与“管理科技”研究的专家学者、工程技术人员、技术研发人员提供一个共享科研成果和前沿技术&#xff0c;了解学术发展趋势&#xff0c;拓宽研究思路…

设计模式结构型模式之适配器模式

结构型模式之适配器模式 一、概述和使用场景1、概述2、使用场景&#xff1a;3、主要分类 二、 代码示例1、类适配器模式2、接口适配器3、对象适配器 四、总结1、适配器模式2、适配器模式的优点3、适配器模式的缺点 一、概述和使用场景 1、概述 适配器模式是一种结构型设计模式…