一、Flask学习之HTML

一、Flask学习之HTML

1.运行简单页面

首先需要搭建环境：

pip install flask

from flask import Flaskapp = Flask(__name__)# 创建了网址 /show/info 和函数index之间的对应关系，以后用户在浏览器上访问/show/info，网站自动执行index函数
@app.route('/show/info')
def index():return "中国联通"if __name__ == '__main__':app.run()
  1. app = Flask(__name__): 创建了一个Flask应用实例，__name__参数表示当前模块的名称，通常用于确定资源的位置。
  2. @app.route('/show/info'): 这是一个装饰器，将下面的index()函数与指定的路由/show/info关联起来。当用户访问这个路由时，将执行index()函数。

运行会得到下面的结果：

然后在浏览器中输入，http://127.0.0.1:5000/show/info就能看到运行结果：

image-20240116155728641

2.使用HTML文件

主文件：

from flask import Flask, render_templateapp = Flask(__name__)# 创建了网址 /show/info 和函数index之间的对应关系，以后用户在浏览器上访问/show/info，网站自动执行index函数
@app.route('/show/info')
def index():# 默认去项目根目录下templates文件夹中寻找return render_template('hellopanda.html')if __name__ == '__main__':app.run()

hellopanda.html文件：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><h1>hello!panda</h1>
</body>
</html>

因为网页写出来不可能是用简单的字符串，所以需要使用HTML来保存写好的网页，使用render_template('hellopanda.html')来读取已经写好的文件，这样可以使网页写的更加好看，并且分模块编写。

运行结果：

image-20240116162525882

3.HTML标签

3.1. 标题样式

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

运行结果：

image-20240116170111377

3.2 div和span

<div>panda panda</div>
<div>panda 学习笔记</div>
<span>panda panda</span>
<span>panda 学习笔记</span>

div是块级标签，要占一整行，而span是行内标签，不占一整行，默认会和下一个span之间产生一个空格，如果不需要产生空格就两个pan放一行。

image-20240116171051206

3.3 超链接

<a href="https://www.csdn.net/">CSDN-专业开发者社区</a>

<a> 标签用于创建超链接，href 属性指定链接的目标URL。

  • 如果是访问别人的网站，需要将网站链接全部放进来
  • 如果是访问自己的项目的网站，只需要将路径放上去就好了，不需要加回环地址与端口号

例如，新建一个网站：

from flask import Flask, render_templateapp = Flask(__name__)# 创建了网址 /show/info 和函数index之间的对应关系，以后用户在浏览器上访问/show/info，网站自动执行index函数
@app.route('/show/info')
def index():return render_template('hellopanda.html')@app.route('/get/news')
def getNews():return render_template('getNews.html')if __name__ == '__main__':app.run()

getNews.html：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>getNews</title>
</head>
<body><h1>欢迎访问本系统</h1><div><span>欢迎光临</span></div>
</body>
</html>

hellopanda.html：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><!--访问其他人的网站需要把完整链接放进来--><a href="https://www.csdn.net/">CSDN-专业开发者社区</a><br><!--访问本项目的网站把路径放进来就行--><a href="/get/news">进入页面</a>
</body>
</html>

3.4 图片

插入图片分类两种，一种是插入别人网站的图片（链接），一种是插入自己项目目录下的图片。

  1. 插入别人网站下目录的图片：

    <img src="https://gd-hbimg.huaban.com/b898519e662fe0b1841e60495a2a66bf38a0cacf29d16-B9xHZr_fw1200">

    有些链接可能是用不了，因为某些网站有防盗链，防止被访问。

  2. 插入自己项目目录下的图片：

    • 首先要在根目录下创建static目录，然后将图片存放在static目录中
    • 然后再把src属性设置为图片路径
    <img src="/my_picture.png" alt="自己的图片">

如果插入的图片太大，可以设置像素，比如：（如果只指定一个高度或者宽度的话，会按照图像原尺寸比例进行放大或缩小）

