一、HTML表单标签
1.概念:
   用于采集用户输入的数据,用于和服务器进行交互
2.使用的标签:
   <form>: form 标签用来定义采集用户数据的范围
   *属性:
  action:指定提交数据的位置
  method:指定提交方式
    取值: 在http协议中一共有7种,在HTML中有两种
get和post的区别(面试题)******
    get:
     请求参数会在地址栏显示,会封装在请求行中
     请求参数的长度是有限制的
  不太安全
    post:
  请求参数不会在地址栏中显示,会封装在请求体中
  请求参数的大小没有限制
  相对较为安全
  文件上传请求方式只能是post
*表单中项中的数据要想被提交,必须指定其name属性
   <form action= url method = "get">
    用户名:<input name = "username">
    密码:<input  name = "password">
    提交按钮:<input type = "submit" value = "登陆">
    </form>
3.表单项标签******必须加入name属性!部分表单项标签还需要提供value属性!
   -input: 可以通过type属性值,改变元素展示的样式
     *type属性****** 10个type属性必须会背~!!!!!
  text/password/hidden/radio/checkbox/
     **text:文本输入框,是默认值
     placehoder = "" 指定输入框的提示信息
  **password:密码输入框
  **hidden:隐藏域 可以用value设置它的值,携带隐藏数据提交
  **radio:单选框  -->共同的name,还应该有value并赋值
  **checkbox:复选框  -->共同的name,还应该有value并赋值
     注意:
     <input name ="gender" type = "radio" value = "1" checked = "checked">
     checked属性默认值为checked
     place
  **file:文件选择框
  **submit:提交按钮  -->将标签项中的内容提交给 form指定的地址
  **button:一个按钮  -->可以和javaScript联合使用
  **image:一个图片提交按钮  <input type = "image" src = "">
  **reset:重置
  //了解
  **color:拾色器
  **date/datetimelocal:时间
  **email:邮箱  -->会进行正则校验
     *label 标签:指定输入项的文字描述信息
     <label for = "username">用户名</label> <input name="" type="" id="username">
  label中的for属性和 表单项中的Id值对应
   -select:下拉列表
     *<option>用来指定列表项
      <select name="">
      <option value=""> --请选择-- </option>
   <option value="1"> 内容 </option>
   </select>
   *selected属性:可以定义默认
   -textarea:文本域
      <textarea name="" rows="" cols="">:
     *cols属性:指定列数,每一行有多少个字符
  *rows属性:默认多少行
   -button:按钮
        <button>按钮名称</button>
       *和<input type = "button" name="按钮名称">作用一样
   
二、CSS:页面美化和布局控制
1.CSS概述 Cascading Style Sheets 层叠样式表
1)层叠:多个样式可以作用在同一个html元素上,同时生效
2)CSS的好处:
   -功能强大
   -将内容的展示和样式的控制分离
      降低耦合度.解耦
   让分工协作更容易
   提高开发效率
2.CSS的使用:CSS与HTML的结合方式
1)行内式
  -在标签内使用style属性指定css代码
  *如:<div style="color:blue;">内容<>
2)内联式
  -在head标签内,定义style标签,styl标签的标签体内容就是css代码
  * 如:<style>
       选择器{
           color:blue;
        }
  </style>
3)外链式
  -定义css资源文件
  -在head中通过link引入css资源文件
  <link rel="stylesheet" href="css文件的路径.css">
4)注意:
   *1/2/3种方式,css作用范围越来越大
   *1方式不常用
   !!!!行内式 > 内联式 > 外链式
3.CSS语法:
1)CSS语法格式
    选择器{
     属性名:属性值;
  属性名:属性值;
  ...
  }
    注:值不一定是一个有可能是一个集合,如 border:1px solid ....
2)选择器:筛选具有相似特征的元素
4.选择器*****:筛选具有相似特征的元素
1)基础选择器
    -id选择器:选择具体的id属性值的元素,建议在一个HTML页面中id值唯一
   #id名称{}
   *例:
    #div1{}
    <div id="div1">内容</div>
