Flask与HTML初探

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

stonebookking

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

阅读量2.2k

点赞数

文章标签： flask python 前端

本文链接：https://blog.csdn.net/stonebookking/article/details/127388539

版权

Flask是一种web框架，为后续深入学习Django框架做铺垫，需要先使用flask框架了解一下HTML（超文本传输语言）

from flask import Flask, render_template

app = Flask(__name__)

@app.route("/show/info")
#创建一个网站
def index():
    return render_template("index.html")

@app.route("/get/news")
def get_news():
    return render_template("getnews.html")

@app.route("/register")
def register():
    return render_template("register.html")

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

在这段代码中

@app.route("/show/info")
#创建一个网站
def index():
    return render_template("index.html")

#这句从本质描述了打开网站的过程，首先我们创建一个网站/show/info，然后在当前目录下创建一个新的目录templates（默认在这个目录里寻找相应的html文件），在其中创建新的html类型文件，在此命名为index，然后函数render_template()实质是返还了index.html文件当中的内容，这些内容以字符串的形式发送给浏览器，而浏览器能够解析html文件当中的内容

下面来看看相应的index.html文件当中的内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>纯纯的带专</title>
</head>
<body>
    <h1>吉林大学</h1>
    <div>
        <h1>纯纯滴带专</h1>
        吉林大学（Jilin University），简称“吉大”，位于吉林省长春市，是中华人民共和国教育部直属全国重点大学，中央直管副部级建制，位列国家“双一流”、“211工程”、“985工程”，入选珠峰计划、2011计划、111计划、卓越法律人才教育培养计划、卓越工程师教育培养计划、卓越医生教育培养计划、卓越农林人才教育培养计划、国家建设高水平大学公派研究生项目、国家大学生创新性实验计划、新工科研究与实践项目、国家级大学生创新创业训练计划、国家创新人才培养示范基地、全国深化创新创业教育改革示范高校、中国政府奖学金来华留学生接收院校，首批建立研究生院的22所大学之一，21世纪学术联盟、亚太国际教育协会、中俄交通大学联盟、粤港澳大湾区物流与供应链创新联盟、医学“双一流”建设联盟成员。
        <span>逆天逆天真逆天</span>
        <a href="http://ee.jlu.edu.cn/" target="_blank">
            <img style="height:100px" src="/static/1.jpg">
        </a>
    </div>
    <h1>运营商</h1>
    <ul>
        <li>中国移动</li>
        <li>中国联通</li>
        <li>中国电信</li>
    </ul>
    <ol>
        <li>中国移动</li>
        <li>中国联通</li>
        <li>中国电信</li>
    </ol>
    #表格
    <h1>表格</h1>
    <table border="1">
        <thead>
            <tr>
                <th>ID</th>
                <th>姓名</th>
                <th>年龄</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>19190826</td>
                <td>王硕</td>
                <td>21</td>
            </tr>
            <tr>
                <td>01</td>
                <td>
                    <img src="/static/1.jpg" height="50px">
                </td>
                <td>
                    <a href="http://ee.jlu.edu.cn" target="_blank">点击查看</a>
                </td>
            </tr>
        </tbody>
    </table>
    #input系列(需要学习7个标签)
    <h1>输入内容</h1>
    <input type="text">
    <input type="password">
    <input type="file">
    #单选框,保证name相同两个才会互斥
    <input type="radio" name="n1">男
    <input type="radio" name="n1">女
    #复选框
    <input type="checkbox">篮球
    <input type="checkbox">足球
    <input type="checkbox">乒乓球
    #提交按钮，就是普通的按钮
    <input type="button" value="提交">
    #可以提交一个表单
    <input type="submit" value="提交">

    <h1>下拉框</h1>
    <select>
        <option>北京</option>
        <option>上海</option>
        <option>深圳</option>
    </select>
    <select multiple>
        <option>北京</option>
        <option>上海</option>
        <option>深圳</option>
    </select>
    <h1>多行文本</h1>
    <textarea rows="5"></textarea>

