51、表格标签与CSS选择器

一、表格标签

jason 123 read
egon    123 dbj
tank  123 hecha
...
<table>
        <thead>
                      <tr>  一个tr就表示一行
                <th>username</th>  加粗文本
                <td>username</td>  正常文本
            </tr>
              </thead>  表头(字段信息)
        <tbody>
                <tr>
                <td>jason</td>
                <td>123</td>
                <td>read</td>
            </tr>
        </tbody>     表单(数据信息)
</table>


<table border="1">  加外边宽
<td colspan="2">egon</td>  水平方向占多行
<td rowspan="2">DBJ</td>   垂直方向占多行

二、表单标签

　　后端通过网络得到前段用户的数据

2.1、form表单的使用

　　<form action="　　">　　</form>：form标签内部数据会提交到后端

　　action：提交到后端的数据

　　　　1.什么都不写

　　　　2.写全路径

　　　　3.只路径后缀名

2.2、label标签：标识作用

　　1.通常和input标签一起使用

　　　　<label for="d1">　　#一旦点击name，也会直接提跳到d1

　　　　　　name:<input type = "text" id ="d1">　　

　　　　</label>

　　2.和id连接使用，不需要嵌套

　　　　<lable for= "d2">password:</lable>    #password可以不用input，直接通过id关联

　　　　<input type="text" id="d2">

　　label和input都是行内标签

2.3、input标签

　　input标签通过搭配type属性使其功能化

　　type=“text”：普通文本

　　　　　“password”：密文

　　　　　“date”：日期

　　　　　“submit”：触发form表当提交数据的动作

　　　　　“button”：生成普通按键，无其他功能

　　　　　“reset”：重置内容

　　　　　“file”：获取文件，一次性可以获取多个

　　　　　　　　<input type="file" mutiple>

　　　　　"hidden"：隐藏当前input框（钓鱼网站）

　　　　　“textrea”：获取大段文本框

　　　　　　　　<textrea name=“” id=“” cols=“30” rows=“10”></textrea>      #自动填写

2.4、统一行内标签内的多选和多选

　　“radio”：单选

　　　　默认选项中要添加checked=‘checked’，当属性名和属性值相同时可以简写

　　　　获取用户输入的标签，都要有name属性，name属性和数据相当于key和value

　　　　　<input type="radio" name="gender" checked>男

　　“checkbox”：多选

　　　　<input type="checkedbox" checked>女

2.5、select标签，默认单选

　　select 标签里面使用<option>标签，

　　可以搭配mutiple，变成多选 ，

　　<select name="" id="" Mutiple>

　　<option value="" select> 小明</option>

　　<option value="" select> 小红</option>

　　</select>

三、验证form表单提交数据

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

form表单默认提交数据的方式 是get请求  数据是直接放在url后面的
    http://127.0.0.1:5000/index/?username=sdadasdsda&gender=on
你可以通过method指定提交方式
    <form action="http://127.0.0.1:5000/index/" method="post">
  
针对用户选择的标签 用户不需要输入内容 但是你需要提前给这些标签添加内容value值
<p>gender:
            <input type="radio" name="gender" value="male">男
            <input type="radio" name="gender" checked value="female">女
            <input type="radio" name="gender" value="others">其他
</p>
<p>hobby:
            <input type="checkbox" name="hobby" value="basketball">篮球
            <input type="checkbox" checked name="hobby" value="football">足球
            <input type="checkbox" checked name="hobby" value="doublecolorball">双色球
</p>
<p>province：
            <select name="province" id="">
                <option value="sh">上海</option>
                <option value="bj" selected>北京</option>
                <option value="sz">深圳</option>
            </select>
</p>



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


"""下面的代码无需掌握 你只需要关心form表单即可"""
from flask import Flask, request


app = Flask(__name__)


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

app.run()


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

四、css 简介

　　css 层叠样式表：就是给HTML标签添加样式表单的，使其更加的好看

4.1、注释

　　通常在编写css样式的时候使用注释来划分定样式的区域，可以快速的找到需要找到的样式位置，例如/*顶部导航条样式*/

　　/*单行注释*/

　　/*多行注释

　　　多行注释

　　*/

4.2、css的语法结构

　　选择器{

　　属性1：值1；

　　属性2：值2；

　　}

4.3、css的三种引入方式

　　1.style标签内部直接书写

<style>
        h1  {
            color: burlywood;
        }
</style>

　　2.link标签引入外部css文件（最正规的方式，解耦合）　　

<link rel="stylesheet" href="mycss.css">

　　3.行内是（一般不用）　　

<h1 style="color: green">老板好 要上课吗?</h1>

4.4、css的学习流程

　　1.先学习如何查找标签

　　2.在学如何添加样式

五、css选择器

5.1、基本选择器

　　1.id选择器：#加上标签

　　2.类选择器：。加上标签

　　3.元素/标签选择器：直接写标签

　　4.通用选择器：*加上标签

<style>
        id选择器
        #d1 {  !*找到id是d1的标签 将文本颜色变成绿黄色*!
            color: greenyellow;
        }
        类选择器
        .c1 {  !*找到class值里面包含c1的标签*!
            color: red;
        }
        元素(标签)选择器*/
        span {  !*找到所有的span标签*!
            color: red;
        }
        通用选择器
        * {  !*将html页面上所有的标签全部找到*!
            color: green;
        }
</style>

5.2、选择器的选择

　　我们使用层级的关系来表述选择器

　　后代选择器：div span，只要是div下面的选择器，都是

　　儿子选择器：div>span,div下面一层级的选择器

　　毗邻选择器：div+span，div同级别第一个选择器

　　弟弟选择器：div~span，div同级下的所有选择器

/*div span {*/
        /*    color: red;*/
        /*}*/

        /*儿子选择器*/
        /*div>span {*/
        /*    color: red;*/
        /*}*/

        /*毗邻选择器*/
        /*div+span {  !*同级别紧挨着的下面的第一个*!*/
        /*    color: aqua;*/
        /*}*/

        /*弟弟选择器*/
        div~span {  /*同级别下面所有的span*/
            color: red;
        }

5.3、属性选择器

　　1.含有某个属性

[username] {  !*将所有含有属性名是username的标签背景色改为红色*!
            background-color: red;
        }

　　2.含有某个属性并且有某个值

[username='jason'] {  !*找到所有属性名是username并且属性值是jason的标签*!
           background-color: orange;
        }

　　3.含有某个属性并且有某个值的某个标签

input[username='jason'] {  !*找到所有属性名是username并且属性值是jason的input标签*!
           background-color: wheat;
      }