day 43

day 45 form表单选择器

01. form表单

form表单能够获取用户输入（文本，选择，上传的文件），并且将输入的内容传给后端
参数
1. action 控制数据提交的地址
  
  三种书写方式
  1. 不写默认朝当前这个页面所在的地址提交数据
  2. 写全路径(https://www.baidu.com)
  3. 只写路径后缀（/index/）会自动将当前地址进行拼接
2. method 控制数据提交的方式
  1. get form表单默认发送get请求
  2. 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类型来展示不同的功能

type属性值	表现形式	对应代码
text	单行输入文本	`<input type="text" />`
password	密码输入框	`<input type="password" />`
date	日期输入框	`<input type="date" />`
checkbox	复选框	`<input type="checkbox" checked="checked" />`
radio	单选框	`<input type="radio" />`
submit	提交按钮	`<input type="submit" value="提交" />`
reset	重置按钮	`<input type="reset" value="重置" />`
button	普通按钮	`<input type="button" value="普通按钮" />`
hidden	隐藏输入框	`<input type="hidden" />`
file	文本选择框	`<input type="file" />`

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

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

选择的标签通过checkbox来设置默认选中项 checked=’checked' 当属性名和值相同时可以只写属性名

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

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

form表单如果要提交文件数据，必须要修改以下参数

enctype="multipart/form-data"

select 标签下拉框

一个个option标签就是一个个的选项

默认是单选，可以通过添加一个multiple参数使其变成多选

<select name='city' multiple>
  <option value="sh">上海</option>
  <option value="bj">北京</option>
  <option value="sz">深圳</option>
</select>
标签内的信息是显示给用户看到value的值才是返回给后端的真实值

textarea标签获取大段文本

<textarea name='info' id='12' cols='100' rows='30'></textarea>

02. css

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

注释/*单行注释*/

通常在写css的时候会单独将代码写到一个css文件中，里面只有css代码

/*导航条样式*/

/*通用样式*/

/*轮播图样式*/

css的语法结构

选择器 {属性1:属性值1}
css的三种引入方式
1. 通过link标签引入外部的css文件（最正规用法）
```
<link rel='stylesheet' href='css文件路径'>
```
2. 直接在html页面上的head内通过style标签直接书写css代码
```
<style>
  h1{
    color:green;
  }
</style>
```
3. 行内式（直接在标签内部通过style属性直接书写）不推荐使用
```
<h1 style='color:rad;'>
  展示内容
</h1>
```
css查找
1. 基本选择器
  1. 元素选择器
  2. id选择器
  3. 类选择器
  4. 通用选择器
2. 组合选择器
  1. div span 内部所有
  2. div>span 内部一层的
  3. div～span同级下面的
  4. div~span 同级紧挨着下面的
3. 属性选择器
  
  任何标签都有自己默认的属性 id class
  
  标签还支持你自定义任何多的属性（也就意味着可以让标签帮你携带一些额外的数据）
4. 伪类选择器
  
  a 标签有四种状态
  1. link 没有被点击过
  2. hover 鼠标悬浮在上面
  3. active 点击上不松手
  4. visited 点击过后
  我们将input框鼠标点进去之后的那个状态叫做input获取焦点聚焦focus
  
  鼠标移出之后的状态被称之为input框失去焦点
5. 伪元素选择器（清除浮动带来的负面影响）
  
  可以通过css添加文本内容
6. 选择器优先级
  1. 选择器相同的情况下引入方式不同
    
    遵循就近原则，谁离标签近就按照谁的渲染
  2. 选择器不同的情况下
    
    行内选择器 > id选择器(其次) > 类选择器(最常用) > 元素选择器

day 43

day 45 form表单 选择器

01. form表单

02. css

day 45 form表单选择器