-元素选择器:选择具有相同标签名称的元素
   标签名称{}
   *例:
    div{}
    <div>内容</div>
-类选择器:选择具有相同class属性值的元素
   .class名称{}
    *例:
     .cls1{}
     <div class="cls1">内容</div>
   *注意:选择优先级:id>class>标签
2)扩展选择器
   -*通用选择器:任意元素都被选中
   -并列选择器
  选择器1,选择器2...{
    属性名:属性值
  }
   -后代选择器:筛选选择器1元素下的所有选择器2元素
     选择器1 选择器2{}
   -子元素选择器:筛选选择器1的子元素选择器2
     选择器1>选择器2{}
  注意:子元素选择器尽量不要用div,有Bug
   -属性选择器:
      元素名称[属性名="属性值"]{} 选择属性名="属性值"的标签
      元素名称[属性名]{} 选择有该属性名的标签
   -伪类选择器:选择一些元素具有的状态(了解)
      元素名称:状态{}
   *例:
    <a>标签
      *状态
     **link:初始化的状态
     **visited:被访问过的状态
     **active:正在访问状态
     ** 鼠标悬浮
  
5.CSS的属性
1)字体/文本
    *font-size:字体大小
*color:文本颜色
*text-align:对其方式
*line-height:行高
2)背景
    *background:颜色 图片 align
   图片:url("")
*background-color:颜色
3)边框
    *border: 边框宽度 线型 颜色
4)尺寸
    *height:高度
*weidth:宽度
5)盒子模型****控制布局
*margin:外边距
   margin:auto-自动居中
    *padding:内边距
   默认情况下内边距会影响整个盒子的大小
   解决方案:设置盒子的hight和width就是最终盒子的大小
   box-sizing:border box
*float:浮动
   float:right/left:将块级标签变为左右排版

一、HTML表单标签
1.概念:
   用于采集用户输入的数据,用于和服务器进行交互
2.使用的标签:
   <form>: form 标签用来定义采集用户数据的范围
   *属性:
  action:指定提交数据的位置
  method:指定提交方式
    取值: 在http协议中一共有7种,在HTML中有两种
get和post的区别(面试题)******
    get:
     请求参数会在地址栏显示,会封装在请求行中
     请求参数的长度是有限制的
  不太安全
    post:
  请求参数不会在地址栏中显示,会封装在请求体中
  请求参数的大小没有限制
  相对较为安全
  文件上传请求方式只能是post
*表单中项中的数据要想被提交,必须指定其name属性
   <form action= url method = "get">
    用户名:<input name = "username">
    密码:<input  name = "password">
    提交按钮:<input type = "submit" value = "登陆">
    </form>
3.表单项标签******必须加入name属性!部分表单项标签还需要提供value属性!
   -input: 可以通过type属性值,改变元素展示的样式
     *type属性****** 10个type属性必须会背~!!!!!
  text/password/hidden/radio/checkbox/
     **text:文本输入框,是默认值
     placehoder = "" 指定输入框的提示信息
  **password:密码输入框
  **hidden:隐藏域 可以用value设置它的值,携带隐藏数据提交
  **radio:单选框  -->共同的name,还应该有value并赋值
  **checkbox:复选框  -->共同的name,还应该有value并赋值
     注意:
     <input name ="gender" type = "radio" value = "1" checked = "checked">
     checked属性默认值为checked
     place
  **file:文件选择框
  **submit:提交按钮  -->将标签项中的内容提交给 form指定的地址
  **button:一个按钮  -->可以和javaScript联合使用
  **image:一个图片提交按钮  <input type = "image" src = "">
  **reset:重置
  //了解
  **color:拾色器
  **date/datetimelocal:时间
  **email:邮箱  -->会进行正则校验
     *label 标签:指定输入项的文字描述信息
     <label for = "username">用户名</label> <input name="" type="" id="username">
  label中的for属性和 表单项中的Id值对应
   -select:下拉列表
     *<option>用来指定列表项
      <select name="">
      <option value=""> --请选择-- </option>
   <option value="1"> 内容 </option>
   </select>
   *selected属性:可以定义默认
   -textarea:文本域
      <textarea name="" rows="" cols="">:
     *cols属性:指定列数,每一行有多少个字符
  *rows属性:默认多少行
   -button:按钮
        <button>按钮名称</button>
       *和<input type = "button" name="按钮名称">作用一样
   
