H5学习之内容分栏、emmet、display总结

内容分栏：
HTML：

<body>
    <article>
        <h1></h1>
        <section></section>
        <section>
            <h2></h2>
            <p></p>
            <p></p>
            <p></p>
        </section>
        <section>
            <h3></h3>
            <p></p>
            <h3></h3>
            <p></p>
        </section>
    </article>
</body>

CSS:

        article{
            margin: 50px;
            -moz-column-count: 3;
            -webkit-column-count: 3;
            /*分栏数量*/

            -moz-column-rule: 1px solid gray;
            -webkit-column-rule: 1px solid gray;
            /*分割线 于边框线不同 分栏线不会将内容区域撑大或压小*/

            -moz-column-gap: 60px;
            -webkit-column-gap: 60px;
        }
        article h1{
            -moz-column-span: all;
            /*目前火狐浏览器还不支持分栏合并*/
            -webkit-column-span: all;
            /*分栏合并*/
        }

emmet:

HTML:

<body>
    <!--
        >子代  +同级  ^上一级  ()整体部分  .Class  #ID
        $排序  @-倒序 
        -->
    
    <!--nav>ul>li*3-->
    <nav>
        <ul>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </nav>    

    <!--div+p+section-->
    <div></div>
    <p></p>
    <section></section>
    
    <!--div+div>p>span+em^^bq-->
    <div></div>
    <div>
        <p><span></span><em></em></p>
    </div>
    <blockquote></blockquote>    

    <!--div(header>ul>li*2>a)+footer>p-->
    <div>
        <header>
            <ul>
                <li><a href=""></a></li>
                <li><a href=""></a></li>
            </ul>
        </header>
    </div>
    <footer>
        <p></p>
    </footer>  

    <!--(div>dl(dt+dd)*3)+footer>p-->
    <div>
        <dl>
            <dt></dt>
            <dd></dd>
        </dl>
        <dl>
            <dt></dt>
            <dd></dd>
        </dl>
        <dl>
            <dt></dt>
            <dd></dd>
        </dl>
    </div>
    <footer>
        <p></p>
    </footer>

    <!--div.c11#i3-->
    <div class="c11" id="i3"></div>

    <!--ul>li.item$*5-->
    <ul>
        <li class="item1"></li>
        <li class="item2"></li>
        <li class="item3"></li>
        <li class="item4"></li>
        <li class="item5"></li>
    </ul>

    <!--h$[title=item$]{Header $}*3-->
    <h1 title="item1">Header 1</h1>
    <h2 title="item2">Header 2</h2>
    <h3 title="item3">Header 3</h3>

    <!--ul>li.item$$$*5-->
    <ul>
        <li class="item001"></li>
        <li class="item002"></li>
        <li class="item003"></li>
        <li class="item004"></li>
        <li class="item005"></li>
    </ul>  

    <!--ul>li.item$@-*8-->
    <ul>
        <li class="item8"></li>
        <li class="item7"></li>
        <li class="item6"></li>
        <li class="item5"></li>
        <li class="item4"></li>
        <li class="item3"></li>
        <li class="item2"></li>
        <li class="item1"></li>
    </ul>    

    <!--ul>li.item$@3*5-->
    <ul>
        <li class="item3"></li>
        <li class="item4"></li>
        <li class="item5"></li>
        <li class="item6"></li>
        <li class="item7"></li>
    </ul>    

    <!--#header-->
    <div id="header"></div>

    <!--form#search.wide    -->
    <form action="" id="search" class="wide"></form>
</body>

display总结:

HTML:

<body>
    这里是表格前面
    <table border="1">
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
        <tr>
            <td>4</td>
            <td>5</td>
            <td>6</td>
        </tr>
        <tr>
            <td>7</td>
            <td>8</td>
            <td>9</td>
        </tr>
    </table>
    <span>这是表格后面</span>
    <div>
        <section>affsda</section>
        <section>affsda</section>
        <section>affsda</section>
    </div>
     使用list-item能够形成列表项效果 但不能明确表示列表含义
     
    <div class="table">
        <div class="caption">这里是标题</div>
        <div class="tr">
            <div class="td">1</div>
            <div class="td">2</div>
            <div class="td">3</div>
        </div>
        <div class="tr">
            <div class="td">4</div>
            <div class="td">5</div>
            <div class="td">6</div>
        </div>
        <div class="tr">
            <div class="td">7</div>
            <div class="td">8</div>
            <div class="td">9</div>
        </div>
    </div>
    使用table-*能够形成表格效果 但不能明确表格含义
    而且合并单元格等表格高级功能无法实现
    
</body>

CSS:

        table{
            display: inline-block;
            /*设置元素的垂直对齐方式*/
            vertical-align: middle;
        }
        section{
            display: list-item;
            /*变成列表项 注意需要配合下面的样式*/
            list-style-type: circle;
            margin-left: 2em;
        }
        .table{
            border: 1px solid blue;
            display: table;
            border-spacing: 0;
            border-collapse: collapse;
        }
        .td{
            display: table-cell;
            border: 5px solid red;
            padding: 5px 20px;
        }
        .tr{
            display: table-row;
            /*不加此样式水平边框线合并不正常*/
        }
        .caption{
            display: table-caption;
            text-align: center;
        }