</body>
</html>

在其中

<head>
    <meta charset="UTF-8">
    <title>纯纯的带专</title>
</head>

表示网站的标题，也就是在浏览器最上方标签栏里展示的这种，在这里我们使用UTF-8编码，将标题命名为“纯纯的带专”

在<body></body>中间则是网站显示的内容，从现在开始将了解HTML标签，浏览器能识别这种标签并生成对应的内容和格式，下面我们一段段得看

  <h1>吉林大学</h1>
    <div>
        <h1>纯纯滴带专</h1>
        吉林大学（Jilin University），简称“吉大”，位于吉林省长春市，是中华人民共和国教育部直属全国重点大学，中央直管副部级建制，位列国家“双一流”、“211工程”、“985工程”，入选珠峰计划、2011计划、111计划、卓越法律人才教育培养计划、卓越工程师教育培养计划、卓越医生教育培养计划、卓越农林人才教育培养计划、国家建设高水平大学公派研究生项目、国家大学生创新性实验计划、新工科研究与实践项目、国家级大学生创新创业训练计划、国家创新人才培养示范基地、全国深化创新创业教育改革示范高校、中国政府奖学金来华留学生接收院校，首批建立研究生院的22所大学之一，21世纪学术联盟、亚太国际教育协会、中俄交通大学联盟、粤港澳大湾区物流与供应链创新联盟、医学“双一流”建设联盟成员。
        <span>逆天逆天真逆天</span>
        <a href="http://ee.jlu.edu.cn/" target="_blank">
            <img style="height:100px" src="/static/1.jpg">
        </a>
    </div>

标签<h1></h1>是表示一级标题的意思，功能是使包括在其中的内容变为加黑加粗的一级标题，<div></div>和<span></span>是两种表现文字的格式，被前者包括的文字单独成段，即使一句话也单独成行，而被后者包括的内容则只占用自己内容长短的空间，二者之间可以嵌套。

标签<a></a>是超链接标签，可以用href来链接到各类网站，target="_blank"表示重新打开一个页面跳转，把这句话去掉则是在当面页面跳转。<img>则是一个自闭合的标签，用来传输一个图片，style可以修改图片的大小，可以用10%或者100px（像素）两种方法改变大小，src指向图片的地址，默认在当面目录下创建一个名为static的目录来存储图像。当把img嵌套到<a>标签当中时，表示点击图片可以跳转到相应的网站，否则如<a>点击查看</a>则是点击“点击查看”来打开超链接。

这段代码的效果如下

    <ul>
        <li>中国移动</li>
        <li>中国联通</li>
        <li>中国电信</li>
    </ul>
    <ol>
        <li>中国移动</li>
        <li>中国联通</li>
        <li>中国电信</li>
    </ol>

ul标签是无序号的列表，ol是有序号的列表，要注意搭配li标签来使用，具体效果如下

   <h1>表格</h1>
    <table border="1">
        <thead>
            <tr>
                <th>ID</th>
                <th>姓名</th>
                <th>年龄</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>19190826</td>
                <td>王硕</td>
                <td>21</td>
            </tr>
            <tr>
                <td>01</td>
                <td>
                    <img src="/static/1.jpg" height="50px">
                </td>
                <td>
                    <a href="http://ee.jlu.edu.cn" target="_blank">点击查看</a>
                </td>
            </tr>
        </tbody>
    </table>

