01HTML标签

最新推荐文章于 2024-07-17 13:37:28 发布

躺平睡了

最新推荐文章于 2024-07-17 13:37:28 发布

阅读量122

点赞数

分类专栏： Web开发文章标签： flask python 后端

本文链接：https://blog.csdn.net/weixin_55878545/article/details/129213844

版权

Web开发专栏收录该内容

8 篇文章 0 订阅

订阅专栏

1. 快速开发网站

from flask import Flask

app = Flask(__name__)  # 实例化Flask


# 创建网址与函数的对应关系。
# 用户在浏览器上访问/show/info，网站自动执行 index()函数。
# 访问http://127.0.0.1:5000/show/info，网页出现中国联通。
@app.route("/show/info")
def index():
    return "中国联通"
    


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

浏览器可以识别很多标签+数据，例如：

<h1>中国</h1> ->加大加粗

Flask框架支持将字符串写入文件中。

在当前目录下创建templates文件夹，再创建.html文件。

from flask import Flask,render_template

app = Flask(__name__)


@app.route("/show/info")
def index():
    # render_template()自动打开文件读取内容返回。
    # 默认在当前目录的templates文件夹找。
    return render_template("index.html")


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

2. HTML标签

2.1 编码（head）

<meta charset="UTF-8">

2.2 title（head）

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

2.3 标题

标题加大加粗

<h1>1级标题</h1>
<h2>2级标题</h2>
<h3>3级标题</h3>
<h4>4级标题</h4>
<h5>5级标题</h5>
<h6>6级标题</h6>

2.4 div和span

格式

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

div占一整行【块级标签】。
span自己多大占多大【行内标签、内联标签】。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我的Title</title>
</head>
<body>
    <div>中国联通</div>
    <div>中国移动</div>
    <span>中国联通</span>
    <span>中国移动</span>
    <span>中国联通</span><span>中国移动</span>
</body>
</html>

2.5 超链接

跳转自己网站


<a href="/show/news">点击跳转</a>

<a href="http://127.0.0.1:5000/show/news">点击跳转</a>

跳转其他网站

<a href="https://www.bilibili.com/">点击跳转</a>

在当前页面跳转至新页面
<a href="/show/news">点击跳转</a>
点击链接，新打开一个页面（target）
<a href="/show/news" target="_blank"></a>

2.6 图片

自闭合标签

可以设置样式
<img style="height: 100px; width: 100px" src="图片地址" />

直接显示别人的图片地址。但是有风险，有的网站有防盗链。
显示自己的图片

-创建static文件夹，图片放在此目录下。

-<img src="/static/dog0.png" />

2.7 小结

学习的标签
划分

- 块级标签

<h1></h1>

<div></div>

- 行内标签

<span></span>

<a></a>

<img />

嵌套

<div>

<span></span>

<img />

<a></a>

</div>

<a>

<img />

</a>

2.8 列表

有序列表

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

无序列表

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

2.9 表格

表格有表头<thead></thead>、表内容<tbody></tbody>两部分。

<tr></tr>表示一行，<th></th>,<td></td>表示一列。

<h1>数据表格</h1>
    <table border="1">
        <thead>
            <tr> 
                <th>ID</th> 
                <th>姓名</th> 
                <th>年龄</th> 
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td> 
                <td>佩奇</td> 
                <td>3</td>
            </tr>
            <tr>
                <td>2</td>
                <td>乔治</td>
                <td>2</td>
            </tr>
        </tbody>
    </table>

2.10 input系列

输入文本
<input type="text">
<input type="text" name="×××">
输入密码
<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">羽毛球
按钮（value中的字符串显示在按钮上）
<input type="button" value="提交">
提交表单（value中的字符串显示在按钮上）
<input type="submit" value="提交">

2.11 下拉框

单选下拉框

<select>
    <option>篮球</option>
    <option>足球</option>
    <option>羽毛球</option>
</select>

2.12 多行文本

rows设置文本框中可填写的行数
<textarea rows="3"></textarea>

2.13 用户注册

在.py中创建对应关系

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

