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

UQ_rookie

于 2024-08-26 03:40:32 发布

阅读量816

点赞数 23

文章标签： python web flask html

本文链接：https://blog.csdn.net/qq_44951699/article/details/141537622

版权

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>

未完待续……

UQ_rookie

关注

23
点赞
踩
12

收藏

觉得还不错? 一键收藏
0
评论
【Python Web开发】Flask+HTML学习笔记

提交需要利用form标签，当点击提交按钮时，会提交在form标签内的内容。http://127.0.0.1:5000/提交的地址?网页的html文件需要放在当前目录的templates文件夹下，即。如果加载的自己的图片，需要将图片放在static文件夹下。button为普通按钮，submit为提交表单按钮。如果名称一致，则表示这些按钮是互斥的，只能单选。跳转自己的网站只需要写路径，下面两句效果相同。行内标签又称内联标签，之占用需要占用的地方。接收到的get和post的信息。块级标签会占用一整行的内容。
复制链接

扫一扫