day 43

day 45 form表单 选择器

01. form表单

1. form表单能够获取用户输入（文本，选择，上传的文件），并且将输入的内容传给后端

2. 参数

   1. action 控制数据提交的地址

      三种书写方式

      1. 不写 默认朝当前这个页面所在的地址提交数据
      2. 写全路径(https://www.baidu.com)
      3. 只写路径后缀（/index/）会自动将当前地址进行拼接

   2. method 控制数据提交的方式

      1. get form表单默认发送get请求
      2. post

3. 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"

4. select 标签 下拉框

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

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

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

5. textarea标签 获取大段文本

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

02. css

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

注释/*单行注释*/

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

/*导航条样式*/

/*通用样式*/

/*轮播图样式*/

1. css的语法结构

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

2. 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>
      

3. 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选择器(其次) > 类选择器(最常用) > 元素选择器