python web开发(二)：HTML标签语言

funNLPer

已于 2023-10-19 00:28:00 修改

阅读量1.5k

点赞数 2

分类专栏： Python 文章标签：前端 python html

于 2023-05-11 00:17:08 首次发布

本文链接：https://blog.csdn.net/orangerfun/article/details/130549920

版权

Python 专栏收录该内容

32 篇文章 4 订阅

订阅专栏

1. 简介

如下展示了一段简单的HTML模板， <head></head>标签中主要包含一些基本配置，如编码方式，标题等，注意标题的作用如下图所示
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>hello</title>
</head>
<body>
    <div>hello word</div>
</body>
</html>

2. 常用标签语法

2.2 标题标签 h

每个标题单独占一行

<body>
    <h1>一级标题</h1>
    <h2>二级标题</h1>
    <h3>三级标题</h1>
    <h4>四级标题</h1>
    <h5>五级标题</h1>
</body>

2.2 文本标签 div和span

<div>内容</div>

<span>内容</span>

div和span标签不会像标题h一样对字体大小进行改变，只展示最原始的文字，其两者的区别如下

div: 占一整行(块级标签)
span: 用多少占多少(行内标签/内联标签)
两个 span 标签不在同一行,页面显示时会在同一行,中间以一个空格分隔
两个 span 标签在同一行,页面显示时会在同一行,中间没有空格,连着

2.3 超链接 a标签

如下代码所示，使用<a></a>标签来应用超链接，a标签中间的文字是超链接文字，href参数存放url地址，下面的代码段中展示了引用外部链接，以及引用内部链接两种方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>hello</title>
</head>
<body>
    <div>hello word</div>
    <a href="https://mp.csdn.net/mp_blog/manage/article?spm=1011.2124.3001.5298">小方的博客链接</a></br>
    <a href="/master">内部链接</a>
</body>
</html>

from flask import Flask, render_template
app = Flask(__name__, template_folder="./templates")

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

@app.route("/master")
def master():
    return "byebye"

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

结果如下图所示
在这里插入图片描述
在新的 Tab 标签页打开链接，添加 target=“_blank”

<body>
    <a href="https://www.mi.com/shop/buy/detail?product_id=16642" target="_blank">
        <img src="https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202210262033_ef39fca0e37395d07682124770fd3ad9.png" style="width: 150px;"/>
    </a>
</body>

2.4 图片 img标签

语法如下<img src=image_url style="width:50px; height:20px"> 即通过style设置图片大小，此处指定了宽和高，若只指定宽或高，则按比例放大缩小，此外style里可以直接填百分比，表示放大缩小，如style=“50%”

如果要插入本地图片，需要在当前项目下创建static文件夹，并将离线图片存放在static文件夹中
在这里插入图片描述
我们得到如下效果

标签嵌套：点击图片跳转到对应的网站

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>hello</title>
</head>
<body>
    <div>
        <a href="https://consumer.huawei.com/cn/phones/" target="_blank">
            <img src="/static/img.png" style="width: 200px; height: 200px">
        </a>
    </div>
</body>
</html>

2.5 列表

2.5.1 无序列表 ul

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

2.5.2 有序列表 ol

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

效果如下
在这里插入图片描述

2.6 表格 table

<body>
  <h1>表格</h1>
  <table border="1">
    <thead>
      <tr> <th>id</th> <th>name</th> <th>age</th> </tr>
    </thead>
    <tbody>
      <tr> <td>01</td> <td>xiaofang</td> <td>18</td> </tr>
      <tr> <td>02</td> <td>xiaoming</td> <td>19</td> </tr>
      <tr> <td>03</td> <td>xiaohua</td> <td>20</td> </tr>
    </tbody>
  </table>
</body>

表格以<table>开头，中间包括表头<thead>和表主体<tbody>，<tr>代表一行，在表头中一列用<th>表示，在主体部分一列用<td>表示，上述代码结果如下， border=1使得表格有线条（无该参数时只显示文字，没有线条分割）
在这里插入图片描述

2.7 Input系列

2.7.1 输入框文本和密码 text & password

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<h2>文本和密码</h2>
  <!-- 文本与密码 -->
  <input type="text" />
  <input type="password" />

2.7.2 选择文件 file

  <!-- 选择文件 -->
<h2>选择文件</h2>>
  <input type="file" />

2.7.3 单选框 radio

  <!-- 单选框 -->
<h2>单选</h2>
  <input type="radio" name="n1" />男
  <input type="radio" name="n1" />女

