前端（二）

前端（二）

列表标签

1. 无序列表
<ul type="disc">
    <li>冰</li>
    <li>草</li>
    <li>风</li>
    <li>火</li>
    <li>岩</li>
</ul>

type属性：
● disc（实心圆点，默认值）
● circle（空心圆圈）
● square（实心方块）
● none（无样式）

表格

<table border="1" bgcolor="aqua" cellpadding="10" cellspacing="0">  # table 是用来定义一个表格
    <caption>角色</caption>  # 表头
    <thead>  # 标题
        <tr>  # 一行
            <td>名字</td>  # 一列，要写在行里面
            <td>攻击力</td>
            <td>生命值</td>
            <td>暴击率</td>
            <td>暴击伤害</td>
            <td>元素充能</td>
            <td>元素精通</td>
            <td>元素伤害加成</td>
        </tr>
    </thead>
    <tbody>  # 内容
        <tr>
            <td>神里绫华</td>
            <td>2100</td>
            <td>19000</td>
            <td>35%</td>
            <td>250%</td>
            <td>120%</td>
            <td>100</td>
            <td>冰伤88.1%</td>
        </tr>
        <tr>
            <td>申鹤</td>
            <td>3600</td>
            <td>18700</td>
            <td>43%</td>
            <td>72%</td>
            <td>170%</td>
            <td>100</td>
            <td>冰伤15%</td>
        </tr>
        <tr>
            <td>枫原万叶</td>
            <td>1400</td>
            <td>21000</td>
            <td>52%</td>
            <td>92%</td>
            <td>220%</td>
            <td>1000</td>
            <td>风伤44.1%</td>
        </tr>
        <tr>
            <td>珊瑚宫心海</td>
            <td>1200</td>
            <td>38600</td>
            <td>-72%</td>
            <td>63%</td>
            <td>160%</td>
            <td>100</td>
            <td>水伤15%</td>
        </tr>
    </tbody>
</table>

属性:
● border: 表格边框.
● bgcolor：底色
● cellpadding: 内边距
● cellspacing: 外边距.
● rowspan: 单元格竖跨多少行
● colspan: 单元格横跨多少列（即合并单元格）

# 现在的表格看起来很丑，没关系，后面学了CSS之后，表格就能变得好看

标签的两个重要属性

id : 不能重复，类似物品唯一的一个编号 
class : 类，一个物品可以是多个种类里，一个种类也可以有多个物品，可以重复

表单标签

# 用户输入的数据上传的数据都是通过form表单实现，可以把数据传给后端

# input标签是行内元素
'''通过改变input的type属性，来达到不同的输入类型'''
 
<form action="">  # 表单的话坚决不能漏
    <p align=center>
    """input 功能强大，通过改变input内部的type的值可以使其完成不同的功能"""
        <input type=text id="username" class="wbk" placeholder="请输入用户名">  # 默认就是text，文本类型
    </p>
    <p align=center>
        <input type=password id="password" class="wbk" placeholder="请输入密码">  # password密文类型
    </p>
    <p align=center>
        <label for="birthday">生日：<input type=date></label>
    </p>  # 通过label可以将对话框前面的生日与其关联起来
    <p align=center>  
        <input type=radio name="gender"> 男  # radio单选框，用同一个name将其关联，选了一个就不能选别的
        <input type=radio name="gender"> 女
        <input type=radio name="gender"> 保密
    </p>
    <p align=center>
        <input type=checkbox name="hobby" checked> 唱  # checkbox复选框，用同一个name将其关联起来，可以多选
        <input type=checkbox name="hobby" checked> rap
        <input type=checkbox name="hobby" checked> 篮球
    </p>
    <p align=center>
        <select name="" id="addr">  # 下拉菜单，
            <option>北京</option>
            <option>深圳</option>
            <option>上海</option>
        </select>
    </p>
    <p align="center">
        <input type="submit" value="提交">  # submit可以提交数据的按钮
    </p>
    <p align="center">
        <input type="button" value="提交">  # button没有意义的按钮
    </p>
    <p align="center">
        <input type="reset" value="重置">  # reset重置的按钮
    </p>
    <p align="center">
        <button>提交</button>  # 按钮，放在表单里面可以提交数据，放外面没意义
    </p>
</form>
"""
属性说明:
● name：表单提交时的“键”，注意和id的区别
● value：表单提交时对应项的值
  ○ type="button", "reset", "submit"时，为按钮上显示的文本年内容
  ○ type="text","password","hidden"时，为输入框的初始值
  ○ type="checkbox", "radio", "file"，为输入相关联的值
● checked：radio和checkbox默认被选中的项
● readonly：text和password设置只读
● disabled：所有input均适用
● placeholder：对输入框做一个说明解释
"""