<img style="height: 400px" src="/static/my_picture.png" alt="自己的图片">

3.5 练习题

题目：写一个人物介绍网页，里面有图片，点击人物图片，可以跳转到相应的介绍页，介绍页要新建标签页，而不是在当前页面显示

主程序：

from flask import Flask, render_template
app = Flask(__name__)@app.route('/show/index')
def show_index():return render_template('demo1_1.html')if __name__ == '__main__':app.run()

demo1_1：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>首页</title>
</head>
<body><h1>欢迎访问本系统</h1><!--默认是当前页面打开，但是如果target属性值为_blank，就是在新建标签页打开--><a href="https://www.conanpedia.com/%E6%B1%9F%E6%88%B7%E5%B7%9D%E6%9F%AF%E5%8D%97" target="_blank"><img src="https://cloud.sbsub.com/pedia/d/d8/CHARACTER_LIST_%E6%B1%9F%E6%88%B7%E5%B7%9D%E6%9F%AF%E5%8D%97.png" alt="柯南"></a><a href="https://www.conanpedia.com/%E5%B7%A5%E8%97%A4%E6%96%B0%E4%B8%80" target="_blank"><img src="https://cloud.sbsub.com/pedia/4/43/CHARACTER_LIST_%E5%B7%A5%E8%97%A4%E6%96%B0%E4%B8%80.png" alt="工藤新一"></a><a href="https://www.conanpedia.com/%E6%AF%9B%E5%88%A9%E5%85%B0" target="_blank"><img src="https://cloud.sbsub.com/pedia/1/15/CHARACTER_LIST_%E6%AF%9B%E5%88%A9%E5%85%B0.png" alt="毛利兰"></a>
</body>
</html>

3.6 列表

  1. 无序列表

    <ul><li>小红</li><li>小明</li><li>小丽</li>
</ul>

  2. 有序列表

    <ol><li>小红</li><li>小明</li><li>小丽</li>
</ol>

    3.7表格

    表格是由<table></table>嵌套起来的，里面分为两部分<thead></thead>和<tbody></tbody>组成，第一部分是表头，即每一列的名字，要用<tr></tr>包裹起来，然后每一列的名字用<th></th>包裹起来，第二部分是表的内容，同样每行要用<tr></tr>包裹起来，然后里面每个值用<td></td>包裹起来。

    例如：

    <table border="1"><thead><tr> <th>学号</th> <th>姓名</th> <th>专业</th> </tr></thead><tbody><tr> <td>123</td> <td>小红</td> <td>计算机</td> </tr><tr> <td>456</td> <td>小明</td> <td>通信工程</td> </tr><tr> <td>789</td> <td>小丽</td> <td>金融</td> </tr></tbody>
</table>

    运行结果：

    image-20240116200417617

3.7 输入系列

3.7.1 文本输入
<h3>请输入内容</h3>
姓名：<input type="text"><br><!--文本输入-->

效果：

image-20240117162847756

3.7.2 密码输入
<h3>请输入内容</h3>
姓名：<input type="text"><br><!--文本输入-->
密码：<input type="password"><br><!--密码输入-->

效果：输入值时不显示输入的什么

image-20240117163116863

3.7.3 文件传输
<input type="file"><br>

效果：

image-20240117163257700

3.7.4 单选框
<input type="radio" >2021
<input type="radio" >2022<br>

效果：（两个都可以选）

image-20240117163504558

如果想两个都选的话就把代码改成：

<input type="radio" name="入学年份">2021
<input type="radio" name="入学年份">2022<br>

name属性一样的话，就只能选一个：

image-20240117163604422

3.7.5 复选框
<input type="checkbox">苹果<br>
<input type="checkbox">香蕉<br>
<input type="checkbox">梨<br>
<input type="checkbox">菠萝<br>

效果：

image-20240117163906989

3.7.6 按钮

有两种按钮button和submit：