table标签来表现一个表格，border="1"是表示一种边框样式，表头的一行用thead来包括，标签tr来包括一行内容，虽然html文件当中分了行，但返还给浏览器的时候是不分行的，注意表头的每个列用标签th来包括，这与下面tbody（表格的正式部分）当时的td一定要区分。同样，在表格的任意一行均可以使用<a>文字/图片</a>来插入超链接。本段代码效果如下：

  #input系列(需要学习7个标签)
    <h1>输入内容</h1>
    <input type="text">
    <input type="password">
    <input type="file">
    #单选框,保证name相同两个才会互斥
    <input type="radio" name="n1">男
    <input type="radio" name="n1">女
    #复选框
    <input type="checkbox">篮球
    <input type="checkbox">足球
    <input type="checkbox">乒乓球
    #提交按钮，就是普通的按钮
    <input type="button" value="提交">
    #可以提交一个表单
    <input type="submit" value="提交">

    <h1>下拉框</h1>
    <select>
        <option>北京</option>
        <option>上海</option>
        <option>深圳</option>
    </select>
    <select multiple>
        <option>北京</option>
        <option>上海</option>
        <option>深圳</option>
    </select>
    <h1>多行文本</h1>
    <textarea rows="5"></textarea>

text是一行文本；passwor是密码；file是选择文件；单选是radio，必须保证name相同才能单选，多选是checkbox；按钮是button；submit是提交一个表单，可以用post的方法将内容提交给后台，selec是下拉框，默认是单选，后面加multiple可以变成多选的，用option标签来包括选项；textare是多行文本框，rows表示默认显示的行数。该段代码效果如下：

用以上掌握的知识就可以简单的做出来一个注册登录的网站

from flask import Flask, render_template, request
app = Flask(__name__)

@app.route('/register')
def register():
    return render_template('register.html')

@app.route('/get/reg', methods= ['GET', 'POST'] )
def get_register():
        if request.method == 'GET':
            render_template('register.html')
        else:
            print(request.form)
            return "注册成功"



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

其中

@app.route('/get/reg', methods= ['GET', 'POST'] )
def get_register():
        if request.method == 'GET':
            render_template('register.html')
        else:
            print(request.form)
            return "注册成功"

表示创建地址为/get/reg的网站，申请访问的方式既可以是get也可以是post（注：get是提交数据以显示方式显示在URL当中的提交方法，而post的提交数据在URL当中是不可见的），如果提交方式是get（在URL当中初次访问/get/reg）则返回register.html当中的内容，如果是post提交（已经填完注册信息并用submi按钮来提交）则显示注册成功，并且在后台打印提交的内容（内容使用requst.form来获取）。需要注意，post需要通过submit的按钮来申请提交表单，get是在URL当中直接输入网址。

看一下register.html文件当中的内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <h1>用户注册</h1>
    <form method="post" action="/get/reg">
        <div>
            用户名：<input type="text" name="user">
        </div>
        <div>
            密码：<input type="password" name="psd">
        </div>
        <div>
            性别：
            <input type="radio" name="gender" value="1">男
            <input type="radio" name="gender" value="2">女
        </div>
        <div>
            爱好
            <input type="checkbox" name="hobby" value="篮球">篮球
            <input type="checkbox" name="hobby" value="足球">足球
            <input type="checkbox" name="hobby" value="棒球">棒球
            <input type="checkbox" name="hobby" value="乒乓球">乒乓球
        </div>
        <div>
            城市：
            <select name="city">
                <option value="bj">北京</option>
                <option value="sh">上海</option>
                <option value="sz">深圳</option>
            </select>
        </div>
        <div>
            备注：<textarea name="more"></textarea>
        </div>
        <div>
            <input type="submit" value="提交">
        </div>
    </form>
</body>
</html>

其中用户名，密码和备注都是输入的文本，后面的name则是他们在requst当中的键，对应的值（value）就是输入的文本，单选多选和下拉框的value则必须直接写明，用户是来进行选择。

注册页面如下

用request.form返回的提交内容如下

ImmutableMultiDict([('user', 'ws'), ('psd', '1'), ('gender', '1'), ('hobby', '篮球'), ('city', 'bj'), ('more', '1')])

stonebookking

关注

0
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
Flask与HTML初探

python语言利用基本的html标签和flask框架搭建最简单的注册网站
复制链接

扫一扫

Flask与HTML初探

“相关推荐”对你有帮助么？