11.13 form表单和CSS

一、form表单

能够获取用户输入（输入，选择，上传的文件）并且将用户输入的内容全部发送给后端。

参数：action 控制数据提交的地址

三种书写方式

1.不写默认就是朝当前这个页面所在地址提交数据

2.写全路径（https://www.baidu.com)

3.只写路径后缀（/index/)

method 控制数据提交的方式默认是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就类似于是前端的变形金刚

根据type参数的不同展示不同的功能

text 普通文本
password 输入的内容会变成密文
date 日期
radis 单选圆圈
checkbox 多选打钩
hidden 隐藏
file 传文件
button 普通按钮没有任何意义可以给它绑定js事件
reset 重置按钮
submit 提交按钮能够自动触发form表单提交数据的动作
radio 性别

select标签下拉框

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

textarea 标签获取大段文本

input 标签可以加disable属性禁用该input框

input 标签可以加value属性设置默认值

当属性名和属性值相同的时候可以只写属性名 checked='checked'

能够触发form表单提交数据的动作有两个标签可以

input标签type=submit
button标签

所有获取用户输入的标签都应该有name属性

name属性就类似于字典的key
input框获取到的用户输入都会放到input框的value属性中

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

enctype 控制前端朝后端提交数据的编码格式，默认是urlencoded
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:8080/index/" method="post" enctype="multipart/form-data">
    <p>
        <label for="d1">用户名：<input type="text" id="d1"></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>jenny</option>
        </select>
    </p>
    <p>
        自我介绍：
        <textarea name="info" id cols="100" rows="8"></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的语法结构：选择器（属性1：属性值1）

CSS的三种引入方式

1.通过link标签引入外部的CSS文件（最正规用法）

<link rel="stylesheet" href="CSS样式.css">

2.直接在html页面上的head内通过style标签直接书写CSS代码

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

3.行内式（直接在标签内部通过style属性直接书写）不推荐使用

<h1 style="color:orchid">我是Oscar</h1>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="CSS样式.css">
    <style>
        h1{
            color: greenyellow;
        }
    </style>
</head>
<body>
   <h1 style="color:orchid">我是Oscar</h1>
</body>
</html>

三、选择器

1.基本选择器

元素选择器

id选择器

类选择器

通用选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*!*让页面上所有的span变成红色  标签选择器 直接写标签名字即可 *!*/
        /*span{*/
            /*color: red;*/
        /*}*/
        /* id选择器  #+id值*/
        /*#d1{*/
            /*color: yellow;*/
        /*}*/
        /*!*类选择器   .+类值*!*/
        /*.c1{*/
            /*color: orchid;*/
        /*}*/
        /*通用选择器  */
        *{
            color: aqua;
        }
    </style>
</head>
<body>
<p class="c1">p</p>
<span id="d3" class="c2 c1">span</span>
<div id="d2" class="c1">div
    <span>span</span>
</div>
<p id="d1" class="c1">p
<span>span</span>
</p>sjjdd
<a href> sjhshdhg</a>
</body>
</html>

2.组合选择器

div span

div>span

div+span

div~span

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

3.属性选择器

任何的标签都有自己的默认的属性 id class

标签还支持自定义任何多的属性（也就意味着可以让标签帮你携带一些额外的数据）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*1.含有某个属性名的标签
        2.含有某个属性名并且属性值是...的标签
        3.找p标签并且含有某个属性名 属性值是...的标签*/
        /*[password]{*/
            /*color:red;*/
        /*}*/
        /*[username='ksj']{*/
            /*color: orange;*/
        /*}*/
        span[username='dsd']{
            color: orchid;
        }
    </style>
</head>
<body>
<p username="ksj">ppp</p>
<p username="eeww">ppp</p>
<p username="seed">ppp</p>
<span username="dsd">span</span>
<span password="123">span</span>
<div password>div</div>
</body>
</html>

4.分组与嵌套

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
       /*#d1{*/
           /*color: red;*/
       /*}*/
        /*.c1{*/
            /*color: blue;*/
        /*}*/
        /*p{*/
            /*color: aqua;*/
        /*}*/
        /*div,span,p{*/
            /*color: aquamarine;*/
        /*}*/
        #d1,.c1,p{
            color: orangered;
        }
    </style>
</head>
<body>
<div id="d1">div</div>
<span class="c1">span</span>
<p class="c2">p</p>
</body>
</html>

5.伪类选择器

a标签有四种状态

1.没有被点击过

2.鼠标悬浮上面

3点击之后不松手

4点击之后再回去

我们将input框鼠标点进去之后的那个状态 input获取焦点聚焦 focus 鼠标移出去之后的状态叫做input框失去焦点

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
       a:link{
           color:red;
       }
        a:hover{
            color: aquamarine;
        }
        a:active{
            color: yellow;
        }
        a:visited{
            color: deeppink;
        }
        input:focus{
            background-color: yellow;
        }
        span:hover{
            background-color: darkred;
        }
    </style>
</head>
<body>
<a href="http://fanyi.youdao.com/">点我吧</a>
<input type="text">
<span>span</span>
</body>
</html>

5.伪元素选择器（清除浮动带来的负面影响）：可以通过CSS添加文本内容

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

6.选择器优先级：

选择器相同的情况下引入方式不同

遵循就近原则谁离标签更近就听谁的

选择器不同的情况下

行内选择器>id选择器>类选择器>元素选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--<style>-->
        <!--p{-->
            <!--color: red;-->
        <!--}-->
    <!--</style>-->
    <!--<link rel="stylesheet" href="CSS.css">-->
    <style>
           <!--/*#d1{*/-->
               <!--/*color: blue;*/-->
           <!--/*}*/-->
          <!--/*.c1{*/-->
              <!--/*color: orangered;*/-->
          <!--/*}*/-->
          <!--p{-->
              <!--color: aqua;-->
          <!--}-->
    <!--</style>-->
</head>
<body>
<p style="color: pink">苍茫的天涯是我的爱，绵绵的青山脚下花正开</p>
<p id="d1" class="c1" style="color: aquamarine">苍茫的天涯是我的爱，绵绵的青山脚下花正开</p>
</body>
</html>

CSS.cssp{color: greenyellow}

posted on 2019-11-13 20:35 wtfss 阅读(198) 评论(0) 收藏举报