前端与HTML2-CSDN博客

本文链接：https://blog.csdn.net/hyhyxyx/article/details/130874099

前端与HTML2

文章目录

前端与HTML2
总案例

2.4.7 列表

<h1>xyx状态</h1>
#无序列表
    <ul>
        <li>清醒</li>
        <li>亢奋</li>
        <li>活跃</li>
        <li>开心</li>
    </ul>

在这里插入图片描述

#有序列表
<ol>
    <li>清醒</li>
    <li>亢奋</li>
    <li>活跃</li>
    <li>开心</li>
</ol>

在这里插入图片描述

2.4.8 表格

<table border="1">
    <thead>                 #表头
    	<tr>   <th>ID</th>  <th>name</th>   <th>age</th> （不规范写法） </tr>
    </thead>
    <tbody>                 #内容
    	<tr>   <td>1</td>   < td>xyx</td>    <td>19</td>  </tr>
        <tr>   <td>2</td>   < td>xyx1</td>    <td>6</td>  </tr>
        <tr>   <td>3</td>   < td>xyx2</td>    <td>6</td>  </tr>
        <tr>   <td>4</td>   < td>xyx3</td>    <td>6</td>  </tr>
        <tr>   <td>5</td>   < td>xyx4</td>    <td>6</td>  </tr>
        <tr>   <td>6</td>   < td>xyx5</td>    <td>3</td>  </tr>
        
    </tbody>
</table>

在这里插入图片描述

案例

在这里插入图片描述

<table border="1">
    <thead>
    <tr>
      <th>ID</th>
      <th>头像</th>
      <th>姓名</th>
      <th>邮箱</th>
      <th>更多信息</th>
      <th>操作</th>
    </tr>
    </thead>
    <tbody>                    #重复四遍得到上图
    <tr>
      <td>1</td>
      <td>
        <img src="/static/xiaobao.webp" alt=""style="height:50px">
      </td>
      <td>xiaobao</td>
      <td>xiaobao@qq.com</td>
      <td>
        <a href="https://baike.baidu.com/item/%E9%AD%88/24435854?fr=aladdin" target="_blank">点击查看</a>
      </td>
      <td>
        编辑
        删除
      </td>
    </tr>
  </tbody>
  </table>

2.4.9 input系列

<input type="text" />           #输入框，行内标签
<input type="password">         #密码框
<input type="flie">             #上传文件

<input type="radio">            #单选框，会出现一个可点击的小圆点
<input type="checkbox">         #复选框，会出现一个可点击的小方块

<input type="button" value="提交">      #按钮，value是什么页面上显示的就是什么
<input type="button" value="提交">      #也是按钮，可以提交表单

在这里插入图片描述

关于单选框，想实现只能点击一个(要保证后面的name一样)

<input type="radio" name="n1"> 开心
<input type="radio" name="n1"> 特别开心

在这里插入图片描述

关于复选框，即想实现同时点击多个

<input type="checkbox">飞飞
<input type="checkbox">跑跑
<input type="checkbox">跳跳

在这里插入图片描述

2.4.10 下拉框

<select>
    <option>家里</option>
    <option>教室</option>
    <option>图书馆</option>
</select>                               #单选下拉框

<select multiple>
    <option>家里</option>
    <option>教室</option>
    <option>图书馆</option>
</select>                               #按住shift键可多选

在这里插入图片描述

2.4.11多行文本

<textarea></textarea>     #可以写多行文字

在这里插入图片描述

<textarea rows="3"></textarea>   #设定初始行数为三行

案例：用户注册

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册页面</title>
</head>
<body>
  <h1>用户注册</h1>
  <div>
    用户名：
    <input type="text">
  </div>

  <div>
    密码：
    <input type="password">
  </div>

   <div>
    性别：
    <input type="radio" name="n1">男
    <input type="radio" name="n1">女
  </div>

   <div>
    爱好：
    <input type="checkbox">羽毛球
    <input type="checkbox">听别人唱歌
    <input type="checkbox">沉浸式学习
    <input type="checkbox">发呆
    <input type="checkbox">散步
  </div>

   <div>
    城市：
    <select>
      <option>北京</option>
      <option>上海</option>
      <option>珠海</option>
      <option>合肥</option>
      <option>石家庄</option>
      <option>沈阳</option>
    </select>
  </div>

   <div>
    擅长领域：
    <select multiple>
      <option>笑(*^_^*)</option>
      <option>吃好吃的</option>
      <option>睡觉</option>
      <option>等时间走掉</option>
    </select>
  </div>

  <div>
    备注：
    <textarea rows="3"></textarea>
  </div>
  <input type="button" value="button提交">
  <input type="submit" value="submit提交">
</body>
</html>

在这里插入图片描述

目前还没有提交功能，只是一个页面，提交功能见下文

知识点回顾和补充

1.网站请求的流程

在这里插入图片描述

2.一大堆标签

h/div/span/a/img/ul/li/table/input/textarea/selext

3.网络请求

在浏览器的URL中写入地址，点击回车，访问。

浏览器会发送数据过去，本质上发送的是字符串：
"GET /explore http1.1\r\nhst:...\r\nusrt-agent\r\n..\r\n\r\n"

