前端 day14

一、表格标签属性补充

      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>

二、表格重要的html属性

    1.colspan=””

    2.rowspan=””

    3.cellspacing=””

    4.cellpading=””

    5.rules=””          分隔线

       属性值：all/rows/cols/groups

三、表格css属性补充

    1.相邻单元格边框合并

              属性：    border-collapse：；(添加在table里)

              属性值：separate   分开状态

                             collapse    合并

    2.相邻单元格之间的间距(添加在table里)

              border-spacing:;

    3.是否显示单元格区域

              属性：  empty-cells:;

             属性值：show     显示

                           hide      隐藏

   4.table-layout：；

          auto   默认值：根据内容分配宽度

                   优点：灵活

                   缺点：性能消耗较大

         fixed  不再根据内容的多少分配宽度

                  优点：性能消耗低

                  缺点：不灵活

四、单元格内容对宽度的影响

      单元格默认宽度状态：根据内容的多少分配。内容多，分配宽就多

五、表单的作用（收集用户信息）

      <form action=”数据提交的路径” name=”” method=”数据提交方式”></form>.

六、表单控件

     1.<input type=”text”>       文本框

     2.< input type=”password”>  密码框

     3.< input type=”submit”>    提交按钮

     4.< input type=”reset”>      重置按钮

     5.< input type=”button”>     空按钮

    补充

          1.单选按钮

             <input type=”radio”>

             在单选按钮里：每一组单选按钮要和name属性保持一致。

          2.多选按钮(复选框)

             <input type=”checkbox”>

          3.下拉列表（下拉菜单）

             <select>

                    <option></option>

                    <option></option>

                    <option></option>

                       …….

            </select>

         4.多行文本框

            <textarea></textarea>

           col和rows以字符为单位，不常用。

         5.上传文件框

            <input type=”file”>

七、补充表单的html属性

   1.默认选中

      checked=”checked”

   2.表单控件的禁用

     disabled=”disabled“

   3.下拉列表里的默认选中

     selected=”selected”

八、表单里的标签

   1.fieldset（表单字段集）

       作用：给表单做分组

       特点：默认情况下自带边框

   2.legend（字段集标题）

       作用：是fieldset一组里面的一个标题

       特点：一般情况下，放在fieldset第一个子元素

   3.<label for=””></label.>

       说明：label里面放的是提示信息

       for上下：绑定对应控件的id名称

九、BFC（布局逻辑）

   1.定义：BFC(block formatting content)直译为“块级格式化上下文”它是也个独立的渲染区域，只有block-level box（块）参与，                 它规定了内部的block-level box如何布局，它与外部区域毫不相干。

    2.BFC布局规定：

             1.内部的box 会在垂直方向一个接一个的放置；

             2.box垂直方向的距离 由margin决定，属于同一个BFC的两个相邻的box的margin会发生重叠，并按照最大margin值设                     置；

    

             3.每个元素的margin box的左边，与包含块border box的左边相接触；

             4.BFC的区域不会与float box重叠；

             5.BFC是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素；

             6. 计算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。

   4.应用

           1.解决高度塌陷；

           2.防止margin值上下重叠；

           3.布局（还没讲）