目录
- Flask框架
- 一、安装flask库
- 二、运行一个网页
- 三、库函数及变量
- HTML标签语言
- 一、基本格式
- 二、标签
- 2.1 块级标签
- 2.1.1 标题
- 2.1.2 div
- 2.1.3 图片
- 2.1.4 列表
- 2.1.5 表格
- 2.2 行内标签
- 2.2.1 span
- 2.2.2 超链接
- 2.2.3 输入
- 2.3 其他标签
- 2.3.1 提交表单
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>
未完待续……
