简易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应用-解决上下重叠》
 -->
原文地址:https://www.cnblogs.com/zhang-hong/p/12615232.html