后端框架与选择器

后段框架

表单标签：
    form表单：
  关键性属性：
        action
        控制的数据的提交路径：
            1.不写： 默认朝当前页面所在的地址提交
                2.全路径：
                3.后缀：（/index/）
        methon:
            控制提交方式
            form表单默认是get请求 methon='get'
            也可以指定post请求 methon='post'
        enctype
        控制表单数据提交的编码格式
            默认form表单是不能够直接发送文件
            如果想要发送文件必须将该参数urlencoded改为formdata
        input 注意事项：
        1.获取用户输入的标签，就是用value属性来存放用户的输入
            获取用户输入的标签都因该由name属性 类似于字典的key value属性就相当于字典中的value
             2.如何增加默认属性
            可以直接给input标签加value
             3.input框设置提示信息：
            加上placeholder='提示内容'
  验证form表单的提交数据
  后端框架
     Django
        Flask
            Tornado
  Flask框架：pip3 install Flask
  get请求可以携带参数，但是携带的参数都是直径二跟在url之后
    url？sssss=ssss&sssss=ddddd&sss=OOO
    特点：
    1.数据全是明文
        2.数据大小有限制 大概在4kb左右的数据
        3.get请求不应该携带隐私信息
            
CSS
 层叠样式表，用来调节标签的样式
    css注释： /* */
    注释的使用： css应该是一个独立的文件
    css语法结构：
    选择器（属性名：属性值；）
    CSS的三种引入方式
    1.外部css文件
    2.head内style标签内部直接书写css代码
    3.标签内部通过style属性直接写对应的样式
CSS选择器分类
 基本选择器
    组合选择器
    属性选择器
    所有的标签都可以有默认的属性、
        id
            class
            标签还可以有自定义的属性，并且可以有多个
            
    分组嵌套
    伪类选择器
    伪元素选择器

书写Flask客户端：

from flask import Flask,request   #导入模块
app = Flask(__name__)  #调用模块
@app.route('/index',methods=['GET','POST'])
def xxx():
    print(request.form) 打印form表单
    print(request.files) 打印files文件
    file_obj = request.files.get('heihei') 获得一个文件对象
    file_obj.save('高手.png') 保存文件
    return '耿耿是傻逼' 发送完毕后返回一句话
app.run()

css的三种用法：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="mycss.css"> #导入外部模块
    <style>
        /*p{color: blueviolet}*/
    </style> #head内通过style书写
</head>
<body>
<p>我有一根大香肠</p>
<!--<P style="color: blue"> 人活这一辈子不就为了两口吃的吗</P>--> #标签内通过style直接书写（不推荐）
</body>
</html>

基本选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div { color: blue;}
        /* 将div的改为蓝色 */
        .c1{color: crimson;}
        /* c1类的文本改为红色 */
        #d1 {color: black;}
        /* id为的的改为黑色 */
       * {color: darkgreen;}
        /* 所有的文本改为绿色*/
    </style>
</head>
<body>1
<div class="c1"> c1:你好给我来个NB点的香肠
    <span>我是内部香肠</span>
</div>
<p id="d1" class="c1">d1c1: 我是血红肠，很高你来吃我</p>
<div> div你好我是蘑菇肠，请吃我吧</div>
<span class="c1">c1:鸡肉肠出来接客啦</span>
<p>来客五位，楼上请</p>
<div>   <span id="d2">d2:米酒肠出来接客快点</span>
</div>
</body>
</html>
优先级：id选择器>.类选择器>div元素选择器>*通用选择器

组合选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*div p{color: blue;}*/
        /*!*后代选择器div内部*!*/
        div >span{color:crimson }
        /*!*儿子选择器内部*!*/
        /*div +p{color: aliceblue}*/
        /*!*毗邻钻择期div紧挨着的下一个*!*/
        /*div ~p{color: greenyellow}*/
        /*!*弟弟选择器，同级别下面所有*!*/
    </style>
</head>
<body>
<p>div上的p</p>
<p>div上的p</p>
<div>
    <span>div内部的p</span>
        <p>
            <span>它事实上</span>
        </p>
    <span>好吧</span>
</div>
<p>div下面的p</p>
<p>123456</p>
<div>妹妹救我
    <span>哥哥快来舔我
        <span>12345</span>
    </span>
</div>
<p>要死了</p>
<p>123</p>
</body>
</html>

属性选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*属性选择器*/
       [username]{background-color: crimson}
        /*含有username的改为红色*/
       [username='耿耿']{background-color: fuchsia}
        /*含有username=耿耿的改为粉红*/
        input[username='耿耿']{background-color: blue}
        /*含有输入username=耿耿的改为蓝色*/
    </style>
</head>
<body>

名字：<input type="text" username="耿耿">
名字：<input type="text" username="耿耿于怀">
名字：<input type="text" username="怀耿于心">
<p username="耿耿"> 我带我天哪</p>
<p username="heihei"> sslsldld]d</p>
<p username="最美小美女">上的方法适当方式</p>
</body>
</html>
优先级：input username> username=> username

分组嵌套

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
       div{color: blue}
       /*将div内部的字体颜色改为蓝色*/
       p{color: fuchsia}
       /* 将p里面的文字改为粉红*/
       span{color: greenyellow}
       /*将span里的文字改为黄绿色*/
       div,p,span{color: aqua}
       /* 将div，p，span里的文字改为青蓝色*/
       .c1,#d1,p{color: crimson}
       /* 将c1 类，id=d1,p中的文字改为红色*/
        .c1 h1{color: lime}
        /*将c1类中h1里面的文字改为草绿色*/
    </style>
</head>
<body>
<div class="c1">好冷啊
    <h1>下雨了</h1>
</div>
<span id="d1">冻脚啊</span>
<p>放学了</p>
</body>
</html>

伪类选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        a:link{color:red }
        /*没点击过的是红色*/
        a:hover{color: cyan}
        /*悬浮连接变成青蓝色*/
        a:active{color: blue}
        /*长按是蓝色*/
        a:visited{color: lightcyan}
        /*点击过的变成灰白色*/
        input:focus{background-color: greenyellow}
        /*点击输入框变成草黄色*/
    </style>
</head>
<body>
<a href="https://www.baidu.com">百度</a>
<a href="https://www.mzitu.com">妹子图</a>
<a href="https://www.sogou.com">搜狗</a>
<a href="https://www.4399.com">4399</a>
<a href="https://www.baihe.com">百合</a>
<input type="text">
</body>
</html>

伪元素选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <STYLE>
        P:first-letter{color: blue; font-size: 50px}
        /*将首字符改为蓝色且大小为50px*/
        p:before{content: '你好啊'; color: cyan}
        /*在语句前面添加（你好啊）三个字*/
        p:after{content: '?';color: darkcyan}
        /*在语句后面添加*/
    </STYLE>
</head>
<body>
<p>我有一根大香肠</p>
</body>
</html>
注意：以此方法添加的字段均不可选中。

后端框架与选择器

后段框架

猜你喜欢