JZTXT

前端（二）

发布时间 2023-04-12 21:27:37作者: 橘子熊何妨

前端（二）

列表标签

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

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

表格

  # table 是用来定义一个表格
      # 表头
      # 标题
          # 一行
              # 一列，要写在行里面
              # 内容
        <table border="1" bgcolor="aqua" cellpadding="10" cellspacing="0"><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选择器-----&gt;有很多种选择器------&gt;不全学-----&gt;学一些常见的选择器
	2. 找到标签之后在添加样式
'''

<style>body { }
.txt { }
#addr { background-color: rgba(0, 255, 255, 1) }</style>


# CSS的几种引入方式
1. 
<style>p { background-color: rgba(43, 153, 255, 1) }</style>

2. 
3. 行内式
<h1 style="color: rgba(255, 0, 0, 1)">
    开始学习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表单把数据提交到后端




    
    <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 { color: rgba(0, 0, 0, 1) }</style>


<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: rgba(0, 0, 0, 1)">头像<input type="file" style="color: rgba(0, 0, 0, 1)" name="file"></label>
    </p>
    <p align="center">
        <input type="submit" value="注册">
    </p>
</form>