2.7.3 多选框 checkbox

  <!-- 复选框 -->
<h2>多选</h2>
  <input type="checkbox" />唱
  <input type="checkbox" />跳
  <input type="checkbox" />Rap
  <input type="checkbox" />篮球

2.7.4 按钮 button & submit

 <!-- 按钮 -->
<h2>按钮：普通按钮和提交表单</h2>
  <input type="button" value="提交"/>	普通按钮
  <input type="submit" value="提交"/>	提交表单

2.7.5 下拉框 select

<h4>下拉框</h4>
<select>
	<option>北京</option>
	<option>上海</option>
	<option>深圳</option>
</select>

2.7.6 多行文本 textarea

<h4>多行文本</h4>
<textarea rows="3"></textarea>

</body>
</html>

在多行文本中通过参数rows指定文本行数，如果文本rows没有指定，会根据输入内容自动调整框的大小

将以上input系列代码整合在一起，渲染结果如下图所示
在这里插入图片描述

2.8 提交表单 form

2.8.1 表单提交的方法

表单提交的方法有get和post两种方法，GET 方法与 POST 方法的区别

GET: 可通过URL表单提交
POST: 只能通过表单提交,提交数据不在URL而是在请求体中

表单可以提交的前提条件:

提交方式: method=get or post
提交地址: action=“/xxx/xxx/xxx”
在form标签里面必须有一个submit标签
每个标签有name属性

2.8.2 表单注册

如下所示，先写一个前端表单注册页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户注册</title>
</head>
<body>
    <!--method时传参方式；action表示提交参数后执行的网址-->
    <form method="post" action="/do/post/regist">
        <h4>用户注册</h4>
        <div>
            用户名: <input type="text" name="username" />
        </div>

        <div>
            <!-- 此处必须加入name参数，作为返回参数的key-->
            密码: <input type="password" name="passwd" />
        </div>

        <div>
            <!-- 单选：两行都使用相同的name使得两个选择互斥；由于此处时选择设置value数值作为返回数值，如1代表男-->
            性别：
            <input type="radio" name="gender" value="1">男
            <input type="radio" name="gender" value="2">女
        </div>

        <div>
            <!--多选-->
            爱好：
            <input type="checkbox" name="hobby" value="1">篮球
            <input type="checkbox" name="hobby" value="2">羽毛球
            <input type="checkbox" name="hobby" value="3">排球
        </div>

        <div>
            <!--下拉单选-->
            城市：
            <select name="city">
                <option value="bj">北京</option>
                <option value="sh">上海</option>
                <option value="hz">杭州</option>
            </select>
        </div>

        <div>
            自我评价：
            <textarea name="slef review"></textarea>
        </div>
        <div>
        <!--submit作为提交表单；button是普通的按钮-->
        <input type="submit" value="submit提交">
        </div>

        <div>
            <input type="button" value="button提交">
        </div>
    </form>

</body>
</html>

后端程序中通过request.args和request.form获取前端传递过来的信息

from flask import Flask, render_template, request

app = Flask(__name__, template_folder="./templates")

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


@app.route("/do/get/regist", methods=["GET"])
def do_get_regist():
    # GET方式提交信息获取
    submit_info = request.args
    print(submit_info)
    # POST方式提交信息获取
    # submit_info = request.form
    return str(submit_info)


@app.route("/do/post/regist", methods=["POST"])
def do_post_regist():
    # POST方式提交信息获取
    submit_info = request.form
    return str(submit_info)

if __name__ == "__main__":
    app.run(port=5001)

效果如下
在这里插入图片描述
返回参数如下

2.8.3 获取表单属性值

如需获取表单内容，请注意如下设置：

需要返回信息内容时，个标签都需设置name属性
对于上面的性别、爱好、城市的标签，由于没有输入内容，需要设定value属性，对应选择对应的值

那么对于表单，可通过如下方式获取指定属性的值

@app.route("/do/post/regist", methods=["POST"])
def do_post_regist():
    # POST方式提交信息获取
    # submit_info = request.form
    # 也可获取单一的值
    usrname = request.form.get("username")
    pwd = request.form.get("passwd")
    # 多选的情况
    hobby_list = request.form.getlist("hobby")
    return str(usrname)

在后端可以将POST和GET请求方式合并，如下所示


# 指定即可接收GET也可接收POST请求
@app.route("/regist", methods=["GET", "POST"])
def regist():
    if request.method == "GET":
        submit_info = request.args
        return str(submit_info)
    else:
        usrname = request.form.get("username")
        pwd = request.form.get("passwd")
        return str(usrname)