emmet语法的使用

emmet语法的使用

1.层级：父子 兄弟关系。

<!-- ul>li>a{首页} -->
<ul>
      <li><a href="">教程</a></li>
      <li><a href="">首页</a></li>
      <li><a href="">社区</a></li>
    </ul>
    <!-- 兄弟： + -->
   <!-- .class{title}+.class{url} -->
    <div class="title">title</div>
    <div class="url">url</div>

2.重复生成

 <!-- ul>li*3>a{首页} -->
 <ul>
      <li><a href="">首页</a></li>
      <li><a href="">首页</a></li>
      <li><a href="">首页</a></li>
    </ul>

3.按序号重复生成

 <!-- ul>li*3>a{item0$}  正序  -->
<ul>
        <li><a href="">item01</a></li>
        <li><a href="">item02</a></li>
        <li><a href="">item03</a></li>
    </ul>
<!--     ul>li*3>a{item$@3}  指定起始序号  -->
    <ul>
        <li><a href="">item3</a></li>
        <li><a href="">item4</a></li>
        <li><a href="">item5</a></li>
    </ul>
     <!-- ul#id{xuh}>li*3>a{itme$@-5} 指定序号倒序生成-->
        <ul id="xuh">
        <li><a href="">itme7</a></li>
        <li><a href="">itme6</a></li>
        <li><a href="">itme5</a></li>
    </ul>

4.emmet表格生成语法

table>caption{学生信息表}+(thead>tr>th{title}*8)+(tbody>tr*5>td{item}*8)

 <table>
        <caption>学生信息表</caption>
        <thead>
            <tr>
                <th>title</th>
                <th>title</th>
                <th>title</th>
                <th>title</th>
                <th>title</th>
                <th>title</th>
                <th>title</th>
                <th>title</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>item</td>
                <td>item</td>
                <td>item</td>
                <td>item</td>
                <td>item</td>
                <td>item</td>
                <td>item</td>
                <td>item</td>
            </tr>
            <tr>
                <td>item</td>
                <td>item</td>
                <td>item</td>
                <td>item</td>
                <td>item</td>
                <td>item</td>
                <td>item</td>
                <td>item</td>
            </tr>
            <tr>
                <td>item</td>
                <td>item</td>
                <td>item</td>
                <td>item</td>
                <td>item</td>
                <td>item</td>
                <td>item</td>
                <td>item</td>
            </tr>
            <tr>
                <td>item</td>
                <td>item</td>
                <td>item</td>
                <td>item</td>
                <td>item</td>
                <td>item</td>
                <td>item</td>
                <td>item</td>
            </tr>
            <tr>
                <td>item</td>
                <td>item</td>
                <td>item</td>
                <td>item</td>
                <td>item</td>
                <td>item</td>
                <td>item</td>
                <td>item</td>
            </tr>
        </tbody>
    </table>