2021-04-08 13:28阅读: 89评论: 0推荐: 0

WEB前端 ---- 学习第二天(表格、表单、css等)

今日内容概要

表格标签(只要是展视数据一般都可以使用表格标签)
表单标签(重要：获取前端用户数据发送给后端)
后端框架基本使用(flask)
css层叠样式表(选择器)

表格标签

数据示例:
username	site	level
mlxg	        jug	    height
uzi	        adc	    height
ming	        assist	    height
<!--格式-->
<table border="1">
    <thead>
        <tr> # 一个tr就表示一行
            <th>username</th> <!--加粗文本-->
            <th>site</th>
            <th>level</th>
            <!--<td>username</td>--> <!--正常文本-->
        </tr>
    </thead> <!--表头(字段信息)-->
    <tbody>
        <tr>
            <td>mlxg</td>
            <td>jug</td>
            <td>height</td>
        </tr>
        <tr>
            <td>uzi</td>
            <td>adc</td>
            <td>height</td>
        </tr>
        <tr>
            <td>ming</td>
            <td>assist</td>
            <td>height</td>
        </tr>
    </tbody> <!--表单(数据信息)-->
</table>
<table border="1">：添加表格的框线
<td colspan="2">jug</td>：水平方向占多行
<td rowspan="2">jug</td>: 竖直方向占多行

# 原生的表格标签很丑 但是后续我们一般都是使用框架封装好的 很好看

表单标签

"""
能够获取前端用户数据(用户输入的、用户选择的、用户上传...)基于网络发送给后端服务器
"""
# 写一个注册功能
<form action=""></form> # 在该form标签内部书写的获取用户的数据都会被form标签提交到后端
action：控制数据提交的后端路径(给哪个服务端提交数据)
    1. action值为空：默认就是向当前页面所在的url提交数据
    2. 写全路径：https://www.baidu.com 向百度服务端提交
    3. 只写路径后缀：action="/index/" 自动识别出当前服务端的IP和Port拼接到前面(host:port/index/)


<form action="">
    <label for="d1"> # 第一种方式,直接将input框卸载label内
        username:<input type="text" id="d1">
    </label>
    <label for="d2">password:</label> # 通过id链接即可,无需嵌套
    <input type="text" id="d2"> 
</form>
Ps: input不跟label关联也没有问题

"""
label和input都是行内标签
"""
input标签：就类似于前端的变形金刚 通过type属性变形
    type属性：
        - text：普通文本
        - password：密文展示
        - date：日期
        - submit：用来触发form表达提交数据的动作
            """
            <input type="submit" value="注册">
            """
        - button：就是一个普普通通的按钮,本身没有任何功能,但它是最有用的,学完js后可以给它自定义各种功能
            """
                <input type="button" value="按钮">
            """
        - reset：重置内容
            """
            <input type="reset" value="重置">
            """
        - radio：单选框,默认选中要加checked='checked'
                 <input type="radio" name="gender" checked='checked'>男
                 当标签的属性名和属性值一样时可以简写
                 <input type="radio" name="gender" checked>女
            """
            <p>gender:
                <input type="radio" name="gender" checked="checked">男
                <input type="radio" name="gender">女
                <input type="radio" name="gender">其他
            </p>
            """
        - checkbox：多选
            """
            <input type="checkbox" name="hobby" checked>read
            """
        - select：默认是单选,可以将mutiple参数变多选,默认选中用selected
            """
            <p>province:
                <select name="" id="">
                    <option value="" selected>上海</option>
                    <option value="">北京</option>
                    <option value="">深圳</option>
                </select>
            </p>
            <p>前女友:
                <select name="" id="" multiple>
                    <option value="">小红</option>
                    <option value="">小花</option>
                    <option value="" selected>迪丽热x</option>
                </select>
            </p>
            """
        - file：上传文件
            """
            <p>文件:
                <input type="file" nultiple(上传多个)>
            </p>
            """
        - hidden: 隐藏输入框
            """
            <p>你看不到我:
                <input type="hidden">
            </p>
            """
            钓鱼网站
                
        - textarea：获取大段文本
            """
            <p>自我介绍:
                <textarea name="" id="" cols="30" rows="10" maxlength="20"></textarea>
            </p>
            maxlength：字数限制
            cols：文本框大小
            rows：文本框大小
            """
# 能够触发form表单提交数据的按钮有哪些
1. <input type="submit" value="注册">
2. <button>刷新</button>

