前端书写规划，表格table的一些应用以及和div的对比

Day2:

前段书写规范

<!--书写规范  -->
    <!--1.标签换行  -->

    <!--2.标签闭合  -->
    <div>Hello</div>
    <img src="" alt="" />

    <!--3.标签的属性  -->
    <!-- html 不区分大小写  -->
    <!--属性的值可以用双引号或者单引号，默认是双引号，必须保持一致。  -->
    <A HREF="#"></a>

    <!--4.标签缩进  -->
    <div>
        <span>标签缩进</span>
    </div>

    <!--5.注释  -->
    <!--nav section  -->
    <div id="nav"></div>

    <!--main section  -->
    <div id="main"></div>

    <!--footer section  -->
    <div id="footer"></div>


    <!--TODO:modify area  利于团队开发项目，待定功能开发或者完善功能-->


    <!--6.html结构、css样式、js交互，绝对分离  -->

Rows行

Cols列

<!--1.  -->
    <!--2.表格不适合做框架，表格不适用于布局  -->
    <!--3.表格的弱势，表格中的所有行和列加载完后才显示  -->
    <table>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
        </tr>
        <tr>
            <td><img src="https://ss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=2139845984,148790489&fm=58" alt=""></td>
            <td><img src="https://ss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=2139845984,148790489&fm=58" alt=""></td>
            <td><img src="https://ss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=2139845984,148790489&fm=58" alt=""></td>
            <td><img src="https://ss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=2139845984,148790489&fm=58" alt=""></td>
        </tr>
    </table>

    <!--4. cellpadding:设置内容和边框的距离  cellspacing:设置单元格之间的距离  -->
    <table border="1" cellpadding="15" cellspacing="0">
        <tr>
            <td>a1</td>
            <td>b1</td>
            <td>c1</td>
        </tr>
        <tr>
            <td>a2</td>
            <td>b2</td>
            <td>c2</td>
        </tr>
    </table>
    <table border="1" cellpadding="15" >
        <tr>
            <td>1</td>
            <td>2</td>
        </tr>
    </table>

    <!--5.合并单元表格  -->
    <!--跨列 colspan：向右跨多少列  -->
    <table border="1">
        <tr>
            <td colspan="3">1</td>
            <!-- <td colspan="2">2</td> -->
            <!--中间只能跨2列，写2列以上也只跨两列  -->
            <!-- <td>3</td> -->
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
    </table>
    <!--跨行 rowspan： 向下跨多少行-->
    <table border="1">
        <tr>
            <td rowspan="2">1</td>
            <td>2</td>
            <td>3</td>
        </tr>
        <tr>

            <td>2</td>
            <td>3</td>
        </tr>
    </table>

    <!--不能共同使用  -->
    <table border="1">
        <tr>
            <td>1</td>
            <td colspan="2">2</td>
            <!-- <td>3</td> -->
        </tr>
        <tr>
            <td rowspan="2">1</td>
            <td colspan="2">2</td>
            <!-- <td>3</td> -->
        </tr>
        <tr>
            <!-- <td>1</td> -->
            <td>2</td>
            <td>3</td>
        </tr>
    </table>


    <!--type  disc:默认圆形 square：方块 circle：空心圆  -->
    <ul type="none">
        <li><span style="background:red;display:inline-block;width:5px;height:5px;border-radius:3px;margin-bottom:3px;"></span>1</li>
        <li>2</li>
        <li>3</li>
    </ul>


    <!--同等的功能，用table和div布局，加载速度测试  -->