浏览器会发送数据过去，本质上发送的是字符串：
"POST /explore http1.1\r\nhst:...\r\nusrt-agent\r\n..\r\n\r\n数据库"

浏览器向后端发送请求时
- GET请求【URL访问/表单提交】
  - 现象：GET请求、跳转、向后台传入数据，数据会拼接在URL上。
```
如：https://search.bilibili.com/all?keyword=pycharm%E4%BD%BF%E7%94%A8%E6%95%99%E7%A8%8B&from_source=webtop_search&spm_id_from=333.1007&search_source=3
```
  注意：GET请求，数据会在URL中体现
- POST请求【表单提交】
  - 现象：提交数据不在URL中而是在请求体中

案例：用户注册

新创建项目
创建Flask代码

GET方式提交：

python文档：

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/reg', methods=["GET"])
def do_register():
    print(request.args)

    return "注册成功"

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册</title>
</head>
<body>
    <h1>用户注册</h1>
<form method="get" action="/do/reg">
    用户名：<input type="text" name="user"/>
    密码：<input type="text" name="pwd"/>
    <input type="submit" value="submit按钮">
</form>
</body>
</html>

在这里插入图片描述

POST方式提交

python文档：

from flask import Flask, render_template, request

app = Flask(__name__)

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

@app.route('/post/reg', methods=["POST"])
def post_register():
    print(request.form)

    return "注册成功"


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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册</title>
</head>
<body>
    <h1>用户注册</h1>
<form method="post" action="/post/reg">
    用户名：<input type="text" name="user"/>
    密码：<input type="text" name="pwd"/>
    <input type="submit" value="submit按钮">
</form>
</body>
</html>

在这里插入图片描述

页面上的数据，想要提交到后台

form标签<form method="xxx" action="地址"></form>包裹要提交的数据
- 提交方式：method="get"
- 提交的地址：action="/xxx/xx/xx"
- 在form标签里必须有submit按钮
在form里面的一些标签
遇到让用户选择的内容时，不仅需要设置name,还需要设置value值

实现的功能：
在这里插入图片描述

优化：

加上性别

性别：
<input type="radio" name="n1" value="0">男
<input type="radio" name="n1" value="1">女

因为是按钮，所以若不加value，会导致传入后台的数据出现问题

加了value之后：
在这里插入图片描述

总案例

在这里插入图片描述

提交得到（未优化前）
在这里插入图片描述

优化后：
在这里插入图片描述

python文档：

from flask import Flask, render_template, request

app = Flask(__name__)

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

@app.route('/post/reg', methods=["POST"])
def post_register():
    # print(request.form)
    user = request.form.get("user")
    pwd = request.form.get("pwd")
    n1 = request.form.get("n1")
    hobby_list = request.form.getlist("hobby")
    city = request.form.get("city")
    skill_list = request.form.getlist("skill")
    more = request.form.get("more")
#将用户信息写入文件中实现注册，写入excel中实现注册，写入数据库中实现注册

    print(user,pwd,n1,hobby_list,city,skill_list,more)

    return "注册成功"


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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册</title>
</head>
<body>
    <h1>用户注册</h1>
<form method="post" action="/post/reg">
      <div>
    用户名：
    <input type="text" name="user">
  </div>

  <div>
    密码：
    <input type="password" name="pwd">
  </div>

   <div>
    性别：
    <input type="radio" name="n1" value="0">男
    <input type="radio" name="n1" value="1">女
  </div>

    <div>
    爱好：
    <input type="checkbox" name="hobby" value="10">羽毛球
    <input type="checkbox" name="hobby" value="11">听别人唱歌
    <input type="checkbox" name="hobby" value="12">沉浸式学习
    <input type="checkbox" name="hobby" value="13">发呆
    <input type="checkbox" name="hobby" value="14">散步
  </div>

   <div>
    城市：
    <select name="city">
      <option value="bj">北京</option>
      <option value="sh">上海</option>
      <option value="zh">珠海</option>
      <option value="hf">合肥</option>
      <option value="sjz">石家庄</option>
      <option value="sy">沈阳</option>
    </select>
  </div>

   <div>
    擅长领域：
    <select name="skill" multiple>
      <option value="100">笑(*^_^*)</option>
      <option value="101">吃好吃的</option>
      <option value="102">睡觉</option>
      <option value="103">等时间走掉</option>
    </select>
  </div>

  <div>
    备注：
    <textarea name="more" rows="3"></textarea>
  </div>







    <input type="submit" value="submit按钮">
</form>
</body>
</html>

在这里我们还可以通过method的不同，将两个网址整合，对python文档进行优化：

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)
        user = request.form.get("user")
        pwd = request.form.get("pwd")
        n1 = request.form.get("n1")
        hobby_list = request.form.getlist("hobby")
        city = request.form.get("city")
        skill_list = request.form.getlist("skill")
        more = request.form.get("more")
        # 将用户信息写入文件中实现注册，写入excel中实现注册，写入数据库中实现注册

        print(user, pwd, n1, hobby_list, city, skill_list, more)

        return "注册成功"


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