基于flask框架，入门html标签的学习笔记

最新推荐文章于 2024-03-21 09:12:46 发布

wincharm

最新推荐文章于 2024-03-21 09:12:46 发布

阅读量681

点赞数 1

文章标签： flask

本文链接：https://blog.csdn.net/m0_58515553/article/details/125035041

版权

1.快速使用flask搭建网站

from flask import Flask, render_template  

app = Flask(__name__)  
# app = Flask（__name__, template_folder='xxx'）可以修改templates目录名称  


@app.route('/show/info')  # ('/show/info', methods=['GET']) 定义请求方式
def index():  
    # Flask内部会自动在当前项目工作目录下的 templates 文件夹中寻找对应文件并返回。  
    return render_template('index.html')  

if __name__ == '__main__':  
    app.run()

2.HTML标签

2.1 head

<head>  
    <meta charset="UTF-8">  
    <title>Title</title>  
</head>

2.2 body

2.2.1 标题

<h1>一级标题</h1>  
<h2>二级标题</h2>  
<h3>三级标题</h3>

属于【块级标签】
从七级开始大小将没有变化，大概是四级标题的大小，且没有了加粗效果。

2.2.2 div和span

<div>内容</div>  
<span>内容</span>

div: 该标签中的内容会占一行。【块级标签】
span: 该标签中的内容有多少占多少。【行内标签】
注意：这两个标签本身效果很简单，但是配合CSS样式运用会十分精彩。

2.2.3 超链接

# 跳转到其他网站  
<a href='网址'>点击跳转</a>

# 跳转到自己网站下的不同url  
<a href='http://127.0.0.1:5000"url"'>点击跳转</a>  
# 等价于  
<a href='"url"'>点击跳转</a>

超链接标签是一个行内标签。

2.2.4 图片

<img src='图片地址'/>

img 标签是一个自闭和标签和行内标签。

如果被引用的图片网站加了防盗链，则无法在自己的网站里显示。

# 使用自己的图片
# 在当前工作目录下创建 static 文件夹，将需要的图片放入其中。
    <img src='/static/图片名称'/>

# 修改图片大小
# 在标签里面加一个样式
    <img style='height: 数字px;width: 数字px' src='图片地址'/>
    <img style='height: 数字%;width: 数字%' src='图片地址'/>

小结

标签

# 块级标签
    <h1></h1>
    <div></div>
# 行内标签
    <span></span>
    <a></a>
    <img/>

嵌套

<div>
    <a href=''>
        <img />
    </a>
</div>
<div>
    <a href=''>  
    # 可以在 href 后面加一个 target='_blank' 表示在新标签页打开href里面的网址
        <img />
    </a>
</div>

每张图片会单独占一行并且点击任意一张图片都会跳转到对应网页。

2.2.5 列表

无序列表：内容前面有小黑点标记
<ul>
    <li>内容</li>
    <li>内容</li>
</ul>
有序列表：内容前面有数字序号标记
<ol>
    <li>内容</li>
    <li>内容</li>
</ol>
定义列表：

列表标签是一个块级标签。

type值	有序列表序号类型
1	1、2、3......
a	a、b、c......
A	A、B、C......
i	i、ii、iii......
I	I、II、III......

<ol type=''>内容</ol>  #默认 type值为1

2.2.6 表格

<table border="1">
    <thead>
    <tr>
        <th>姓名</th>
        <th>年龄</th>
        <th>爱好</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>亚索</td>
        <td>28</td>
        <td>E</td>
    </tr>
    <tr>
        <td>小橘子</td>
        <td>18</td>
        <td>飙车</td>
    </tr>
    <tr>
        <td>斯沃特</td>
        <td>24</td>
        <td>打枪</td>
    </tr>
    </tbody>
</table>

表格由<thead></thead>和<tbody></tbody>组成
border='1'表示用一个默认的边框框住表格
<tr></tr>标签代表这是表格中的一行
可以在标签中嵌套其他标签（超链接和图片等）

2.2.7 input系列

<input type='text'>  # 输入文本
<input type='password'>  # 输入密码（小圆点）
<input type='file'>  # 上传文件
# 单选框
<input type="radio" name="n1">亚索
<input type="radio" name="n1">永恩
# 复选框
<input type="checkbox">Q
<input type="checkbox">W
<input type="checkbox">E
<input type="checkbox">R
# 按钮
<input type="button" value="提交">  # 普通按钮
<input type="submit" value="提交">  # 可以提交表单

<input>标签是一个行内标签，输入框的显示有着固定好的长度，多的字符会进行堆叠。
单选框中要保证name变量相同才能实现单选，否则可以同时选取。

2.2.8 下拉框

<select>
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option>5</option>
</select>
实现多选（按住ctrl或shift点击）
<select multiple>
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option>5</option>
</select>

2.2.9 多行文本

<textarea rows="3"></textarea>

生成一个可以任意拉动的长宽的多行输入文本框。
rows变量表示文本框生成时的默认行数。

2.2.10 form表单标签

<form method="get" action="/register">  
# method 代表请求方法，action 代表请求的网址
    <input type="text" name="user">
    <input type="password" name="pwd">
    <input type="submit" value="注册">
</form>

一定要在<input>标签里面写上name属性。

如果是选择框，除name要定义外，还要定义value值。value值可以在表单提交后跳转的网站url里面找到（如果是get请求方法）。

<input type="radio" name="n1" value="ys">亚索
<input type="radio" name="n1" value="yy">永恩

<input type="checkbox" name="sk" value="q">Q
<input type="checkbox" name="sk" value="w">W
<input type="checkbox" name="sk" value="e">E
<input type="checkbox" name="sk" value="r">R

<select>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
</select>

from flask import request可进行更多操作。

@app.route('/post/reg', methods=['POST'])
def post_reg():
    print(request.form)
    return 'ok'
# 可以测试一下，methods里面大小写应该都可以
@app.route('/get/reg', methods=['GET'])
def post_reg():
    print(request.arg)
    return 'ok'
# 等价于
@app.route('/register', methods=['POST', 'GET'])
    if request.methods == 'POST':
    print(request.form)
    return 'ok'
    if request.methods == 'GET':
    print(request.arg)
    return 'ok'