在templates文件夹创建register.html

<body>
    <h3>用户注册</h3>
    <div>
        用户名：<input type="text">
    </div>
    <div>
        密码：<input type="password">
    </div>
    <div>
        性别：
        <input type="radio">男
        <input type="radio">女
    </div>
    <div>
        爱好：
        <input type="checkbox">篮球
        <input type="checkbox">足球
        <input type="checkbox">羽毛球
    </div>
    <div>
        城市：
        <select>
            <option>北京</option>
            <option>上海</option>
            <option>西安</option>
        </select>
    </div>
    <div>
        备注：
        <textarea></textarea>
    </div>
    <div>
        <input type="button" value="button按钮">
        <input type="submit" value="submit按钮">
    </div>
</body>

2.14 网络请求

浏览器发送数据，以GET/POST请求向后端发送请求。

GET请求数据体现在url中

https://www.baidu.com/s?wd=耳机&ie=utf-8&tn=15007414_8_pg

2.15 form表单

有get,post两种方式。

提交方式：method="get"。
提交地址：action="×××"。
form标签里面必须有submit标签。
在form中的input、textarea、select标签写name属性。input中radio、checkbox以及select中option再写上value属性。
只提交用户交互的内容。

3. 案例

app.py

from flask import Flask, render_template, request

app = Flask(__name__)

@app.route('/register', methods=['GET', 'POST'])
def register():
    return render_template("register.html")

@app.route('/index1', methods=['GET'])
def index1():
    print(request.args)
    return "注册成功"

@app.route('/index2', methods=['POST'])
def index2():
    print(request.form)  # 打印所有数据
    #  单独获取数据，获取html中name属性
    user = request.form.get("user")
    pwd = request.form.get("pwd")
    gender = request.form.get("gender")
    hobby_list = request.form.getlist("hobby")
    city = request.form.get("city")
    more = request.form.get("more")
    print(user, pwd, gender, hobby_list, city, more)
    return "注册成功"

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

form中添加targrt="_blank"，否则报错。

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <h3>用户注册</h3>
    <form method="post" action="/index2" target="_blank">
        <div>
            用户名：<input type="text" name="user">
        </div>
        <div>
            密码：<input type="password" name="pwd">
        </div>
        <div>
            性别：
            <input type="radio" name="gender" value="1">男
            <input type="radio" name="gender" value="2">女
        </div>
        <div>
            爱好：
            <input type="checkbox" name="hobby" value="10">篮球
            <input type="checkbox" name="hobby" value="20">足球
            <input type="checkbox" name="hobby" value="30">羽毛球
        </div>
        <div>
            城市：
            <select name="city">
                <option value="100">北京</option>
                <option value="101">上海</option>
                <option value="102">西安</option>
            </select>
        </div>
        <div>
            备注：
            <textarea name="more"></textarea>
        </div>
        <div>
            <input type="submit" value="submit按钮">
        </div>
    </form>
</body>
</html>

提交表单一般采用POST形式

以method方式区分，精简代码。

app.py

from flask import Flask, render_template, request

app = Flask(__name__)

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

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

此时form中不需添加targrt="_blank"，即不需要打开新网页。

!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <h3>用户注册</h3>
    <form method="post" action="/register">
        <div>
            用户名：<input type="text" name="user">
        </div>
        <div>
            密码：<input type="password" name="pwd">
        </div>
        <div>
            性别：
            <input type="radio" name="gender" value="1">男
            <input type="radio" name="gender" value="2">女
        </div>
        <div>
            爱好：
            <input type="checkbox" name="hobby" value="10">篮球
            <input type="checkbox" name="hobby" value="20">足球
            <input type="checkbox" name="hobby" value="30">羽毛球
        </div>
        <div>
            城市：
            <select name="city">
                <option value="100">北京</option>
                <option value="101">上海</option>
                <option value="102">西安</option>
            </select>
        </div>
        <div>
            备注：
            <textarea name="more"></textarea>
        </div>
        <div>
            <input type="submit" value="submit按钮">
        </div>
    </form>
</body>
</html>