HTML5+CSS

 怪异盒模型
      成为怪异盒模型
      border-box怪异盒模型/content-box标准盒模型
      怪异盒模型和标准盒模型之间的区别
      标准盒模型 padding和border是加载width之外的，
      怪异盒模型 padding和border是加在width之内的,不会改变盒子整体的大小。

一、表格
  1.作用：展示数据信息。多用于后台管理系统。
  2.格式和组成
    <table>        表格
      <tr>         行
        <td></td>  单元格（竖向的单元格构成列）
        <td></td>
        <td></td>
      </tr>
      <tr>
        <td></td>
        <td></td>
        <td></td>
      </tr>
      <tr>
        <td></td>
        <td></td>
        <td></td>
      </tr>
    </table>
  3.表格的css属性
    <1>border-spacing(写在table)     单元格外间距（当值为0时，可以合并外间距）
    <2>border-collapse(写给table)
      collapse          合并单元格边框
      separate(默认值)   不合并单元格边框
      作用：可以解决border-spacing合并边框线时，边框线无法完全合并的问题  
    <3>empty-cells       空白单元格是否显示(写给table)
      hide                隐藏
      show(默认值)        显示  
      注意：在我们设置border-collapse:collapse;时看不到任何效果。
  4.表格的特点
    表格会根据单元格内是否有内容来自动分配空间，有内容的或者内容多的，
    我就多分点，没有内容的或者内容少的我就少分点。这样能保证每个格子的
    内容都不会溢出。但是在某行或者某列都没有内容时，这个布局就会显得很难看。
    如何解决呢？（使用table-layout和height解决）
    总结：如果你想固定每个td的大小，让每个td不会随着内容多少而改变，建议
    宽度使用table-layout:fixed;分配，高度通过给td添加高度分配。
  5.合并单元格
    <1>合并行   竖向合并  rowspan
      合并方法：
        从哪个td开始合并，就给那个td添加rowspan,要合并几行，
        就从当前行的下一行开始，对应的n-1行内，每行删去一个td。
    <2>合并列   横向合并  colspan
      合并方法：
      从哪个td开始合并，就给那个td添加colspan,要合并几列，
      就从当前行的这个td开始，删除对应的n-1个td.
      存在的问题：如果有一列从开始到结束都没有单独存在过，那么在自动
      分配宽度时，这一列将不会存在。（可以通过table-layout:fixed;解决）
  6.table表格中标签
    <1>caption      表格标题(需要写在table里边)
    <2>表格行分组
      <thead></thead>    表头    th一般用在表头里，给表头里边的作为小标题
      <tbody></tbody>    表体(表格中必定存在表体)
      <tfoot></tfoot>    表尾
    <3>表格列分组  <colgroup span=''></colgroup>（需要写在table里边）
      span里边写要将几列分为一组。
二、表单  
  1.作用：用来收集用户数据信息（用于登陆注册和信息录入页面）
  2.表单的组成：
      表单框、提示信息、表单控件
  3.表单框    form
    <1>特点：所有的表单控件都必须写在表单框里边，表单控件脱离了表单框无效。
    <2>结构<from action='' method=''></form>
      action    提交数据的接口地址
      method    提交方式
        get       数据在地址栏传递      
        post      数据在请求体传输（安全性高和传输大小可以更高）
        put
        delete
        建议：
          1、get方式的安全性较Post方式要差些，包含机密信息的话，建议用Post数据提交方式；
          2、在做数据查询时，建议用Get方式；而在做数据添加、修改或删除时，建议用Post方式；
    4.表单控件
      回顾：
        <1>input  
          ——value      默认文本，默认值
          ——name       参数名
          ——tpye       控件类型
            text        文本框
            password    密码框
            submit      提交按钮
            reset       重置按钮
          ——placeholder     提示文本信息
        补充：
            button    普通按钮
            radio     单选框（需要搭配name分组使用）
            checkbox  复选框（需要搭配name分组使用）
        <2>select>option     下拉框
          select      下拉框
          option      下拉选项
        <3>textarea           文本域
            特点：可以随意改变大小。
            设置 resize:none;可以取消
    5.表单的其他标签
      <1>label     标签绑定
        格式：<label for='xxx'>标签的文字信息</label>
              <input type='text' id='xxx'>
        功能：将label里边的文字信息和对应id名的标签进行绑定。
      <2>lengend   字段集标题（一般放在fieldset里边使用）
      <3>fieldset  表单字段集
          表单字段集可以对表单中的内容进行分类