# 所有获取用户输入的标签 都应该有name属性
name就类似于字典的key
用户输入的数据就类似于字典的value
# 下列注释内容是上述所有知识点总结写出的页面 可以copy自己看下效果
"""
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <h1>注册页面</h1>
    <form action="http://127.0.0.1:5000/index/" method="post" enctype="multipart/form-data">
        <p>
            <label for="d1">
                username:<input type="text" id="d1" name="username" disabled value="默认值">
            </label>
        </p>
        <p>
            <label for="d2">password:</label>
            <input type="password" id="d2" name="password">
        </p>
        <p>你看不到我:
            <input type="hidden">
        </p>
        <p>
            <label for="d3">brithday:</label>
            <input type="date" id="d3">
        </p>
        <p>gender:
            <input type="radio" name="gender" checked="checked" value="male">男
            <input type="radio" name="gender" value="women">女
            <input type="radio" name="gender" value="others">其他
        </p>
        <p>hobby:
            <input type="checkbox" name="hobby" value="read">读书
            <input type="checkbox" name="hobby" checked value="tea">喝茶
            <input type="checkbox" name="hobby" value="game">游戏
        </p>
        <p>province:
            <select name="province" id="">
                <option value="sh" selected>上海</option>
                <option value="bj">北京</option>
                <option value="sz">深圳</option>
            </select>
        </p>
        <p>文件:
            <input type="file" name="myfile">
        </p>
        <p>自我介绍:
            <textarea name="info" id="" cols="30" rows="10" maxlength="20"></textarea>
        </p>
        <p>
            <input type="submit" value="注册">
<!--当你没有指定按钮的文本内容 不同的浏览器打开之后可能渲染的文本内容不一致-->
            <input type="button" value="按钮">
            <input type="reset" value="重置">
            <button>刷新</button>
        </p>
    </form>
</body>
</html>
"""

验证form表单提交数据

# 下面的框架代码无需掌握 看下效果即可
pip3 install FLASK

# form表单默认提交数据的方式 是GET请求 数据是直接放在url后面的
    http://127.0.0.1:5000/index/?username=wenkai.fang&gender=on&hobby=on
# 你可以通过method指定提交方式指定提交方式
    <form action="http://127.0.0.1:5000/index/" method="post">

针对用户选择的标签,用户不需要输入内容,但是你需要提前给这些标签添加内容value值

 <p>gender:
    <input type="radio" name="gender" checked="checked" value="male">男
    <input type="radio" name="gender" value="women">女
    <input type="radio" name="gender" value="others">其他
</p>
<p>hobby:
    <input type="checkbox" name="hobby" value="read">读书
    <input type="checkbox" name="hobby" checked value="tea">喝茶
    <input type="checkbox" name="hobby" value="game">游戏
</p>
<p>province:
    <select name="province" id="">
        <option value="sh" selected>上海</option>
        <option value="bj">北京</option>
        <option value="sz">深圳</option>
    </select>
</p>

"""
form表单提交文件需要注意:
    1. method必须是post
    2. <form action="http://127.0.0.1:5000/index/" method="post" enctype="multipart/from-data"> 
    Ps: enctype类似于数据提交的编码格式,默认是urlencoded只能够提交普通的文本数据
        formdata 就可以支持提交文件数据

"""

from flask import Flask, request

app = Flask(__name__)
# 当前url既可以支持get请求也可以支持post请求 如果不写默认只能支持GET请求
@app.route('/index/',methods=['GET','POST'])
def index():
    print(request.form) # 获取form表单提交过来的非文件数据
    print(request.files) # 获取文件数据
    file_obj = request.files.get('myfile')
    print(file_obj.name)
    file_obj.save(file_obj.name)
    return 'OK'

app.run()

# 针对用户输入的标签,如果你加了value 那就是默认值
<label for="d1">
    username:<input type="text" id="d1" name="username" disabled value="默认值">
</label>

disabled: 只能看不能改 与 readonly(只读) 类似

CSS

层叠样式表：就是给HTML标签添加样式的,让它变得更加美观

# 注释
/*单行注释*/
/*
多行注释1
多行注释2
多行注释3
*/

通常我们在写css样式的时候也会用注释来划定区域(因为HTML代码很多,所以对应的css代码也会很多)
demo：
/*这是博客园首页的css样式文件*/
/*顶部导航条样式*/
...
/*左侧菜单栏样式*/
...
/*右侧菜单栏样式*/
...

