一、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.mzph.cn/news/631229.shtml

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

相关文章

POI和EasyExcel学习

POI和EasyExcel学习

1.POI 1.1POI简介 在Java中&#xff0c;POI是指Apache POI&#xff08;Poor Obfuscation Implementation&#xff09;&#xff0c;它是一个开源的Java库&#xff0c;用于处理Microsoft Office文档格式文件&#xff0c;如Excel、Word、PowerPoint等。POI提供了一组API&#xf…
阅读更多...
如何在CentOS下使用Docker部署Halo博客网站并结合内网穿透远程访问

如何在CentOS下使用Docker部署Halo博客网站并结合内网穿透远程访问

文章目录 ⛳️ 推荐1. Docker部署Halo1.1 检查Docker版本如果未安装Docker可参考已安装Docker步骤&#xff1a;1.2 在Docker中部署Halo 2. Linux安装Cpolar2.1 打开服务器防火墙2.2 安装cpolar内网穿透 3. 配置Halo个人博客公网地址4. 固定Halo公网地址 ⛳️ 推荐 前些天发现了…
阅读更多...
记一次 .NET某道闸收费系统 内存溢出分析

记一次 .NET某道闸收费系统 内存溢出分析

一&#xff1a;背景 1. 讲故事 前些天有位朋友找到我&#xff0c;说他的程序几天内存就要爆一次&#xff0c;不知道咋回事&#xff0c;找不出原因&#xff0c;让我帮忙看一下&#xff0c;这种问题分析dump是最简单粗暴了&#xff0c;拿到dump后接下来就是一顿分析。 二&…
阅读更多...
Openwrt 下动态路由协议（quagga-OSPF）配置与验证

Openwrt 下动态路由协议（quagga-OSPF）配置与验证

文章目录 前言网络拓扑静态路由方式动态路由方式Openwrt下 Quagga 安装Quagga 配置R1路由器zebra配置R1路由器ospf配置R2路由器zebra配置R2路由器ospf配置OSPF协议分析REF本文将在两台openwrt系统上安装配置quagga, 搭建一套完整环境，来验证OSPF动态路由的基本功能和实际效果，…
阅读更多...
面经-redis缓存

面经-redis缓存

什么是Redis Redis(Remote Dictionary Server)键只能为字符串&#xff0c;值&#xff1a;字符串、列表、集合、散列表、有序集合。Redis 用来做分布式锁。支持事务 、持久化、LUA脚本、LRU驱动事件、多种集群方案。 Redis为什么这么快 完全基于内存&#xff0c;数据结构简单…
阅读更多...
深度学习记录--正则化(regularization)

深度学习记录--正则化(regularization)

什么是正则化&#xff1f; 正则化(regularization)是一种实用的减少方差(variance)的方法&#xff0c;也即避免过度拟合 几种正则化的方法 L2正则化 又被称为权重衰减(weight dacay) 在成本函数中加上正则项&#xff1a; 其中 由于在w的更新过程中会递减&#xff0c;即权…
阅读更多...
2024年继续看好英伟达的两个理由

2024年继续看好英伟达的两个理由

来源&#xff1a;猛兽财经 作者&#xff1a;猛兽财经 2023年是英伟达业务爆发式增长的一年 2023年可以说是英伟达成立近30年以来最好的一年。由于大语言模型带动的训练和推理算力需求的增加&#xff0c;导致市场对英伟达AI芯片(H100、A100等)和HGX平台的采购需求也出现了飙升…
阅读更多...
鸿蒙Harmony-页面路由（router）详解

鸿蒙Harmony-页面路由（router）详解

慢慢理解世界&#xff0c;慢慢更新自己&#xff0c;希望你的每一个昨天&#xff0c;今天&#xff0c;和明天都会很快乐&#xff0c;你知道的&#xff0c;先好起来的从来都不是生活&#xff0c;而是你自己 目录 一&#xff0c;定义 二&#xff0c;页面跳转 2.1使用router.pushU…
阅读更多...
【Java】HttpServlet类中前后端交互三种方式（query string、form表单、JSON字符串）

【Java】HttpServlet类中前后端交互三种方式（query string、form表单、JSON字符串）

在前后端的交互中&#xff0c;前端通过以下三种方式来与后端进行交互&#x1f31f; ✅query string ✅form表单 ✅JSON字符串 下面我们将书写这三种方式的后端代码并进行讲解 1、Query String QueryString即在url中写入键值对&#xff0c;一般用doGet方法进行交互 代码如下 …
阅读更多...
2018年认证杯SPSSPRO杯数学建模D题(第一阶段)投篮的最佳出手点全过程文档及程序

2018年认证杯SPSSPRO杯数学建模D题(第一阶段)投篮的最佳出手点全过程文档及程序

