前端（二）

一.from表单

# form表单:获取用户的数据并发送给后端(服务端)
    eg:网站的登录、注册、验证码...
 
'''以注册页面为例'''
1.获取用户数据最为常用的标签就是input标签并且该标签是行内标签
    input标签是前端标签里面的变形金刚
      通过type参数的不同变换不同的表现形式
        text            普通文本
      password    密码展示
      date            日历展示
      radio            单选>>>:多个选项标签需要有相同的name属性
                        默认选中需要额外配置checked='checked'
                      当属性名与属性值相等的时候可以简写checked
      checkbox    多选>>>:默认选中也是checked属性
      email            邮箱格式
      file            上传文件>>>:默认只支持单个文件
                        如果需要一次性上传多个需要额外配置multiple
         submit        提交按钮>>>:点击出发提交数据的动作
      button        普通按钮>>>:本身没有任何功能 需要绑定(JS)
      reset            重置按钮
          按钮组的提示信息可以通过value属性自定义，如果不自定义那么不同的浏览器可能会展示出不同的提示信息 尤其是submit按钮
        
  select标签是下拉框选项
          一个个选项就是一个个option标签 默认是单选也可以变为多选
            multiple
  textarea标签
          获取大段文本内容
    
2.直接编写input会出现黄色阴影，原因在于input需要结合lable一起使用
    方式1:lable包裹input并绑定id
        <label for='input标签id值'>input标签</label>
  方式2:label与input单独出现并绑定id
        <label for="d1">username:</label>
      <input type="text" id="d1">
      
3.form表单提交数据
    数据的提交地址由form表单的action参数来控制
      action="URL"
        # 不写默认朝当前页面所在的地址提交
    method="数据的提交方式"
        # 数据的提交方式有很多种 这里先忽略(后续讲解)
          get post put delete patch...
"""
form表单在提交数据的时候 如果含文件则需要指定两个固定参数
    method='post'
    enctype="multipart/form-data"
"""

二.初体验前后端交互

# 代码无需掌握 只看效果即可
"""后端框架:可以简单的理解为别人写好的一个非常牛逼的TCP服务端"""
以flask框架为例>>>:第三方框架 pip3 install flask
 

前端通过标签获取用户数据发送给后端的过程中 标签需要有name属性
    相当于字典的key
     用户输入的数据会存储到标签的value属性中 相当于字典的value
      如果是选择型标签需要自行加上name和value

from flask import Flask,request
app = Flask(__name__)
@app.route('/index/',methods=['GET','POST'])
def index():
    print(request.form)  # 获取普通数据
    print(request.files)  # 获取文件数据
    # print(request.form.get('name'))
    file_obj = request.files.get('file')  # 获取文件对象
    file_obj.save('xxx.md')  # 保存文件
    return 'flask框架真简单'
app.run()

三.css简介

# 层叠样式表>>>:就是给HTML标签修改样式
语法结构
    选择器 {
        属性名1:属性值1;
        属性名2:属性值2
  }
注释语法
    /*注释内容*/ 
引入方式
    1.style内部直接编写css代码
      平时学习、练习的时候推荐使用
  2.link标签引入外部css文件
      正式工作、实际生产环境推荐使用
  3.标签内直接书写
      一般情况下不推荐使用 容易造成荣誉现象
"""
单独开设的css文件内代码也是非常多的 可以借助于注释管理    
    /*导航条样式*/    
    /*侧边栏样式*/
"""

四.css基本选择器

"""
css是用来调节标签样式的 那为什么需要学选择器呢?
    因为同一个页面上有很多相似的标签 并且这些标签在不同的位置有不同的样式 所以为了能够区分 我们肯定先需要学习如何查找指定的标签
"""
1.标签选择器>>>:通过标签名直接查找
      /*查找所有的div标签*/
      div {  
            color: red;
        }
2.类选择器(关键符号为句点符.)>>>:通过class值查找标签
      /*查找所有含有c1样式类的标签*/
      .c1 {
            color: red;
        }
3.id选择器(关键符号为警号#)>>>:通过id值查找标签
      /*查找id为d1的标签*/
      #d1 {
            color: orange;
        }
4.通用选择器(了解)
    /*body内所有的标签*/
    * {
      color: darkgray;
    }

五.组合选择器

/*为了区分嵌套标签之间的关系 我们发明了一种称呼
    <div>
        <p>
            <span></span>
        </p>
    </div>
span是p的儿子 是div的孙子也可以说是div的后代
p是div的儿子也是div后代 是span的父亲
div是p的父亲是span的爷爷 也可以说是他们的祖先*/
div {color: gold}

/*查找div内部所有的后代span*/
div span {
    color:red;
}

/*查找div内部所有的儿子span*/
div > span {
    color:beige;
}

/*查找同级别下面紧挨着的第一个span（不能有其他标签间隔)*/
div + span {
    color:greenyellow;
}

/*查找同级别下的所有的span（不需要紧挨着）*/
div ~ span {
    color:red;
}

六.属性选择器

/*标签可以有默认的属性也可以自定义属性*/
    <p id="d1" class="c1" name="jason" pwd="123">123</p>
 

[name] {  /*查找含有name属性名的标签*/
            color: red;
        }

[name='jason'] {  /*查找含有name属性名并且值为jason的*/
            color: red;
        }

p[name='jason'] {  /*查找含有name属性名并且值为jason的p*/
            color: red;
        }

七.分组与嵌套

/*多个相同选择器并列使用*/
div,span,p {  /*查找div或者span或者p*/
            color: red;
        }
/*多个不同选择器并列使用*/
div,#d1,.c1 {  /*标签查找div id查找d1 类查找c1*/
            color: red;
        }
/*不并列同样可以使用组合选择器*/
.c1 p {   /*查找class为c1的后代p标签*/
            color: red;
        }
/*直接筛选*/
    div#d1 {  /*查找id为d1的div标签*/
      color: red;
  }
  div.c1 {  /查找class为c1的div标签/
    color: red;
  }
/*
练习题
    #d1>div>.c1>span.c2
    查找id为d1的标签内部的儿子div
    并且在儿子div内部查找class为c1的儿子标签
    并且在该儿子内部查找class为c2的儿子span
*/

八.伪类选择器

/*鼠标悬浮在上面*/
a:hover {   # 重点掌握 很多网址都在用!!!
            color: orange;
        }
/*a标签默认的颜色会变化 第一次是蓝色 后面是紫色*/


input:focus {
            background-color: red;
        }
/*我们将input框被用户点击即将录入数据的过程看成是focus状态(聚焦状态)*/