day 43 form表单，选择器

form表单(******)
　　能够获取用户输入(输入，选择，上传的文件)
　　并且将用户输入的内容全部发送给后端

　　参数
　　　　action 控制数据提交的地址
　　　　　　三种书写方式
　　　　　　　　1.不写默认就是朝当前这个页面所在的地址提交数据
　　　　　　　　2.写全路径(https://www.baidu.com)
　　　　　　　　3.只写路径后缀(/index/)
　　　　method 控制数据提交的方式
　　　　　　get form表单默认是get请求
　　　　　　post

　　通常情况下input需要结合label一起使用
　　　　方法一：<label for="d1">用户名:<input type="text" id="d1"></label>
　　　　　　绑定id值之后点击label标签内任何的位置都可以自动选中input框

　　　　方法二：<label for="d2">用户名:</label>
　　　　　　　　<input type="text" id="d2">

　　　　form表单中的input就类似于是前端的变形金刚
　　　　　　根据typy参数的不同展示不同的功能
　　　　　　　　text 普通文本
　　　　　　　　password 输入的内容会变成密文
　　　　　　　　date 日期
　　　　　　　　radis 单选圆圈如选男，女此处两个name要一致，就变成单选
　　　　　　　　checkbox 多选 打钩
　　　　　　　　hidden 隐藏
　　　　　　　　file 传文件

　　　　　　　　button 普通按钮没有任何意义然后却是用的最多的你可以给它绑定js事件
　　　　　　　　reset 重置按钮
　　　　　　　　submit 提交按钮 能够自动触发form表单提交数据的动作

　　　　select标签下拉框
　　　　　　一个个的option标签就是一个个的选项

　　　　　　默认是单选
　　　　　　你可以给select标签加一个multiple参数就可以变成多选

　　　　textarea标签获取大段文本

　　　　input标签可以加disable属性禁用该input框
　　　　input标签可以加value属性设置默认值
　　　　选择的标签如何默认选中？
　　　　　　radio
　　　　　　checkbox
　　　　　　　　checked='checked'
　　　　　　　　当属性名和属性值相同的时候 可以只写属性名(******)
　　　　　　　　checked

　　　　能够触发form表单提交数据的动作有两个标签可以(******)
　　　　　　input标签type=submit
　　　　　　button标签

　　　　所有获取用户输入的标签 都应该有name属性(******)
　　　　　　name属性就类似于字典的key
　　　　　　input框获取到的用户输入都会放到input框的value属性中提交的时候是以k:v的形式提交的

　　　　针对选择框传到后端的数据有value属性决定

　　　　form表单如果要提交文件数据必须修改以下参数
　　　　　　enctype="multipart/form-data"

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>form表单</title>
</head>
<body>
<h1>注册页面</h1>
<form action="http://127.0.0.1:8000/index/" method="post" enctype="multipart/form-data">
    <p><label for="d1">
        用户名:<input type="text" id="d1" value="jason" name="username"></label></p>
    <p>密码:<input type="password"></p>
    <p>生日:
        <input type="date">
    </p>
    <p>性别:
        男<input type="radio" name="gender" value="male">
        女<input type="radio" name="gender" value="female">
    </p>
    <p>爱好:
        篮球<input type="checkbox" name="hobby" value="basketball">
        足球 <input type="checkbox" name="hobby" value="football">
        双色球 <input type="checkbox" checked name="hobby" value="doublecolorball">
    </p>
    <p>省份:
        <select name="province" id="">
            <option value="sh">上海</option>
            <option value="bj">北京</option>
            <option value="sz">深圳</option>
        </select>
    </p>
    <p>前女友:
        <select name="" id="" multiple>
            <option value="">小波</option>
            <option value="">小苍</option>
            <option value="">小明</option>
        </select>
    </p>
    <p>自我介绍:
        <textarea name="info" id="" cols="100" rows="10"></textarea>
    </p>
    <p>个人简历:
        <input type="file" name="myfile">
    </p>
    <p>猜猜我在哪
        <input type="hidden">
    </p>
    <p>
        <input type="button" value="按钮">
        <input type="reset" value="重置">
        <input type="submit" value="提交">
        <button>我是一个button标签</button>
    </p>
</form>
</body>
</html>

CSS
　　层叠样式表
　　用来控制html标签样式的

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

　　通常我们在写css的时候都会单独写一个css文件里面只有css代码
　　　　/*这是小米网站首页的css样式文件*/

　　　　/*通用样式*/

　　　　/*导航条样式*/

　　　　/*轮播图样式*/

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

　　css的三种引入方式
　　　　1.通过link标签引入外部的css文件(最正规用法)
　　　　　　<link rel="stylesheet" href="02%20小米css样式.css">
　　　　2.直接在html页面上的head内通过style标签直接书写css代码
　　　　　　<style>
　　　　　　　　h1 {
　　　　　　　　　　color: green;
　　　　　　　　}
　　　　　　</style>
　　　　3.行内式(直接在标签内部通过style属性直接书写) 不推荐使用
　　　　　　<h1 style="color: orange">我是Oscar</h1>

　　我们需要先学习如何查找标签
　　然后在学习如何修改样式

　　css查找很重要只要你学会了css的查找后面js jQuery的标签查找都是一个原理

　　基本选择器
　　　　元素选择器 span {color:red}

　　　　id选择器 #d1 {color:red}

　　　　类选择器 .cl {color:red}

　　　　通用选择器 * {color:red}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*让页面上所有的span变成红色   标签选择器 直接写标签名字即可*/
        span {
            color: red;
        }

        /* id选择器   #+id值*/
        #d1 {
            color: red;
        }

        /*类选择器   .+类值 */
        .c1 {
            color: pink;
        }

        /*通用选择器  了解*/
        * {
            color: orange;
        }
    </style>
