一、Flask学习之HTML

一、Flask学习之HTML

1.运行简单页面

首先需要搭建环境：

pip install flask

from flask import Flask

app = 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_template

app = 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_template

app = 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

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

npm超详细安装（包括配置环境变量）！！！npm安装教程(node.js安装教程)

npm超详细安装（包括配置环境变量）！！！npm安装教程(node.js安装教程)

安装node.js:(建议选择相对低一点的版本&#xff0c;相对稳定)​下载完成直接点击next即可(安装过程中会直接添加path的系统变量&#xff0c;变量值是自己的安装路径&#xff0c;可自行选择&#xff0c;比如&#xff1a;D:\software\)​安装完成:winR打开电脑控制台&#xff0c…
阅读更多...
python依赖安装、执行、打包

python依赖安装、执行、打包

python依赖安装、执行、编译打包 本文介绍python项目的依赖安装、执行、以及使用pyinstaller编译打包成可执行文件的命令。 python项目执行部署有两种方式&#xff0c;具体步骤&#xff1a; 一、python环境安装 --> 安装pip --> 依赖包安装 --> 执行python程序 二、使…
阅读更多...
操作系统课程设计-Linux 进程间通信

操作系统课程设计-Linux 进程间通信

目录 前言 1 实验题目 2 实验目的 3 实验内容 3.1 步骤 3.2 关键代码 3.2.1 Server和Client的创建 3.2.2 Server核心代码 3.2.3 Server核心代码 4 实验结果与分析 5 代码 前言 本实验为课设内容&#xff0c;博客内容为部分报告内容&#xff0c;仅为大家提供参考&…
阅读更多...
如何在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公网地址 ⛳️ 推荐 前些天发现了…
阅读更多...
关于LIN总线,同步间隔段最大时间及各种间隔符最大时间的解释，与说明

关于LIN总线,同步间隔段最大时间及各种间隔符最大时间的解释，与说明

1&#xff1a;LIN同步间隔段的最小长度 如果问&#xff01;LIN同步间隔段的最小长度&#xff1f;大多数同学会一口答出">13bit位的显性位" 那如果问&#xff01;最大长度是多少&#xff1f; 则很少有同学会会突然懵逼&#xff01; 资料上给出的答案&#xff0…
阅读更多...
2024杭州国际智慧城市,人工智能,安防展览会（杭州智博会）

2024杭州国际智慧城市,人工智能,安防展览会（杭州智博会）

在智能化浪潮的冲击下&#xff0c;我们的生活与环境正在经历一场深刻的变革。这是一场前所未有的技术革命&#xff0c;它以前所未有的速度和广度&#xff0c;改变着我们的生活方式、工作方式、思维方式和社会结构。在这场变革中&#xff0c;有的人选择激流勇进&#xff0c;拥抱…
阅读更多...
JDBC概述和使用详解

JDBC概述和使用详解

文章目录 JDBC如何使用JDBC?Java 操作 数据库 JDBC 概述&#xff1a;Java Database Connectivity , Java数据库连接&#xff0c;通过Java语言操作数据库JDBC本质&#xff1a;官方定义的一套操作所有关系型数据库的规则&#xff0c;即接口。 各个数据库厂商去实现这套接口&…
阅读更多...
pl/sql程序块的使用

pl/sql程序块的使用

-- Created on 2024-01-15 by ADMINISTRATOR declare -- Local variables hererecord_tablename varchar2(100);---test_record表名record_StartNo integer(19);---test_record开始编号temp_No integer(19);maxnbbh integer(19);nCnt integer : 20;fi…
阅读更多...
安卓开发-day

安卓开发-day

一、安卓项目结构 1、manifests文件夹 Android系统配置文件夹&#xff0c;包含一个AndroidManifest.xml文件&#xff1b; AndroidMainifest.xml文件是每个android项目必须要包含的文件&#xff08;项目唯一&#xff09;&#xff0c;创建项目时默认就会生成这个文件&#xff0…
阅读更多...
RDMA Send Receive操作详解

RDMA Send Receive操作详解

1. 前言 RDMA指的是远程直接内存访问&#xff0c;这是一种通过网络在两个应用程序之间搬运缓冲区里的数据的方法。RDMA与传统的网络接口不同&#xff0c;因为它绕过了操作系统。这允许实现了RDMA的程序具有如下特点&#xff1a; 绝对的最低时延 最高的吞吐量 最小的CPU足迹 &a…
阅读更多...
人工智能 AI 如何让我们的生活更加便利

人工智能 AI 如何让我们的生活更加便利

每个人都可以从新技术中获益&#xff0c;一想到工作或生活更为便利、简捷且拥有更多空余时间&#xff0c;谁会不为之高兴呢&#xff1f;借助人工智能&#xff0c;每天能够多一些空余时间&#xff0c;或丰富自己的业余生活&#xff0c;为培养日常兴趣爱好增添一点便利。从电子阅…
阅读更多...
ubuntu18.04 安装mysql(命令)

ubuntu18.04 安装mysql(命令)

1.安装MySQL #命令1 sudo apt-get update #命令2 sudo apt-get install mysql-server 2.配置MySQL sudo mysql_secure_installation 2.2 检查mysql服务状态 systemctl status mysql.service 3.配置远程访问 在Ubuntu下MySQL缺省是只允许本地访问的 3.1 首先用根用户进入…
阅读更多...
CentOS安装maxwell

CentOS安装maxwell

CentOs安装maxwell 一、简介二、准备工作三、安装1、下载安装包2、解压3、编写配置文件4、启动maxwell5、验证6、停止maxwell 四、说明1、更新数据2、插入数据3、删除数据 五、遇到问题 一、简介 maxwell是由美国Zendesk公司开源&#xff0c;它通过读取mysql的binlog日志&#…
阅读更多...
大语言模型系列-Transformer

大语言模型系列-Transformer

文章目录 前言一、Attention二、Transformer结构三、Transformer计算过程1. 编码器&#xff08;Encoder&#xff09;1&#xff09;Self-Attention层2&#xff09;Multi-Head-Attention层3&#xff09;Add & Norm层 2. 解码器&#xff08;Decoder&#xff09;1&#xff09;M…
阅读更多...
CC工具箱使用指南：【坡度细碎图斑融合】

CC工具箱使用指南：【坡度细碎图斑融合】

一、简介 这算是一个定制的工具&#xff0c;可惜没用上&#xff0c;扔掉也可惜&#xff0c;就放出来&#xff0c;可能会有同样需求的人用得上。 在ArcGIS中通过DEM生成的坡度是栅格格式的&#xff0c;再经过栅格转矢量后&#xff0c;会存在一些碎图斑。 这个工具的目的是&am…
阅读更多...
从零开始学习Zeppelin：大数据可视化分析的交互式开发系统！

从零开始学习Zeppelin：大数据可视化分析的交互式开发系统！

介绍&#xff1a;Apache Zeppelin是一个基于Web的交互式开发系统&#xff0c;主要用于进行大数据可视化分析。其核心概念是notebook&#xff0c;所有的操作都可以在notebook中完成。Zeppelin提供了一套非常全面的数据分析解决方案&#xff0c;支持数据采集、数据发现、数据分析…
阅读更多...
7. UE5 RPG修改GAS的Attribute的值

7. UE5 RPG修改GAS的Attribute的值

前面几节文章介绍了如何在角色身上添加AbilitySystemComponent和AttributeSet。并且还实现了给AttributeSet添加自定义属性。接下来&#xff0c;实现一下如何去修改角色身上的Attribute的值。 实现拾取药瓶回血功能 首先创建一个继承于Actor的c类&#xff0c;actor是可以放置到…
阅读更多...
力扣精选算法100题——四数之和(双指针专题）

力扣精选算法100题——四数之和(双指针专题）

上一篇讲到&#xff08;俩数之和and三数之和&#xff09;这一篇我要来解析四数之和&#xff0c;四数之和建立在三数之和的基础上&#xff0c;我们需要熟练掌握三数之和的算法原理&#xff0c;如果大家三数之和还没弄清楚&#xff0c;请点击三数之和and二数之和链接即可看到。 三…
阅读更多...
Vue3新特性defineModel()便捷的双向绑定数据

Vue3新特性defineModel()便捷的双向绑定数据

官网介绍 传送门 配置 要求&#xff1a; 版本&#xff1a; vue > 3.4(必须&#xff01;&#xff01;&#xff01;)配置&#xff1a;vite.config.js 使用场景和案例 使用场景&#xff1a;父子组件的数据双向绑定&#xff0c;不用emit和props的繁重代码 具体案例 代码实…
阅读更多...
Unity URP切换品质和Feature开关的性能问题

Unity URP切换品质和Feature开关的性能问题

现在对我的项目进行安卓端发布&#xff0c;需要切换品质和一些Feature开关。 我是这样做的。 划分品质 首先Renerer分为2个Android和PC&#xff0c;图中其他不用参考。 每个副本的URP Asset分为pc和android&#xff0c;例如图中的 hall和hall_android。 我们可以看到hall用的…
阅读更多...
最新文章

Copyright @ 2022~2023