emmet语法，快速生成使用方法

发布于：2022-07-04 13:54:23  栏目：技术文档

emmet语法的使用方法

1. 快速生成HTML结构标签：<kbd>!</kbd>+<kbd>Tab</kbd>或html:h5+<kbd>Tab</kbd>
2. 快速生成DIV标签：div+<kbd>Tab</kbd>
3. 快速生成带class属性DIV标签：.ID+<kbd>Tab</kbd>

   <div class="id"></div>

4. 生成DIV标签中有id属性：#test+<kbd>Tab</kbd>

   <div id="test"></div>

5. DIV标签带clsaa元素、id属性、文字内容：.test#name{名称}+<kbd>Tab</kbd>

   <div class="test" id="name">名称</div>

6. 父子关系emmet方法：div>li+<kbd>Tab</kbd>

   <div>
    <li></li>
   </div>

7. 兄弟关系：div+li+<kbd>Tab</kbd>

   <div></div>
   <li></li>

8. 快速创建a标签带文字内容并从0开始：ul.menu>li.name*5>a{名称$@0}+<kbd>Tab</kbd>

    <ul class="menu">
        <li class="name"><a href="">名称0</a></li>
        <li class="name"><a href="">名称1</a></li>
        <li class="name"><a href="">名称2</a></li>
        <li class="name"><a href="">名称3</a></li>
        <li class="name"><a href="">名称4</a></li>
    </ul>

9. 快速创建a标签带文字内容并从0开始倒序：ul.menu>li.name*5>a{名称$@-0}+<kbd>Tab</kbd>

    <ul class="menu">
        <li class="name"><a href="">名称4</a></li>
        <li class="name"><a href="">名称3</a></li>
        <li class="name"><a href="">名称2</a></li>
        <li class="name"><a href="">名称1</a></li>
        <li class="name"><a href="">名称0</a></li>
    </ul>

10. 快速创建a标签带文字内容并从5-9：ul.menu>li.name*5>a{名称$@5}+<kbd>Tab</kbd>

    <ul class="menu">
        <li class="name"><a href="">名称5</a></li>
        <li class="name"><a href="">名称6</a></li>
        <li class="name"><a href="">名称7</a></li>
        <li class="name"><a href="">名称8</a></li>
        <li class="name"><a href="">名称9</a></li>
    </ul>

11. 5行8列的表格创建：table>caption{名称}+(thead>tr>th{user}*8)+(tbody>tr*5>td{name}*8)+<kbd>Tab</kbd>

    <table>
    <caption>名称</caption>
    <thead>
        <tr>
            <th>user</th>
            <th>user</th>
            <th>user</th>
            <th>user</th>
            <th>user</th>
            <th>user</th>
            <th>user</th>
            <th>user</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>name</td>
            <td>name</td>
            <td>name</td>
            <td>name</td>
            <td>name</td>
            <td>name</td>
            <td>name</td>
            <td>name</td>
        </tr>
        <tr>
            <td>name</td>
            <td>name</td>
            <td>name</td>
            <td>name</td>
            <td>name</td>
            <td>name</td>
            <td>name</td>
            <td>name</td>
        </tr>
        <tr>
            <td>name</td>
            <td>name</td>
            <td>name</td>
            <td>name</td>
            <td>name</td>
            <td>name</td>
            <td>name</td>
            <td>name</td>
        </tr>
        <tr>
            <td>name</td>
            <td>name</td>
            <td>name</td>
            <td>name</td>
            <td>name</td>
            <td>name</td>
            <td>name</td>
            <td>name</td>
        </tr>
        <tr>
            <td>name</td>
            <td>name</td>
            <td>name</td>
            <td>name</td>
            <td>name</td>
            <td>name</td>
            <td>name</td>
            <td>name</td>
        </tr>
    </tbody>
    </table>

相关推荐