<input type="button" value="提交"><br>
<input type="submit" value="submit">
  1. <input type="button" value="提交">：
    • 这是一个普通的按钮，通常用于执行JavaScript函数或处理一些自定义的交互。它并不会直接触发表单的提交。
  2. <input type="submit" value="submit">：
    • 这是用于触发表单提交的按钮。当用户点击这个按钮时，表单中的数据将被提交到服务器。

效果：

image-20240117164628320

3.8下拉框

  1. 单选下拉框

    <select><option>小学</option><option>初中</option><option>高中</option><option>本科</option><option>硕士及以上</option>
</select>

    效果：

    image-20240117165152756

  2. 多选下拉框

    <select multiple><option>小学</option><option>初中</option><option>高中</option><option>本科</option><option>硕士及以上</option>
</select>

    效果：

    image-20240117165545728

3.9多行文本

<textarea rows="3"></textarea>

这行代码可以输入多行文本，如果rows属性不写，默认是两行。

3.10表单提交

前面提到的两个按钮，一个button一个submit，表单提交只能使用submit，并且需要使用<form>标签。表单提交需要HTTP请求，有两种方式，一种为Get，一种为Post。

GET 方法：
  1. 参数传递： 数据以查询字符串的形式附加在 URL 后面，例如：http://example.com/page?name=value.
  2. 可见性： 由于参数在 URL 中可见，因此不适合传递敏感信息，且有长度限制。
  3. 安全性： 通常用于读取资源，不会对服务器数据进行修改，因此被认为是安全的。
  4. 缓存： 结果可被缓存，可被书签保存，且可被浏览器记录在历史中。
POST 方法：
  1. 参数传递： 数据在请求体中传递，不可见于 URL。适合传递大量数据或敏感信息。
  2. 可见性： 数据不在 URL 中，相对安全。
  3. 安全性： 通常用于对服务器数据进行修改，不会被浏览器缓存，更安全。
  4. 缓存： 结果不可被缓存，不会被保存在历史中。

例如：

method属性可以选择get和post，这里以get为例，action属性是你点击提交按钮以后会跳转到哪个页面：

注意：input标签里面一定要有name属性，不然不会显示收到的值

<h1>用户注册</h1><form method="get" action="/do/reg"><!--用户名--><div><label>用户名：<input type="text" name="username"></label></div><!--密码--><div><label>密码：<input type="password" name="password"></label></div><br><input type="submit" value="submit按钮"></form>

当输入用户名和密码时，会自动跳转，并且url会显示得到的值：

image-20240117200709065

image-20240117200744190

接收数据：

接收数据需要使用到request：

from flask import Flask, render_template, request
app = Flask(__name__)@app.route('/register', methods=['GET'])
def register():return render_template('register.html')@app.route('/do/reg')
def do_register():print(request.args)return "登录成功"if __name__ == '__main__':app.run()

结果：

image-20240117201204261

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

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

相关文章

创建审批流程极简培训教程

创建审批流程极简培训教程

流程审批创建指导文档 本文档适用于使用快速了解审批流程的概念&#xff0c;以钉钉流程创建为例&#xff0c;构建极简指导&#xff0c;因为很多人对于这些术语不够熟悉&#xff0c;也很难在很短的时间成为专家&#xff0c;那么使用此文档&#xff0c;很快上手。 概念澄清 需要…
阅读更多...
跟着cherno手搓游戏引擎【8】按键和鼠标的KeyCode

跟着cherno手搓游戏引擎【8】按键和鼠标的KeyCode

自定义KeyCode 先把glfw3.h里的KeyCode的定义抄到咱这里来。 在YOTO下创建KeyCode.h: #pragma once#ifdef YT_PLATFORM_WINDOWS///从glfw3中拿的 #define YT_KEY_SPACE 32 #define YT_KEY_APOSTROPHE 39 /* */ #define YT_KEY_COMMA 44…
阅读更多...
【深度强化学习】目前落地的挑战与前沿对策

【深度强化学习】目前落地的挑战与前沿对策