</head>
<body>

<p class="c1">p</p>

<span id="d3" class="c2 ">span</span>

<div id="d2" class="">div
    <span class="c1">span</span>
</div>

<p id="" class="c2">p
    <span id="d1">span</span>
</p>
sadasd
<a href="">asdsadasd</a>
</body>
</html>

　　组合选择器
　　　　div span div span {color: red;} 后代选择器内部所有的spn

　　　　div>span div>span {color: red;} 儿子选择器内部第一层的span

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

　　　　div~span div~span {color: red;} 毗邻选择器 div紧挨着的同级别下面的span

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*后代选择器  只要在标签内部都算作该标签的后代*/
         div span {  /*空格表示后代*/
           color: red;
        }
        /*儿子选择器*/
        div>span {  /*大于号表示儿子*/
            color: green;
        }
        /*弟弟选择器  同级别下面所有的*/
        div~span {
            color: orange;
        }
        /*毗邻选择器 紧挨着的同级别下面的那一个*/
        div+span {
            color: aqua;
        }
    </style>
</head>
<body>

<span>span</span>

<span>span</span>

<div>div
    <span>div里面的span</span>
    <p>div里面的p
        <span>div里面的p里面的span</span>
    </p>
    <span>div里面最下面的span</span>
</div>

<p>ppp</p>

<span>span</span>

<p>ppp
<span>1111</span>
</p>

<span>span</span>

</body>
</html>

　　属性选择器
　　　　补充
　　　　　　任何的标签都有自己的默认的属性 id class
　　　　　　标签还支持你自定义任何多的属性(也就意味着可以让标签帮你携带一些额外的数据)(******)
　　　　　　<style>
　　　　　　　　1.含有某个属性名的标签
　　　　　　　　2.含有某个属性名并且属性值是...的标签
　　　　　　　　3.找p标签并且含有某个属性名并且属性值是...的标签

　　　　　　　　[password] {color: red;} 含有某个属性名的标签

　　　　　　　　[username='jason'] {color: black;} 含有某个属性名并且属性值是...的标签

　　　　　　　　p[username='jason'] {color: red;} 找p标签并且含有某个属性名并且属性值是...的标签
　　
　　　　　　</style>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*
        1.含有某个属性名的标签
        2.含有某个属性名并且属性值是...的标签
        3.找p标签并且含有某个属性名并且属性值是...的标签
        */
        [password] {
            color: red;
        }

        [username='jason'] {
            color: black;
        }

        p[username='jason'] {
            color: red;
        }
    </style>
</head>
<body>
<p username="jason">ppp</p>
<p username="oscar">ppp</p>
<p username="sean">ppp</p>
<span username="jason">span</span>
<span password="123">span</span>
<div password>div</div>
</body>
</html>

　　分组与嵌套

