一、Flask学习之HTML

news2024/11/27 9:46:18

一、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

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

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

相关文章

从uptime看linux平均负载

从uptime看linux平均负载

从前遇到系统卡顿只会top。。top看不出来怎么搞呢&#xff1f; Linux系统提供了丰富的命令行工具&#xff0c;以帮助用户和系统管理员监控和分析系统性能。在这些工具中&#xff0c;uptime、mpstat和pidstat是非常有用的命令&#xff0c;它们可以帮助你理解系统的平均负载以及资…
阅读更多...
【JMeter】JMeter连OceanBase数据库

【JMeter】JMeter连OceanBase数据库

1、下载OB&#xff08;OceanBase简称&#xff0c;下同&#xff09;&#xff0c;下载地址&#xff1a;https://www.oceanbase.com/softwarecenter-enterprise 2、将下载下来的jar包放到jmeter安装目录的 lib 目录下&#xff0c;或者打开JMeter客户端&#xff0c;在测试计划中引入…
阅读更多...
maven 配置http私服Since Maven 3.8.1 http repositories are blocked. 报错处理

maven 配置http私服Since Maven 3.8.1 http repositories are blocked. 报错处理

刷maven报错 com.saas:pdf:pom:0.0.1 failed to transfer from http://0.0.0.0/ during a previous attempt. This failure was cached in the local repository and resolution is not reattempted until the update interval of maven-default-http-blocker has elapsed or …
阅读更多...
CTF CRYPTO 密码学-4

CTF CRYPTO 密码学-4

题目名称&#xff1a;奇怪的先生 题目描述&#xff1a; 描述:oss先生将三个培根的中间一只移到了左边,然后咬了一小口最后一根&#xff0c;说真好吃&#xff0c;真是个奇怪的先生&#xff01; 密文&#xff1a;VlM5WnlXc0ZibEhmMmE1ZHYxMDlhVkdmMlk5WmtRPT0 分析 应该是根据题…
阅读更多...
【萤火虫系列教程】3/5-Adobe Firefly 创意填充

【萤火虫系列教程】3/5-Adobe Firefly 创意填充

003-Adobe Firefly 创意填充 创意填充 登录账号后&#xff0c;在主页点击创意填充的【生成】按钮&#xff0c;进入到创意填充页面 我们可以上传自己的图像 一键抠图 点击【背景】就可以把主图抠出来 点击【反转】就可以把背景抠出来 点击【清除】就可以恢复到图片原来…
阅读更多...
C语言之通过指针操作字符串

C语言之通过指针操作字符串

下面我们来学习通过指针来灵活操作字符串的方法 判断字符串的长度 我们用对指针的遍历来实现判断字符串的长度 #include <stdio.h> int str_length(const char*s) {int len 0;while(*s)len;return len; } int main() {char str[128];printf("请输入字符&#xff…
阅读更多...
【项目管理】CMMI-原因分析与解决过程(CAR)

【项目管理】CMMI-原因分析与解决过程(CAR)

概述&#xff1a; “原因分析与解决”通过预防缺陷或者问题的引入以及识别并适当纳入优秀过程性能的原因&#xff0c;改进质量与生产率。 目录 1、文档结构 2、原因分析与解决过程域包括如下活动 3、选择需要加以分析的结果(启动条件) 4、过程活动与实践对照表 5、实例 1、…
阅读更多...
【深度学习入门】深度学习基础概念与原理

【深度学习入门】深度学习基础概念与原理

*&#xff08;本篇文章旨在帮助新手了解深度学习的基础概念和原理&#xff0c;不深入讨论算法及核心公式&#xff09; 目录 一、深度学习概述 1、什么是深度学习&#xff1f; 2、深度学习与传统机器学习的区别 3、深度学习的应用领域 二、深度学习基本原理 1、神经网络的…
阅读更多...
渗透测试之Kali如何利用CVE-2019-0708漏洞渗透Win7

渗透测试之Kali如何利用CVE-2019-0708漏洞渗透Win7

环境： 1.攻击者IP：192.168.1.10 系统: KALI2022（vmware 16.0） 2.靶机IP：192.168.1.8 系统：Windows 7 6.1.7601 Service Pack 1 Build 7601 已开启远程协助RDP服务开启了3389端口 问题描述： KALI 如何利用CVE-2019-0708漏洞渗透Win7 解决方案： 1.打开kali，msf搜索…
阅读更多...
ES可视化工具--ElasticHD

ES可视化工具--ElasticHD

说明 ElasticHD 是 github 上的一个开源的项目&#xff0c;所以他没有官方网站&#xff0c;但 github 上的项目界面也可称为是它的官方界面了。 在 github 上直接搜索 ElasticHD 即可找到它&#xff0c;下面我将留下它的直接跳转链接。ElasticHD 下载 在 github 上搜索到之后…
阅读更多...
测试驱动开发：基于Jenkins+GoTest+HTML的持续化集成