到目前为止&#xff0c;深度强化学习最成功、最有名的应用仍然是 Atari 游戏、围棋游戏等。即使深度强化学习有很多现实中的应用&#xff0c;但其中成功的应用并不多。为什么呢&#xff1f;本文总结目前的挑战。 目录 所需的样本数量太大探索阶段代价太大超参数的影响非常大稳定…
阅读更多...
Luckysheet类似excel的在线表格(vue)

Luckysheet类似excel的在线表格(vue)

参考文档&#xff1a;快速上手 | Luckysheet文档 一、引入 在vue项目的public文件夹下的index.html的<head>标签里面引入 <link relstylesheet hrefhttps://cdn.jsdelivr.net/npm/luckysheetlatest/dist/plugins/css/pluginsCss.css /><link relstylesheet hre…
阅读更多...
C++PythonC# 三语言OpenCV从零开发(1):环境配置

C++PythonC# 三语言OpenCV从零开发(1):环境配置

文章目录 前言课程选择环境配置PythonC#COpenCV官网下载新建C项目测试运行Csharp版Python版 gitee仓库总结 前言 由于老王我想转机器视觉方向的上位机行业&#xff0c;我就打算开始从零学OpenCV。但是目前OpenCV有两个官方语言&#xff0c;C和Pyhont。C# 有大佬做了对应的Open…
阅读更多...
使用 Neo4j 和 LangChain 集成非结构化知识图增强 QA

使用 Neo4j 和 LangChain 集成非结构化知识图增强 QA

目前基于大模型的信息检索有两种方法&#xff0c;一种是基于微调的方法&#xff0c;一种是基于 RAG 的方法。 信息检索和知识提取是一个不断发展的领域&#xff0c;随着大型语言模型&#xff08;LLM&#xff09;和知识图的出现&#xff0c;这一领域发生了显着的变化&#xff0…
阅读更多...
Docker五部曲之四：Docker Compose

Docker五部曲之四：Docker Compose

文章目录 前言Compose应用程序模型Compose规范顶层属性servicenetworkvolumesconfigssecrets 环境变量.env文件environment属性主机shell中的环境变量 Profiles&#xff08;剖面&#xff09;启动剖面自动启动剖面和依赖项解析 多compose.yml文件共享与扩展构建规范构建属性 部署…
阅读更多...
Java根据模板文件生成excel文件，同时将excel文件转换成图片

Java根据模板文件生成excel文件，同时将excel文件转换成图片

需求 需要将指定数据导出成表格样式的图片&#xff0c;如图 业务拆解 定义一个导出模板将得到的数据填入模板中&#xff0c;生成excel文件将ecxel文件转换成png格式的图片 代码实现 需要引入的依赖 <dependency><groupId>cn.hutool</groupId><artif…
阅读更多...
[C++] opencv - Mat::convertTo函数介绍和使用场景

[C++] opencv - Mat::convertTo函数介绍和使用场景

Mat::convertTo()函数 Converts an array to another data type with optional scaling. 该函数主要用于数据类型的相互转换。 The method converts source pixel values to the target data type. saturate_cast<> is applied at the end to avoid possible overf…
阅读更多...
maven环境搭建（打包项目）

maven环境搭建（打包项目）

Maven:直观来讲就是打包写好的代码封装 Apahche 软件基金会&#xff08;非营业的组织&#xff0c;把一些开源软件维护管理起来&#xff09; maven apahce的一个开宇拿项目&#xff0c;是一个优秀的项目构建&#xff08;管理工具&#xff09; maven 管理项目的jar 以及jar与j…
阅读更多...
uniapp 简易自定义日历

uniapp 简易自定义日历

注&#xff1a;此日历是根据接口返回的日期自动对应星期的&#xff0c;返回的数据中也包含星期&#xff0c;其实就是一个div自定义&#xff0c;可根据自己需求更改&#xff1b; 1、组件代码 gy-calendar-self.vue <template><view class"calendar"><…
阅读更多...
华为路由设备DHCPV6配置

华为路由设备DHCPV6配置