　　<body>
　　　　<div id="d1">div</div>
　　　　<span class="c1">span</span>
　　　　<p class="c2">p</p>
　　</body>
　　都改成同一种颜色
　　方法一：
　　　　div,
　　　　span,
　　　　p {color: blue;}
　　方法二：
　　　　#d1,.c1,p {color: orange;}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #d1 {
            color: red;
        }
        .c1 {
            color: red;
        }
        p {
            color: red;
        }


        div,
        span,
        p {
            color: blue;
        }


        #d1,.c1,p {
            color: orange;
        }

    </style>
</head>
<body>
<div id="d1">div</div>
<span class="c1">span</span>
<p  class="c2">p
</p>
</body>
</html>

　　伪类选择器
　　　　a标签有四种状态
　　　　　　1.没有被点击过 a:link {color: red;}
　　　　　　2.鼠标悬浮上面 a:hover {color: black;}
　　　　　　3.点击之后不松手 a:active {color: orange;}
　　　　　　4.点击之后再回去 a:visited {color: pink;}

　　　　我们将input框鼠标点进去之后的那个状态叫做 input获取焦点聚焦 focus
　　　　如： input:focus {background-color: orange;}

　　　　鼠标移出去之后的状态叫做input框失去焦点

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        a:link {
            color: red;
        }
        a:hover {  /*hover表示的就是悬浮的意思*/
            color: black;
        }
        a:active {
            color: orange;
        }
        a:visited {
            color: pink;
        }
        input:focus {
            background-color: orange;
        }
        span:hover {
            background-color: pink;
        }
    </style>
</head>
<body>
<a href="https://www.luffycity.com">点我点我</a>
<!--<input type="text">-->
<!--<span>span</span>-->
</body>
</html>

　　伪元素选择器 (清除浮动带来的负面影响)
　　　　可以通过css添加文本内容 首字变大 * ？
　　　　p:first-letter {
　　　　font-size: 48px;
　　　　color: red;
　　　　}

　　　　p:before {
　　　　content: '*';
　　　　color: green;
　　　　}

　　　　p:after {
　　　　content: '?';
　　　　color: blue;
　　　　}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        p:first-letter {
            font-size: 48px;
            color: red;
        }
        p:before {
            content: '*';
            color: green;
        }
        p:after {
            content: '?';
            color: blue;
        }
    </style>
</head>
<body>
<p>大江东去浪淘尽，荆轲刺秦王!大江东去浪淘尽，去浪淘尽，荆轲刺秦王!大江东去浪淘尽，荆轲刺秦王!大江东去浪淘尽，荆轲刺秦王!大江东去浪淘尽，荆轲刺秦王!大江东去浪淘尽，荆轲刺秦王!大江东去浪淘尽，荆轲刺秦王!大江东去浪淘尽，荆轲刺秦王!大江东去浪淘尽，荆轲刺秦王!大江东去浪淘尽，荆轲刺秦王!大江东去浪淘尽，荆轲刺秦王!大江东去浪淘尽，荆轲刺秦王!大江东去浪淘尽，荆轲刺秦王!大江东去浪淘尽，荆轲刺秦王!大江东去浪淘尽，荆轲刺秦王!大江东去浪淘尽，荆轲刺秦王!大江东去浪淘尽，荆轲刺秦王!大江东去浪淘尽，荆轲刺秦王!大江东去浪淘尽，荆轲刺秦王!大江东去浪淘尽，荆轲刺秦王!大江东去浪淘尽，荆轲刺秦王!大江东去浪淘尽，荆轲刺秦王!大江东去浪淘尽，荆轲刺秦王!大江东去浪淘尽，荆轲刺秦王!大江东去浪淘尽，荆轲刺秦王!大江东去浪淘尽，荆轲刺秦王!大江东去浪淘尽，荆轲刺秦王!大江东去浪淘尽，荆轲刺秦王!大江东去浪淘尽，荆轲刺秦王!大江东去浪淘尽，荆轲刺秦王!大江东去浪淘尽，荆轲刺秦王!大江东去浪淘尽，荆轲刺秦王!大江东去浪淘尽，荆轲刺秦王!大江东去浪淘尽，荆轲刺秦王!大江东去浪淘尽，荆轲刺秦王!</p>
</body>
</html>

　　选择器优先级
　　　　1.选择器相同的情况下引入方式不同
　　　　　　遵循就近原则 谁离标签更近就听谁的

　　　　2.选择器不同的情况下
　　　　　　行内选择器 > id选择器(其次) > 类选择器(使用最频繁) > 元素选择器

day 43 form表单，选择器

猜你喜欢