form表单和CSS

一、form表单

1. form表单有什么用

能够获取用户输入的信息（输入，选择，上传的文件），并且将这些数据全部发送给后端

2. form表单的用法

（1）有两个重要参数：

action ：控制数据提交的地址
- 三种书写方式：
  1. 不写，默认就是朝当前这个页面所在的地址提交数据
  2. 写全路径，如 http://www.baidu.com
  3. 只写路径后缀（/index/）
method ：控制数据提交的方式
- get form表单默认是get请求
- post
enctype 控制前端朝后端提交数据的编码格式
- 默认是urlencoded
  form表单如果想要传输文件必须要做两件事
  1.method必须是post
  2.必须将默认的urlencoded换成formdata

<body>
	<form action="http://127.0.0.1:8000/index/" method="post" enctype="multipart/form-data">
    </form>
</body>

（2）input 结合 label 一起使用

<body>
	<form action="http://127.0.0.1:8000/index/" method="post" enctype="multipart/form-data">
        
1. 绑定id值方法一
<label for="d1">用户名:<input type="text" id="d1"></label>
绑定id值 之后在浏览器中点击label标签内文字任何的位置都可以自动选中input框

2. 绑定id值方法二
<label for="d2">用户名:</label>
<input type="text" id="d2">
        
     </form>
<body>

（3）input的type参数

根据input的type属性的参数的不同，展示不同的功能，以下都是type的参数

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

input标签的其他属性
- disable 属性，禁用该input框
- value属性，设置默认值
选择的标签，如何默认选中
- radio
  - 添加checked = 'checked' 。当属性名和属性值相同的时候可以只写属性名(******)
- checkbox
  - 添加checked = 'checked' 。当属性名和属性值相同的时候可以只写属性名(******)
select标签：下拉框
- 一个个的option标签就是一个个的选项
- 默认是单选
- 你可以给select标签加一个multiple参数，就可以变成多选
- 在option标签中添加selected属性类似checked，就可以默认选中
textarea 标签获取大段文本
能够触发form表单提交数据的动作的两个标签
- input标签的type = submit
- button标签（input标签的type参数也有button，两者作用不一样）
所有获取用户输入的标签，都应该有name属性（*******）
- name属性就类似于字典的key
- input框获取到的用户输入都会自动放到input框的value属性中，无需自己在添加value属性
针对所有选择框来说，传到后端的数据，由value属性接收再传到后端，所以要手动添加value属性。
form表单如果要提交文件数据，必须修改以下参数
- enctype="multipart/form-data"

二、CSS

1. 什么是css

css就是层叠样式表
css就是用来控制html标签样式的，让其在浏览器上渲染的样式更合适，好看。

2. 注释

单行注释：/*单行注释*/
多行注释：
```
/*
多行注释`1
多行注释2
*/
```
注释的作用
- 通常我们在写css的时候，都会单独写一个css文件，里面只有css代码
- 这时，就用注释来标注和区分一个个功能

3. css的语法结构

选择器 {属性1：属性值1}

4. css的三种引入方式

通过head标签内部的link标签引入外部的css文件（最正规的用法）

<link rel="stylesheet" href="css文件路径（只能放相对路径）">
直接在html页面上的head内通过style标签直接书写css代码

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

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

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

5. css 查找标签方法

（1）基本选择器

元素选择器（即标签选择器）

让页面上的所有该标签都变成红色

标签名 {
            color: red;
        }

id选择器

让id为该id值的标签变成绿色 (# + id值)

#id值 {
            color: green;
        }

类选择器

让类中有c1的标签都变成粉红色 (. +类值)
.c1 {
            color: pink;
        }

通用选择器

让页面的所有标签都变成橘黄色
* {
            color: orange;
        }

（2）组合选择器

后代选择器

只要在标签内部都算作该标签的后代，用1个空格连接
如div 内部的所有span标签：

div span {  
           color: red;
        }

儿子选择器

表示一个标签内部的第一层标签。用 > 连接
如 div内的第一个span是儿子标签，第二个是div的孙子标签
<div>
	<span>adff</span> # div 的儿子标签
	<p>dsfsadf		  # div 的儿子标签
		<span>iuiuio</span> # div 的孙子标签
	</p>
</div>

儿子选择器语法：
div>span {  
            color: green;
            }

弟弟选择器

属于同一级别标签的标签1的之下的标签都是标签1的弟弟标签， 用 ~ 连接

<div>div
    <span>div里面的span</span>
    <p>div里面的p
        <span>div里面的p里面的span</span>
    </p>
    <span>div里面最下面的span</span>
</div>
<p>ppp</p>		   # div 的毗邻标签 也是 # div 的弟弟标签 。当毗邻选择器和弟弟选择器同时出现的时候，以毗邻选择器优先。
<span>span</span>  # div 的弟弟标签
<p>ppp</p>		   # div 的弟弟标签
<span>span</span>  # div 的弟弟标签

弟弟选择器语法：

div~span {
    color : yellow
}

毗邻选择器

毗邻选择器 标签1的下方的第一个同级别标签 ，用 + 连接

<div>div
    <span>div里面的span</span>
    <p>div里面的p
        <span>div里面的p里面的span</span>
    </p>
    <span>div里面最下面的span</span>
</div>
<p>ppp</p>		    # div 的毗邻标签 也是 # div 的弟弟标签 。当毗邻选择器和弟弟选择器同时出现的时候，以毗邻选择器优先。
<span>span</span>  # div 的弟弟标签
<p>ppp</p>		   # div 的弟弟标签
<span>span</span>  # div 的弟弟标签

div+span {
            color: aqua;
        }

（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='jason'] {
            color: black;
        }

        span[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>

（4）伪类选择器

hover状态所有标签都有

a标签有四种状态
1.没有被点击过
2.鼠标悬浮上面
3.点击之后不松手
4.点击之后再回去

依次对应上面a标签的4种状态
<style>
        a:link {
            color: red;
        }
        a:hover {  /*hover表示的就是悬浮的意思*/
            color: black;
        }
        a:active {
            color: orange;
        }
        a:visited {
            color: pink;
        }

input输入框的聚焦状态：
        input:focus {
            background-color: orange;
        }
普通文本的鼠标悬浮状态：
        span:hover {
            background-color: pink;
        }
    </style>

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

（5）伪元素选择器

(清除浮动带来的负面影响)，可以通过css添加文本内容

p标签的文本信息首个字符变大且变成红色：		
		p:first-letter {
            font-size: 48px;
            color: red;
        }
p标签的文本信息首个字符前面加绿色的 * ，content的内容不能被选中       
        p:before {
            content: '*';
            color: green;
        }
p标签的文本信息末尾加上蓝色的 ？	，content的内容不能被选中        
        p:after {
            content: '?';
            color: blue;
        }

6.选择器的优先级

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

遵循就近原则谁离标签更近就听谁的，行内选择器优先级最高

2.选择器不同的情况下

行内选择器 > id选择器(其次) > 类选择器(使用最频繁) > 元素选择器

7.分组与嵌套

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
***************分组写法，把同等级标签写在一起*********************

        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>