2018年认证杯SPSSPRO杯数学建模 对于投篮最佳出手点的探究 D题 投篮的最佳出手点 原题再现&#xff1a; 影响投篮命中率的因素不仅仅有出手角度、球感、出手速度&#xff0c;还有出手点的选择。规范的投篮动作包含两膝微屈、重心落在两脚掌上、下肢蹬地发力、身体随之向前上…
阅读更多...
H3C校园网双出口配置

H3C校园网双出口配置

H3C校园网双出口配置 &#x1f3c6;荣誉认证&#xff1a;51CTO博客专家博主、TOP红人、明日之星&#xff1b;阿里云开发者社区专家博主、技术博主、星级博主。 &#x1f4bb;微信公众号&#xff1a;微笑的段嘉许 &#x1f4cc;本文由微笑的段嘉许原创&#xff01; &#x1f389…
阅读更多...
服务器推送数据你还在用 WebSocket么？

服务器推送数据你还在用 WebSocket么？

当涉及到推送数据时,人们首先会想到 WebSocket。 的确,WebSocket 允许双向通信,可以自然地用于服务器到浏览器的消息推送。 然而,如果只需要单向的消息推送,HTTP 通过服务器发送的事件也有这种功能。 WebSocket 的通信过程如下: 首先,通过 HTTP 切换协议。服务器返回 101 状…
阅读更多...
驾驭数字孪生：智慧水利的未来之路

驾驭数字孪生：智慧水利的未来之路

一、数字孪生技术的原理与实践 随着科技的不断进步&#xff0c;数字孪生技术作为一项创新的技术应用&#xff0c;正在逐渐改变我们的生活和工作方式。特别是在工业领域&#xff0c;数字孪生技术被视为实现智能制造、提升生产效率和产品质量的重要手段。本章节将深入探讨数字孪…
阅读更多...
k8s的对外服务--ingress

k8s的对外服务--ingress

service作用体现在两个方面 1、集群内部 不断跟踪pod的变化&#xff0c;更新endpoint中的pod对象&#xff0c;基于pod的IP地址不断变化的一种服务发现机制 2、集群外部 类似负载均衡器&#xff0c;把流量ip端口&#xff0c;不涉及转发url&#xff08;http&#xff0c;https&a…
阅读更多...
npm依赖库备份

npm依赖库备份

常用命令 设置默认使用本地缓存安装Nodejs时会自动安装npm&#xff0c;但是局路径是C:\Users\Caffrey\AppData\Roaming\npm默认的缓存路径是C:\Users\Caffrey\AppData\Roaming\npm-cache&#xff1b;查看npm的prefix和cache路径配置信息设置路径 设置默认使用本地缓存 npm con…
阅读更多...
本周五上海见 第二届证券基金行业先进计算技术大会暨2024低时延技术创新实践论坛（上海站）即将召开

本周五上海见 第二届证券基金行业先进计算技术大会暨2024低时延技术创新实践论坛（上海站）即将召开

低时延技术是证券基金期货领域业务系统的核心技术&#xff0c;是打造极速交易系统领先优势的关键&#xff0c;也是证券基金行业关注的前沿技术热点。 1月19日下午&#xff0c;第二届证券基金行业先进计算技术大会暨2024低时延技术创新实践论坛&#xff08;上海站&#xff09;即…
阅读更多...
springmvc上传与下载

springmvc上传与下载

文件上传 结构图 导入依赖 <dependency><groupId>jstl</groupId><artifactId>jstl</artifactId><version>1.2</version></dependency><dependency><groupId>org.springframework</groupId><artifactId…
阅读更多...
MySQL之视图索引

MySQL之视图索引

学生表&#xff1a;Student (Sno, Sname, Ssex , Sage, Sdept) 学号&#xff0c;姓名&#xff0c;性别&#xff0c;年龄&#xff0c;所在系 Sno为主键 课程表&#xff1a;Course (Cno, Cname,) 课程号&#xff0c;课程名 Cno为主键 学生选课表&#xff1a;SC (Sno, Cno, Score)…
阅读更多...
VSCODE使用CMAKE显示命令无法找到

VSCODE使用CMAKE显示命令无法找到

背景&#xff1a;使用了code server&#xff0c;安装CMAKE和CMAKE TOOLS&#xff0c;但是通过ctrlshiftp打开命令面板&#xff0c;运行随便一个cmake指令&#xff0c;都出现了指令无法找到。具体为“命令"CMake: 配置"导致错误 (command ‘cmake.configure’ not fou…
阅读更多...
GPT APP的开发步骤

GPT APP的开发步骤

开发一个GPT&#xff08;Generative Pre-trained Transformer&#xff09; Store&#xff08;存储&#xff09;涉及到使用预训练的语言模型&#xff08;例如GPT-3&#xff09;来生成和管理内容。以下是一般的步骤&#xff0c;希望对大家有所帮助。北京木奇移动技术有限公司&…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023