简易table form梳理

<!-- 

    A:表格-table    《双标签，day3上午第一次接触》

        作用：显示信息

    一：table简易案例：

        <table cellspacing="0" cellpadding="0">

            <thead>

              <tr>

                <th>表格头1</th>   

                <th>表格头2</th>

              </tr>

           </thead>       //小总结：<thead><th>为双标签。文字：字体加粗，左右居中

            

            <tbody>

                <tr>

                    <td>内容1</td>

                    <td>内容2</td>

                </tr>

                <tr>

                    <td>内容3</td>

                    <td>内容4</td>

                </tr>

            </tbody>

        </table>

    二：表格标签补充:   《day14/上午/03表格补充》

    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属性：

    colspan=""

    rowspan=""

    cellspacing=""

    cellpadding=""

    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   不再根据内容去分配宽度（优点：性能消耗低  缺点：不灵活）

 -->

<!-- 

    B：表单form  《双标签，day14/下午/06表单补充》

    一：简易案例：

        <form action="">

        <select name="" id="">

            <option value="1990">1990</option>

            <option value="1991">1991</option>

            <option value="1992">1992</option>

            <option value="1993">1993</option>

            <option value="1994">1994</option>

            <option value="1995" selected>1995</option>

            <option value="1996">1996</option>

            <option value="1997">1997</option>

        </select>

        <textarea name="" id=""></textarea> 

        <input type="file">

        <fieldset>

            <legend>第一组的标题</legend>

        </fieldset>

    </form>

    二： 

    表单的作用：收集用户信息

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

    表单控件：

        <input type="text">  文本框

        <input type="password">  密码框

        <input type="submit">  提交按钮

        <input type="reset">  重置按钮

        <input type="button">  空按钮

    补充表单控件：

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

    补充表单的html属性

        1：默认选中

            checked="checked"

        2: 表单控件的禁用

            disabled="disabled"

        3: 下拉列表里面的默认选中

            selected="selected"

 

    表单里面的标签：

        fieldset（表单字段集）

            作用：给表单做分组

            特点：

                默认情况下自带边框

                可以进行互相嵌套

        legend （字段集标题）

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

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

        <label for=""></label>

            说明：

                label里面放的是提示信息

                for属性：绑定对应控件的id名称

-->

<!-- 

  C:    BFC ( 布局逻辑 )    ->  块级格式化上下文 《day14/下午/08-BFC》

    

    BFC布局规定：

    一、内部的Box会在垂直方向，一个接一个地放置。

    二、Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠（按照最大margin值设置）

    三、每个元素的margin box的左边， 与包含块border box的左边相接触

    四、BFC的区域不会与float box重叠。

    五、BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。

    六、计算BFC的高度时，浮动元素也参与计算

    

    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

    应用： 解决高度塌陷     《day14/下午/09-BFC应用-解决高度塌陷》

          解决margin的上下重叠      《day14/下午/09-BFC应用-解决上下重叠》

 -->