emmet语法学习及表格案例

emmet语法学习

1.打开html结构的方式

使用html:5或者!+tab创建

2.标签/元素的两个常用属性，id和class

2.1 id用#代替，例如：
<div id="box">box</div>可以使用div#box{box}生成，由于div属于默认属性可以不写，所以可以使用#box{box}来生成

2.2 class用.代替，例如：
<div class="container">content</div>可以使用.container{comtent}来生成

3.层级元素：父子、兄弟

3.1 父子关系使用>实现，例如：

<ul>
    <li><a href="">首页</a></li>
    <li><a href="">教程</a></li>
    <li><a href="">社区</a></li>
</ul>

首先使用ul>li>a{首页}生成

<ul>
    <la><a href="">首页</a></la>
</ul>

再使用li>a{教程}，li>a{社区}来生成即可完成

3.2 兄弟关系使用+来实现，例如：

   <div class="title">名称</div>
<div class="url">网址</div>

可以通过.title{名称}+.url{网址}来实现

4.重复关系

重复关系可以使用*来实现,例如：

<ul>
    <li><a href="">首页</a></li>
    <li><a href="">教程</a></li>
    <li><a href="">社区</a></li>
</ul>

我们可以通过ul>li*3>a{文字}来实现

5.序号

序号可以通过@和$来实现，例如：

5.1 @：指定其实索引

<ul class="menu">
    <li class="item"><a href="">item5</a></li>
    <li class="item"><a href="">item6</a></li>
    <li class="item"><a href="">item7</a></li>
    <li class="item"><a href="">item8</a></li>
</ul>

可以通过ul.menu>li.item*4>a{item$@5}来实现

5.2 $默认从1开始递增，升序

<ul class="menu">
    <li class="item"><a href="">item1</a></li>
    <li class="item"><a href="">item2</a></li>
    <li class="item"><a href="">item3</a></li>
    <li class="item"><a href="">item4</a></li>
</ul>

可以通过ul.menu>li.item*4>a{item$}来实现

6.表格制作案例

<table>
    <caption>运动员表</caption>
    <thead>
        <tr>
            <th>xxx</th>
            <th>xxx</th>
            <th>xxx</th>
            <th>xxx</th>
            <th>xxx</th>
            <th>xxx</th>
            <th>xxx</th>
            <th>xxx</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>xxx</td>
            <td>xxx</td>
            <td>xxx</td>
            <td>xxx</td>
            <td>xxx</td>
            <td>xxx</td>
            <td>xxx</td>
            <td>xxx</td>
        </tr>
        <tr>
            <td>xxx</td>
            <td>xxx</td>
            <td>xxx</td>
            <td>xxx</td>
            <td>xxx</td>
            <td>xxx</td>
            <td>xxx</td>
            <td>xxx</td>
        </tr>
        <tr>
            <td>xxx</td>
            <td>xxx</td>
            <td>xxx</td>
            <td>xxx</td>
            <td>xxx</td>
            <td>xxx</td>
            <td>xxx</td>
            <td>xxx</td>
        </tr>
        <tr>
            <td>xxx</td>
            <td>xxx</td>
            <td>xxx</td>
            <td>xxx</td>
            <td>xxx</td>
            <td>xxx</td>
            <td>xxx</td>
            <td>xxx</td>
        </tr>
        <tr>
            <td>xxx</td>
            <td>xxx</td>
            <td>xxx</td>
            <td>xxx</td>
            <td>xxx</td>
            <td>xxx</td>
            <td>xxx</td>
            <td>xxx</td>
        </tr>
    </tbody>
</table>

以上代码可以使用table>caption{运动员表}+(thead>tr>th{xxx}*8)+(tbody>tr*5>td{xxx}*8)来完成