Emmet插件用法(一)

发表于 | 分类于
| 字数统计: 1.3k 字

Emmet(前身是Zen Coding)是前端开发快速输入代码一种方式，它可以极大的提高代码编写的效率，它提供了一种非常简练的语法规则，然后立刻生成对应的 HTML 结构或者 CSS 代码，同时还有多种实用的功能帮助进行前端开发。用和 CSS 选择器相似的语法来描述元素的嵌套层级关系和属性，实现 HTML/XML/CSS 等代码的智能自动补全。

快速生成html结构语法

  1. > 快速生成子元素

    1
    2
    3
    4
    5
    6
    <!-- nav>ul>li -->
    <nav>
        <ul>
            <li></li>
        </ul>
    </nav>

  2. + 生成并列同级元素

    1
    2
    3
    4
    <!-- header+section+footer-->
    <header></header>
    <section></section>
    <footer></footer>

  3. ^ 返回父层元素,可以多层

    1
    2
    3
    4
    5
    6
    <!-- header+setion>p>i+em^^footer -->
    <header></header>
        <setion>
            <p><i></i><em></em></p>
        </setion>
    <footer></footer>

  4. * 生成重复的元素

    1
    2
    3
    4
    5
    6
    <!-- ul>li*3 -->
    <ul>
        <li></li>
        <li></li>
        <li></li>
    </ul>

  5. () 生成复杂的组合

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    <!-- header+(setion>dl>(dt+dd*2))+footer -->
    <header></header>
        <setion>
            <dl>
                <dt></dt>
                <dd></dd>
                <dd></dd>
            </dl>
        </setion>
    <footer></footer>

  6. .或# 使用.和#来生成ID和CLASS属性

    1
    2
    3
    4
    <!-- div#header+div.page+div#footer.class1.name -->
    <div id="header"></div>
    <div class="page"></div>
    <div id="footer" class="class1 name"></div>

  7. [] 使用中括号来自定义需要的属性

    1
    2
    3
    4
    <!-- td[title colspan data] -->
    <td title="" colspan="" data=""></td>
    <!-- td[title='hello' colspan='3' data='12'] -->
    <td title="hello" colspan="3" data="12"></td>

  8. {} 生成标签内的内容

    1
    2
    <!-- a{百度一下}+b{你就知道} -->
    <a href="">百度一下</a><b>你就知道</b>

  9. $ 自动生成连续的编号,可以多个

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    <!-- ul>li.item${item$$}*3 -->
    <ul>
        <li class="item1">item01</li>
        <li class="item2">item02</li>
        <li class="item3">item03</li>
    </ul>
    <!-- 从指定的数字开始编号  ul>li.item$@3{item$@2$@5}*3 -->
    <ul>
        <li class="item3">item25</li>
        <li class="item4">item27</li>
        <li class="item5">item29</li>
    </ul>
    <!-- 指定反向编号 ul>li.item$@-3{item$@2$@-5}*3 -->
    <ul>
        <li class="item5">item29</li>
        <li class="item4">item27</li>
        <li class="item3">item25</li>
    </ul>

  10. 对于特定的结构可以省略html标签,采用默认的标签

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    <!-- .warp>p>.text -->
    <div class="warp">
        <p><span class="text"></span></p>
    </div>
    <!-- ul>.item -->
    <ul>
        <li class="item"></li>
        <li class="item"></li>
    </ul>
    <!-- table>(.col>.item*2)*3 -->
    <table>
        <tr class="col">
            <td class="item"></td>
            <td class="item"></td>
        </tr>
        <tr class="col">
            <td class="item"></td>
            <td class="item"></td>
        </tr>
        <tr class="col">
            <td class="item"></td>
            <td class="item"></td>
        </tr>
    </table>

  11. lorem 快速生成大段文本(占位文字)

    1
    2
    3
    4
    5
    6
    7
    8
    9
    <!-- lorem + Tab -->
    <td>
    Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dicta, repellat rem. Inventore itaque illo saepe aut optio architecto esse porro nisi placeat, ratione eos voluptas, totam est quia recusandae vero!
    </td>
    <!-- ul>lorem10.item*2 每一组多少个单词 -->
    <ul>
        <li class="item">Lorem ipsum dolor sit amet consectetur adipisicing elit. Incidunt, dolorem.</li>
        <li class="item">Vero excepturi fugiat repudiandae. Qui at consequatur ut soluta! Cumque.</li>
    </ul>

HTML常用快捷语法

  1. ! 快速生成html5结构

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
    </head>
    <body>
    </body>
    </html>

  2. link 快速生成 link类的标签

    1
    2
    3
    4
    <!-- link -->
    <link rel="stylesheet" href="">
    <!-- link:favicon -->
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">

  3. meta 快速生成 meta标签

    1
    2
    3
    4
    5
    6
    <!-- meta:utf -->
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <!-- meta:utf -->
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <!-- meta:vp -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

  4. script 快速生成script标签

    1
    2
    <!-- script:src -->
    <script src=""></script>

  5. input 快速生成表单元素

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    <!-- inp -->
    <input type="text" name="" id="">
    <!-- input:b -->
    <input type="button" value="">
    <!-- input:p -->
    <input type="password" name="" id="" />
    <!-- input:number -->
    <input type="number" name="" id="">
    <!-- input:c -->
    <input type="checkbox" name="" id="">
    <!-- input:r -->
    <input type="radio" name="" id="">
    <!-- input:f -->
    <input type="file" name="" id="">
    <!-- input:s -->
    <input type="submit" value="" />

  6. btn 快速生成button

    1
    2
    3
    4
    5
    6
    <!-- btn -->
    <button></button>
    <!-- btn:s -->
    <button type="submit"></button>
    <!-- btn:r -->
    <button type="reset"></button>

参考链接

emmet查询地址
快速生成html标签和css快捷键

-------------本文结束感谢您的阅读-------------
0%