# css的语法结构
选择器 {
    属性1:值1;
    属性2:值2;
    属性3:值3
    }

# css的三种引入方式
1. style标签内部直接书写
    """
        在head块儿中
        <style>
            h1 {
                color: burlywood;
            }
        </style>
    """
2. link标签引入外部css文件(最正规的方式 解耦合)
    """
        在head块儿中
        <link rel="stylesheet" href="mycss.css">
    """
3. 行内式(比较少用)
    """
        直接在标签代码中
        <h1 style="color: green">老板好 在干嘛呢？</h1>
    """

css的学习流程
    1. 如何查找标签
        css查找标签的方式要掌握
        因为后面所有的框架封装的查找语句都是基于css来的
    2. 如何添加样式

css选择器

基本选择器

/* 写在head中 */
# 1. id选择器
        #d1 { /*找到id是d1的标签 将文本颜色变为绿黄色*/
            color: greenyellow;
        }
# 2. 类选择器
    .c1 { /*找到class值里面包含c1的标签 */
        color: red;
    }
# 3. 元素/标签选择器
    span { /*找到所有的span标签*/
        color: red;
    }
# 4. 通用选择器
     * {  /*html页面上所有的标签全部找到*/
        color: green;
    }

组合选择器

/*
    在前端 我们将标签的嵌套用亲戚关系来描述层级
    <div>div
        <p>div里面的p</p>
        <p>div p
            <span>div p span</span>
        </p>
        <span>span</span>
        <span>span</span>
    </div>
    div里面的p span都是div的后代
    p是div的儿子
    p里面的span是p的儿子 是div的孙子
    div是p的父亲
*/
/* 后代选择器 */
    div span {  /*div内部所有的span变成红色 div后面的空格表示后代的意思*/
        color: red;
    }
    /* <div>div
        <p>div里面的p</p>
        <p>div p
            <span>div p span</span> # 这个变颜色
        </p>
        <span>span</span> # 这个变颜色
        <span>span</span> # 这个变颜色
    </div> */
/* 儿子选择器 */
    div>span {
        color: red;
    }
    /* <div>div
        <p>div里面的p</p>
        <p>div p
            <span>div p span</span>
        </p>
        <span>span</span> # 这个变颜色 因为是div的儿子
        <span>span</span> # 同上
    </div> */
/* 毗邻选择器 */
    div+span { /*同级别仅挨着下面的第一个*/
        color: aqua;
    }
    /*
    <div>div
        <p>div里面的p</p>
        <p>div p
            <span>div p span</span>
        </p>
        <span>span</span>
        <span>span</span>
    </div>
    <span>span</span> 这个变颜色 因为紧挨着div
    */
/* 弟弟选择器 */
    div~span { /*同级别下面所有的span*/
        color: red;
    }
    /* <div>div
        <p>div里面的p</p>
        <p>div p
            <span>div p span</span>
        </p>
        <span>span</span> # 变色
        <span>span</span> # 变色
    </div> */

属性选择器

# 属性选择器是以[]作为标志的

1. 含有某个属性
    <style>
        [username] { /*将所有含有属性名是username的标签背景色改为红色*/
            background-color: red;
        }
    </style>
    /*
    全部带有username的都变色
    <input type="text" username>
    <input type="text" username="xiaoming">
    老师:<input type="text" username="xiaohong">
    <p username="xiaolv">小绿老师</p>
    <div username="xiaohua">小花老师</div>
    <span username="xiaohong">小红老师</span>
    */
2. 含有某个属性并且有某个值
    <style>
        [username='xiaohong'] { /*找到所有属性名是username并且属性值是xiaohong的标签*/
            background-color: red;
        }
    </style>
        /*
    <input type="text" username>
    <input type="text" username="xiaoming">
    老师:<input type="text" username="xiaohong"> 变色
    <p username="xiaolv">小绿老师</p>
    <div username="xiaohua">小花老师</div>
    <span username="xiaohong">小红老师</span> 变色
    */
3. 含有某个属性并且有某个值的某个标签
    <style>
        input[username='xiaohong'] { /*找到所有属性名是username并且属性值是xiaohong的input标签*/
            background-color: wheat;
        }
    </style>
        /*
    <input type="text" username>
    <input type="text" username="xiaoming">
    老师:<input type="text" username="xiaohong"> 变色
    <p username="xiaolv">小绿老师</p>
    <div username="xiaohua">小花老师</div>
    <span username="xiaohong">小红老师</span>
    */