测试驱动开发：基于Jenkins+GoTest+HTML的持续化集成

目录 前言 一、项目框架 1.项目迭代 2.项目时序图 3.项目测试执行 二、项目具体实现 1.创建流水线 2.拉取代码 3.执行测试代码 4.生成测试报告 5.报告内容解读 6.数据统计 7.邮件通知 8.企业微信通知 三、项目遇到的问题 1.go test -args 2.go test生…
阅读更多...
C++中基类的析构函数为什么要用virtual虚析构函数

C++中基类的析构函数为什么要用virtual虚析构函数

直接的讲&#xff0c;C中基类采用virtual虚析构函数是为了防止内存泄漏。具体地说&#xff0c;如果派生类中申请了堆内存空间&#xff0c;并在其析构函数中对这些内存空间进行释放。假设基类中采用的是非虚析构函数&#xff0c;当删除基类指针指向的派生类对象时就不会触发动态…
阅读更多...
给科研人的 ML 开源发布工具包

给科研人的 ML 开源发布工具包

什么是开源发布工具包&#xff1f; 恭喜你的论文成功发表&#xff0c;这是一个巨大的成就&#xff01;你的研究成果将为学界做出贡献。 其实除了发表论文之外&#xff0c;你还可以通过发布研究的其他部分&#xff0c;如代码、数据集、模型等&#xff0c;来增加研究的可见度和采…
阅读更多...
tinyxml2

tinyxml2

使用tinyxml2&#xff0c;得知道一些xml基础 xml tutorial--菜鸟 tinyxml2类对象 链接 结构 XMLNode 什么是节点 节点&#xff1a;元素、声明、文本、注释等。 XMLDocument xml文档(文件)对象。 作用&#xff1a; 加载xml文件&#xff0c; tinyxml2作用 1&#xff0c;…
阅读更多...
数据守护盾牌：敏感数据扫描与脱敏，让安全合规无忧

数据守护盾牌：敏感数据扫描与脱敏，让安全合规无忧

前言 在信息时代&#xff0c;数据已经成为企业和组织的核心资产&#xff0c;其价值与日俱增。然而&#xff0c;随着数据使用的普及和复杂度的提升&#xff0c;数据安全与合规问题也变得越来越突出。敏感数据的保护显得尤为重要&#xff0c;因为这些数据一旦泄露或被不当使用&a…
阅读更多...
Servlet系列两种创建方式

Servlet系列两种创建方式

一、使用web.xml的方式配置&#xff08;Servlet2.5之前使用&#xff09; 在早期版本的Java EE中&#xff0c;可以使用XML配置文件来定义Servlet。在web.xml文件中&#xff0c;可以定义Servlet的名称、类名、初始化参数等。然后&#xff0c;在Java代码中实现Servlet接口&#x…
阅读更多...
【机器学习300问】9、梯度下降是用来干嘛的？

【机器学习300问】9、梯度下降是用来干嘛的？

当你和我一样对自己问出这个问题后&#xff0c;分析一下&#xff01;其实我首先得知道梯度下降是什么&#xff0c;也就它的定义。其次我得了解它具体用在什么地方&#xff0c;也就是使用场景。最后才是这个问题&#xff0c;梯度下降有什么用&#xff1f;怎么用&#xff1f; 所以…
阅读更多...
muduo网络库剖析——监听者EpollPoller类

muduo网络库剖析——监听者EpollPoller类

muduo网络库剖析——监听者EpollPoller类 前情从muduo到my_muduo 概要epoll原理解析epoll提供的接口epoll的触发模式epoll实现多路复用 框架与细节成员函数使用方法 源码结尾 前情 从muduo到my_muduo 作为一个宏大的、功能健全的muduo库&#xff0c;考虑的肯定是众多情况是否…
阅读更多...
低代码配置-属性配置面板设计

低代码配置-属性配置面板设计

模块设计 tab项切换 组件基础属性组件数据属性组件事件属性表单属性 模块输出函数设计 tab切换函数 列表表单属性 数据来源&#xff1a; 调用接口时一次赋予&#xff0c;无需使用selectItem&#xff0c;如需使用&#xff0c;归入基础属性列表标题是否展示筛选区域 示例&am…
阅读更多...
前端框架前置学习Webpack(1) 常用webpack配置

前端框架前置学习Webpack(1) 常用webpack配置

什么是Webpack? 定义 本质上,Webpack是用于现代JavaScript应用程序的静态模块打包工具.当webpack处理应用程序时,它会在内部从一个或多个入口点构建一个依赖图(dependency graph),然后将你项目中所需的每一个模块组合成一个或多个bundles,它们均为静态资源,用于展示你的内容.…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023