二、CSS:页面美化和布局控制
1.CSS概述 Cascading Style Sheets 层叠样式表
1)层叠:多个样式可以作用在同一个html元素上,同时生效
2)CSS的好处:
   -功能强大
   -将内容的展示和样式的控制分离
      降低耦合度.解耦
   让分工协作更容易
   提高开发效率
2.CSS的使用:CSS与HTML的结合方式
1)行内式
  -在标签内使用style属性指定css代码
  *如:<div style="color:blue;">内容<>
2)内联式
  -在head标签内,定义style标签,styl标签的标签体内容就是css代码
  * 如:<style>
       选择器{
           color:blue;
        }
  </style>
3)外链式
  -定义css资源文件
  -在head中通过link引入css资源文件
  <link rel="stylesheet" href="css文件的路径.css">
4)注意:
   *1/2/3种方式,css作用范围越来越大
   *1方式不常用
   !!!!行内式 > 内联式 > 外链式
3.CSS语法:
1)CSS语法格式
    选择器{
     属性名:属性值;
  属性名:属性值;
  ...
  }
    注:值不一定是一个有可能是一个集合,如 border:1px solid ....
2)选择器:筛选具有相似特征的元素
4.选择器*****:筛选具有相似特征的元素
1)基础选择器
    -id选择器:选择具体的id属性值的元素,建议在一个HTML页面中id值唯一
   #id名称{}
   *例:
    #div1{}
    <div id="div1">内容</div>
-元素选择器:选择具有相同标签名称的元素
   标签名称{}
   *例:
    div{}
    <div>内容</div>
-类选择器:选择具有相同class属性值的元素
   .class名称{}
    *例:
     .cls1{}
     <div class="cls1">内容</div>
   *注意:选择优先级:id>class>标签
2)扩展选择器
   -*通用选择器:任意元素都被选中
   -并列选择器
  选择器1,选择器2...{
    属性名:属性值
  }
   -后代选择器:筛选选择器1元素下的所有选择器2元素
     选择器1 选择器2{}
   -子元素选择器:筛选选择器1的子元素选择器2
     选择器1>选择器2{}
  注意:子元素选择器尽量不要用div,有Bug
   -属性选择器:
      元素名称[属性名="属性值"]{} 选择属性名="属性值"的标签
      元素名称[属性名]{} 选择有该属性名的标签
   -伪类选择器:选择一些元素具有的状态(了解)
      元素名称:状态{}
   *例:
    <a>标签
      *状态
     **link:初始化的状态
     **visited:被访问过的状态
     **active:正在访问状态
     ** 鼠标悬浮
  
5.CSS的属性
1)字体/文本
    *font-size:字体大小
*color:文本颜色
*text-align:对其方式
*line-height:行高
2)背景
    *background:颜色 图片 align
   图片:url("")
*background-color:颜色
3)边框
    *border: 边框宽度 线型 颜色
4)尺寸
    *height:高度
*weidth:宽度
5)盒子模型****控制布局
*margin:外边距
   margin:auto-自动居中
    *padding:内边距
   默认情况下内边距会影响整个盒子的大小
   解决方案:设置盒子的hight和width就是最终盒子的大小
   box-sizing:border box
*float:浮动
   float:right/left:将块级标签变为左右排版