1.快速开发一个网站
python 安装 Flask web 框架，新建一个web.py文件
pip install flask
from flask import Flask
app = Flask(__name__)
# 创建了网址 /show/info 和 函数index 的对应关系
# 以后用户在浏览器上访问 /show/info, 网站自动执行
@app.route("/show/info")
def index():
return "中国联通"
if __name__ == '__main__':
app.run(host='0.0.0.0', port=5100, debug=False)运行上面程序结果：
浏览器进行访问: http://127.0.0.1:5100/show/info
1.1return 方式返回HTML内容的方式不方便进行管理, 因此引入templates模板
from flask import Flask, render_template
app = Flask(__name__)
# 创建了网址 /show/info 和 函数index 的对应关系
# 以后用户在浏览器上访问 /show/info, 网站自动执行
@app.route("/show/info")
def index():
# return "中国联通"
# 默认去当前目录的 templates 文件夹中去找
return render_template("index.html")
if __name__ == '__main__':
app.run(host='127.0.0.1', port=5100, debug=False)1.2 新建templates文件夹和index.html文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>china</title>
</head>
<body>
<h1>中国联通</h1>
</body>
</html>重新运行并访问
1.3 上面的templates目录也可以改为其它名称，但一般不会修改
例如目录名称为"temp_model"
app = Flask(__name__, template_folder="temp_model")2.标签
2.1 编码
<meta charset="UTF-8">
2.2 title
<title>china</title>2.3 标题
<body>
<h1>一级标题</h1>
<h2>二级标题</h1>
<h3>三级标题</h1>
<h4>四级标题</h1>
<h5>五级标题</h1>
</body>
2.4 div和span标签
<div>div:占一整行(块级标签)</div>
<span>span: 用多少占多少(行内标签/内联标签)</span>
<span>两个 span 标签不在同一行,页面显示时会在同一行,中间以一个空格分隔</span>
<span>两个 span 标签在同一行,页面显示时会在同一行,中间没有空格,连着</span>2.5 超链接，跳转到内部网站或外部网站
<a href="http://www.baidu.com">点击跳转</a>修改后的web代码
from flask import Flask, render_template
app = Flask(__name__)
# 创建了网址 /show/info 和 函数index 的对应关系
# 以后用户在浏览器上访问 /show/info, 网站自动执行
@app.route("/show/info")
def index():
# return "中国联通"
# 默认去当前目录的 templates 文件夹中去找
return render_template("index.html")
# 新添加如下配置
@app.route("/get/news")
def get_news():
# 默认去当前目录的 templates 文件夹中找
return render_template("get_news.html")
if __name__ == '__main__':
app.run(host='127.0.0.1', port=5100, debug=False)修改后的index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>china</title>
</head>
<body>
<a href="/get/news">点击跳转自己的网站</a></br>
<a href="http://www.baidu.com">点击跳转外部网站</a>
</body>
</html>在templates目录下新建的get_news.html文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>china</title>
</head>
<body>
<h1>我是内部网站</h1>
</body>
</html>重新运行Flask,刷新页面
点击第一行后,跳转到如下页面，点击第二行跳转到百度
2.6 在新的 Tab 标签页打开链接，下面代码也涉及到标签嵌套
<a href="http://www.jd.com" target="_blank">
<img src="https://img0.baidu.com/it/u=242767209,2541342896&fm=253&fmt=auto&app=138&f=JPEG" style="width: 150px;"/>
</a>运行代码，点击图片跳转到jd
2.7 尝试访问本地图片
新建一个文件夹并放一张图片
修改get_new文件
修改图片尺寸后再次访问
<img height="100"; width="200" src="/static/image1.jpg">
2.8 无序列表
<ul>
<li>中国移动</li>
<li>中国联通</li>
<li>中国电信</li>
</ul>修改get_new文件，查看运行结果
2.9 有序列表
<ol>
<li>中国移动</li>
<li>中国联通</li>
<li>中国电信</li>
</ol>
2.10 表格
修改web01.py新增一个访问路径
@app.route("/get/table")
def get_table():
return render_template("get_table.html")在templates页面下新建get_table.html文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<table>
<thead>
<tr><th>ID</th><th>姓名</th><th>年龄</th></tr>
</thead>
<tbody>
<tr><td>10</td><td>天蓬元帅</td><td>855</td></tr>
<tr><td>11</td><td>齐天大圣</td><td>956</td></tr>
<tr><td>12</td><td>卷帘大将</td><td>756</td></tr>
<tr><td>13</td><td>唐三藏</td><td>35</td></tr>
</tbody>
</table>
</body>
</html>运行结果
2.11 input标签
<!-- 文本与密码 -->
<input type="text" /><br/>
<input type="password" /><br/>
<!-- 选择文件 -->
<input type="file" /><br/>
<!-- 单选框 -->
<input type="radio" name="n1" />男<br/>
<input type="radio" name="n1" />女<br/>
<!-- 复选框 -->
<input type="checkbox" />python<br/>
<input type="checkbox" />java<br/>
<input type="checkbox" />c<br/>
<input type="checkbox" />php<br/>
<!-- 按钮 -->
<input type="button" value="提交"/> 普通按钮<br/>
<input type="submit" value="提交"/> 提交表单<br/>
2.12 下拉框
<select>
<option>北京</option>
<option>上海</option>
<option>深圳</option>
</select>
用户注册
@app.route("/register")
def register():
return render_template("register.html")在templates下新建register.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>用户注册</h1>
<div>
用户名: <input type="text" />
</div>
<div>
密码: <input type="password" />
</div>
<div>
性别: <input type="radio" name="sex"/>男 <input type="radio" name="sex"/>女
</div>
<div>
爱好:
<input type="checkbox">读书
<input type="checkbox">看电影
<input type="checkbox">骑行
</div>
<div>
城市:
<select>
<option>北京</option>
<option>上海</option>
<option>深圳</option>
</select>
</div>
<div>
备注: <textarea cols="30" rows="10"></textarea>
</div>
<div>
<input type="button" value="button提交">
<input type="submit" value="submit提交">
</div>
</body>
</html>
2.13 用户注册案例
新建app.py文件
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/register", methods=['GET'])
def do_register():
get_info = request.args
return get_info
if __name__ == '__main__':
app.run(host='0.0.0.0', port=5200, debug=True)修改templates下的register.html，点击注册后跳转至路由/do/register
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>用户注册</h1>
<form action="/do/register" method="get">
<div>
用户名: <input type="text" name="username">
</div>
<div>
密码: <input type="password" name="passwd">
</div>
<input type="submit" value="提交">
</form>
</body>
</html>
- POST 方式
@app.route("/post/register", methods=['POST'])
def post_register():
get_info = request.form
return get_info修改register.html
<body>
<h1>用户注册</h1>
<form action="/post/register" method="post">
<div>
用户名: <input type="text" name="username">
</div>
<div>
密码: <input type="password" name="passwd">
</div>
<input type="submit" value="提交">
</form>
</body>