H5 表格表单标签属性补充笔记

  
 第一节：表格属性

    1、表格的作用：显示数据。
    <table>
        <tr>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </table>

    2、表格标签补充:

    （1）表格的数据行分组
            <thead> </thead>                   表头
            <tbody> </tbody>                   表体
            <tfoot>   </tfoot>                    表尾
        注：一个表格有一个表头和表尾 ，但是可以包含多个表体

    （2）<th></th>                               列标题标签
             默认的样式：左右居中  文本加粗

    （3）<caption>  </caption>           表格标题
             标题的位置：
                   css属性： caption-side: left/ right/ top/ bottom
                   注：left/right 有兼容问题：火狐能识别

    （4）<colgroup span="把几列分成一组">  </colgroup>
             数据列分组（了解：应用率不高）
       
    3、表格里面重要的html属性：
          colspan=""
          rowspan=""
          cellspacing=""
          cellpadding=""
          rules=""          分隔线
          属性值：all /rows/cols/groups

    4、表格css属性的补充

       （1）border-collapse:            (添加在table上面)
    相邻单元格边框进行合并 
                属性值：
                             separate     分开状态
                             collapse      合并

       （2）border-spacing:          (添加在table上面)
    相邻单元格之间的间距    
        
       （3）empty-cells:：             （没有内容的时候，让隐藏）
               是否显示单元格区域
               属性值：   
                           show     显示单元格区域
                           hide       隐藏单元格区域

       （4）table-layout:
        属性值：
                        auto     默认值：根据内容分配宽度，内容的量多，分配的宽比较多（自动）
                          （优点：灵活   缺点:性能消耗比较大）
                        fixed    不再根据内容去分配宽度，不受内容的影响，但是可以指定具体的宽度
                          （优点：性能消耗低  缺点：不灵活）

  第二节：表单属性

   1、表单的作用：收集用户信息
        <form action="数据提交的路径" name="" method="数据提交方式"></form>

       表单控件：
        <input type="text">  文本框
        <input type="password">  密码框
        <input type="submit">  提交按钮
        <input type="reset">  重置按钮
        <input type="button">  空按钮
 
   2、补充表单控件：
        （1）单选按钮：
                 <input type="radio">
            注：在单选按钮里面：每一组单选按钮  保持name属性值一致。

        （2）多选按钮（复选框）
               <input type="checkbox">

        （3）下拉菜单（下拉列表）
               <select>
                              <option></option>
                              <option></option>
                              <option></option>
                              ...
               </select>

        （4） 多行文本域
                <textarea></textarea>
                 cols 和 rows  以字符为单位

            注：阻止用户进行缩放  css属性  resize:none;

        （5）上传文件框
                <input type="file">

    3、补充表单的html属性
        （1）checked="checked"
      默认选中
               
        （2）disabled="disabled"
    表单控件的禁用
                 
        （3）selected="selected"
    下拉列表里面的默认选中
                
    4、表单里面的标签
        （1）fieldset                    表单字段集
                 作用：给表单做分组
                 特点：
                          默认情况下自带边框
                          可以进行互相嵌套

        （2）legend                   字段集标题
                 作用： 是fieldset 一组里面的一个标题
                 特点： 一般情况下，放在fieldset第一个子元素位置。

        （3）<label for="">  </label>
                 作用： label里面放的是提示信息
                 for属性：绑定对应控件的id名称

   第三节：BFC  ( 布局逻辑 )    ->  块级格式化上下文

       （1）作用：BFC(Block formatting context)直译为“块级格式化上下文”。它是一个独立的渲染区域，只有Block-level box（块）参与
                 它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。
  
      （2）BFC布局规定：
        一、内部的Box会在垂直方向，一个接一个地放置。
        二、Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠（按照最大margin值设置）
        三、每个元素的margin box的左边， 与包含块border box的左边相接触
        四、BFC的区域不会与float box重叠。
        五、BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。
        六、计算BFC的高度时，浮动元素也参与计算

      （3）BFC触发条件：
        1：html 就是一个BFC
        2: float属性不为none
        3: position为absolute或fixed
        4: display为inline-block, table-cell, table-caption, flex, inline-flex
        5: overflow不为visible