css

# 为了让网页更美观，给标签都添加上样式

# html:超文本标记语言
# css:层叠样式表

'''学习css的步骤：
	1. 先学会如何查找标签
		用的就是CSS选择器----->有很多种选择器------>不全学----->学一些常见的选择器
	2. 找到标签之后在添加样式
'''

<style>
        body{  # 标签选择器
            /* 下面的是设置背景图片*/  单行注释
            background: url("https://img0.baidu.com/it/u=4171650282,1660577632&fm=253&fmt=auto&app=120&f=JPEG?w=1507&h=800");
        }
        .txt{  # 类选择器
            /*
            给class=txt的标签颜色设置为白色    多行注释
            1
            2
            3
            */
            color: white;
        } 
        #addr{  # id选择器
            width: 150px;
            background-color: aqua;
        }
    </style>


# CSS的几种引入方式
1. 
<style>
        p{
            background-color: #2b99ff;
        }
</style>

2. <link href="mystyle.css" rel="stylesheet" type="text/css"/>
3. 行内式
<h1 style="color: red">
    开始学习CSS了
</h1>

选择器

基本选择器

# 每个同学必须掌握
1. id
2. 类选择器
3. 标签选择器
4. 通用选择器

组合选择器

# 我们使用亲戚关系来表示标签之间的关系

"""
<div>
    <p></p>
    <p>
        <span></span>
    </p>
    <span></span>
    <span></span>
</div>
"""
div里面的p和span都是div的后代
div里面的p是div的儿子
div里面的p里面的span是p的儿子，div 的孙子
...

属性选择器

/*用于选取带有指定属性的元素。*/
p[title] {
  color: red;
}
/*用于选取带有指定属性和值的元素。*/
p[title="213"] {
  color: green;
}

server

from flask import Flask, request
import json

app = Flask(__name__)
flag = 0

@app.route('/index/', methods=['GET', 'POST'])
def index():
    dic={}
    print(request.form)  # 只能接收post提交的数据，不能接收get的
    print(request.files)
    for i in request.form:
        dic[i]= request.form.get(i)
    file_obj = request.files.get('file')
    file_obj.save(file_obj.filename)
    print(dic.items())
    with open(f'{dic.get("username")}.txt', 'a', encoding='utf-8') as f:
        json.dump(dic, f,ensure_ascii=False)
    global flag
    flag += 1
    return f'恭喜第{flag}位ikun加入我们'

app.run()

验证form表单把数据提交到后端

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册</title>
    <style>
        body{
            /* 下面的是设置背景图片*/
            background-image: url("https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg3.doubanio.com%2Fview%2Fgroup_topic%2Fraw%2Fpublic%2Fp106878681.jpg&refer=http%3A%2F%2Fimg3.doubanio.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1683808925&t=efa6bf623c6a76ac45e97f283debdc48");
            background-size: 520px;
        }
        .txt{
            /*给class=txt的标签颜色设置为白色*/
            color: black;
        }
    </style>
</head>
<body>
<form action="http://127.0.0.1:5000/index/" method="post" enctype="multipart/form-data">
    <p align=center>
        <input type=text id="username" class="wbk" name="username" placeholder="请输入用户名">
    </p>
    <p align=center>
        <input type=password id="password" class="wbk" name="password" placeholder="请输入密码">
    </p>
    <p align=center class="txt">
        <label for="birthday">生日：<input type=date name="birthday"></label>
    </p>
    <p align=center class="txt">
        <input type=radio name="gender" value="男"> 男
        <input type=radio name="gender" value="女"> 女
        <input type=radio name="gender" value="保密"> 保密
    </p>
    <p align=center class="txt">
        <input type=checkbox name="hobby" value="唱" checked> 唱
        <input type=checkbox name="hobby" value="跳" checked> 跳
        <input type=checkbox name="hobby" value="rap" checked> rap
        <input type=checkbox name="hobby" value="篮球" checked> 篮球
    </p>
    <p align=center>
        <select name="addr" id="addr" style="width: 150px">
            <option name="addr" value="北京">北京</option>
            <option name="addr" value="深圳">深圳</option>
            <option name="addr" value="上海">上海</option>
        </select>
    </p>
    <p align=center>
        <label style="color: black">头像<input type="file" style="color: black" name="file"></label>
    </p>
    <p align="center">
        <input type="submit" value="注册">
    </p>
</form>
</body>
</html>