组网需求 如果大量的企业用户IPv6地址都是手动配置&#xff0c;那么网络管理员工作量大&#xff0c;而且可管理性很差。管理员希望实现公司用户IPv6地址和网络配置参数的自动获取&#xff0c;便于统一管理&#xff0c;实现IPv6的层次布局。 图1 DHCPv6服务器组网图 配置思路 …
阅读更多...
VLAN区域间路由详解

VLAN区域间路由详解

LAN局域网 WAN 广域网 WLAN无线局域网 VLAN:虚拟局域网 交换机和路由器&#xff0c;协同工作后&#xff0c;将原来的一个广播域&#xff0c;切分为多个&#xff0c;节省硬件成本&#xff1b; 配置思路&#xff1a; 交换机上创建vlan交换机上的各个接口划分到对应的vlan中 T…
阅读更多...
meter报OOM错误，如何解决？

meter报OOM错误，如何解决？

根据在之前的压测过程碰到的问题&#xff0c;今天稍微总结总结&#xff0c;以后方便自己查找。 一、单台Mac进行压测时候&#xff0c;压测客户端Jmeter启动超过2000个线程&#xff0c;Jmeter报OOM错误&#xff0c;如何解决&#xff1f; 解答&#xff1a;单台Mac配置内存为8G&…
阅读更多...
【Android Studio】APP练手小项目——切换图片APP

【Android Studio】APP练手小项目——切换图片APP

本项目效果&#xff1a; 前言&#xff1a;本项目最终实现生成一个安卓APP软件&#xff0c;点击按钮可实现按钮切换图片。项目包含页面布局、功能实现的逻辑代码以及设置APP图标LOGO和自定义APP名称。 关于Android Studio的下载与安装见我的博文&#xff1a;Android Studio 最新…
阅读更多...
IDEA新建SpringBoot工程时java版本只有17和21

IDEA新建SpringBoot工程时java版本只有17和21

解决方法&#xff1a;替换源 参考博客&#xff1a;https://www.kuazhi.com/post/712799571.html
阅读更多...
thinkphp 可执行文件think

thinkphp 可执行文件think

think 是一个可执行文件&#xff0c;位置&#xff1a;网站根目录 内容&#xff1a;1 定义项目路径 2 加载cll框架文件 shell脚本里第一行的&#xff1a;#!/usr/bin/env php 什么意思 这句#!的含义就是&#xff0c;按照环境变量PATH寻找第一个php程序来执行。 #!/usr/bin/php…
阅读更多...
K8s（一）Pod资源——Pod介绍、创建Pod、Pod简单资源配额

K8s（一）Pod资源——Pod介绍、创建Pod、Pod简单资源配额

目录 Pod概述 pod网络 pod存储 pod和容器对比 创建pod的方式 pod运行方式分类 Pod的创建 Pod的创建过程 通过kubectl run来创建pod 通过yaml文件创建&#xff0c;yaml文件简单写法 Pod简单操作 Pod的标签labels Pod的资源配额resource 测试 Pod概述 Kubernetes …
阅读更多...
RHCE9学习指南 第21章 用bash写脚本

RHCE9学习指南 第21章 用bash写脚本

grep的用法是&#xff1a; grep 关键字 file 意思是从file中过滤出含有关键字的行。 例如&#xff0c;grep root /var/log/messages&#xff0c;意思是从/var/log/messages中过滤出含有root的行。这里很明确的是过滤含有“root”的行。 如果我要是想在/var/log/messages中过滤…
阅读更多...
基于CPLEX的IEEE-30节点机组组合优化(MATLAB实现)

基于CPLEX的IEEE-30节点机组组合优化(MATLAB实现)

1.机组组合优化数学模型 1.1 问题分析 机组组合问题要求基于已知的系统数据&#xff0c;求解计划时间内机组决策变量的最优组合&#xff0c;使得系统总成本达到最小。该问题的决策变量由两类&#xff0c;一类是各时段机组的启停状态&#xff0c;为整数变量&#xff0c;0表示关…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023