Emmet插件使用手册

发表于 分类于

Emmet插件介绍

Emmet插件(前身为Zen Coding)是一个能大幅度提高前端开发效率的一个工具。

基本上，大多数的文本编辑器都会允许你存储和重用一些代码块，我们称之为“片段”。虽然片段能很好地推动你得生产力，但大多数的实现都有这样一个缺点：你必须先定义你得代码片段，并且不能在运行时进行拓展。

Emmet把片段这个概念提高到了一个新的层次：你可以设置CSS形式的能够动态被解析的表达式，然后根据你所输入的缩写来得到相应的内容。Emmet是很成熟的并且非常适用于编写HTML/XML和CSS代码的前端开发人员，但也可以用于编程语言。

Emmet插件的下载和安装

Emmet为大部分流行的编辑器都提供了安装插件，许多编辑器都可以从Emmet官网下载安装使用Emmet插件。

Emmet插件的使用

由于博主使用的是Mac环境 + Sublime Text 3编辑器，所以下边的演示示例都是在Mac系统下的Sublime Text 3编辑器下进行的。

使用方法

Emmet的使用方法也非常简单，直接在编辑器中输入HTML或CSS的代码的缩写，然后按tab键就可以拓展为完整的代码片段。

语法示例

  • 后代：>

    例如缩写 nav>ul>li，按下Tab键会生成以下代码：

    1
    2
    3
    4
    5
    <nav>
      <ul>
        <li></li>
      </ul>
    </nav>

  • 兄弟： +

    缩写div+p+bq，按下Tab键会生成以下代码：

    1
    2
    3
    <div></div>
    <p></p>
    <blockquote></blockquote>

  • 上级：^

    1. 缩写div+div>p>span+em^bq，按下Tab键会生成以下代码：
    1
    2
    3
    4
    5
    <div></div>
    <div>
      <p><span></span><em></em></p>
      <blockquote></blockquote>
    </div>
    1. 缩写div+div>p>span+em^^bq，按下Tab键会生成以下代码：
    1
    2
    3
    4
    5
    <div></div>
    <div>
      <p><span></span><em></em></p>
    </div>
    <blockquote></blockquote>

  • 分组：()

    1. 利用()可以给缩写分组，组合生成各种需要的代码结构。
      缩写：div>(header>ul>li*2>a)+footer>p，按下Tab键会生成以下代码：
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    <div>
      <header>
        <ul>
          <li><a href=""></a></li>
          <li><a href=""></a></li>
        </ul>
      </header>
      <footer>
        <p></p>
      </footer>
    </div>
    1. 缩写：(div>dl>(dt+dd)*3)+footer>p，按下Tab键会生成以下代码：
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    <div>
      <dl>
        <dt></dt>
        <dd></dd>
        <dt></dt>
        <dd></dd>
        <dt></dt>
        <dd></dd>
      </dl>
    </div>
    <footer>
      <p></p>
    </footer>

  • 乘法：*

    1. 例如缩写ul>li*3，按下Tab键会生成以下代码：
    1
    2
    3
    4
    5
    <ul>
      <li></li>
      <li></li>
      <li></li>
    </ul>
    1. 缩写div+div>nav>i*3，按下Tab键会生成以下代码：
    1
    2
    3
    4
    5
    6
    7
    8
    <div></div>
    <div>
      <nav>
        <i></i>
        <i></i>
        <i></i>
      </nav>
    </div>

  • 自增符号：$

    1. 缩写div>nav>ul>li.iterm$*3，按下Tab键会生成以下代码：
    1
    2
    3
    4
    5
    6
    7
    8
    9
    <iv>
      <nav>
        <ul>
          <li class="iterm1"></li>
          <li class="iterm2"></li>
          <li class="iterm3"></li>
        </ul>
      </nav>
    </iv>
    1. 缩写h$[title=item$]{Header $}*3，按下Tab键会生成以下代码：
    1
    2
    3
    <h1 title="item1">Header 1</h1>
    <h2 title="item2">Header 2</h2>
    <h3 title="item3">Header 3</h3>
    1. 缩写ul>li.item$$$*5，按下Tab键会生成以下代码：
    1
    2
    3
    4
    5
    6
    7
    <ul>
      <li class="item001"></li>
      <li class="item002"></li>
      <li class="item003"></li>
      <li class="item004"></li>
      <li class="item005"></li>
    </ul>
    1. 缩写ul>li.item$@-*5，按下Tab键会生成以下代码：
    1
    2
    3
    4
    5
    6
    7
    <ul>
      <li class="item5"></li>
      <li class="item4"></li>
      <li class="item3"></li>
      <li class="item2"></li>
      <li class="item1"></li>
    </ul>
    1. 缩写ul>li.item$@3*5，按下Tab键会生成以下代码：
    1
    2
    3
    4
    5
    6
    7
    <ul>
      <li class="item3"></li>
      <li class="item4"></li>
      <li class="item5"></li>
      <li class="item6"></li>
      <li class="item7"></li>
    </ul>

  • ID和类属性

    1. #header
    1
    <div id="header"></div>
    1. .title
    1
    <div class="title"></div>
    1. form#search.wide
    1
    <form action="" id="search" class="wide"></form>
    1. p.class1.class2.class3
    1
    <p class="class1 class2 class3"></p>
    1. div#main>section.paper>nav>ul>li.iterm$*5>a.classname
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    <div id="main">
      <section class="paper">
        <nav>
          <ul>
            <li class="iterm1"><a href="" class="classname"></a></li>
            <li class="iterm2"><a href="" class="classname"></a></li>
            <li class="iterm3"><a href="" class="classname"></a></li>
            <li class="iterm4"><a href="" class="classname"></a></li>
            <li class="iterm5"><a href="" class="classname"></a></li>
          </ul>
        </nav>
      </section>
    </div>

  • HTML

    1. html结构代码

    html语法时在英文输入状态下输入!，然后按下Tab键，即可自动生成HTML整体结构代码
    效果如下：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>Document</title>
    </head>
    <body>
      
    </body>
    </html>

    2. a:link
    1
    <a href="http://"></a>

    3. a:mail
    1
    <a href="mailto:"></a>

    4. link
    1
    <link rel="stylesheet" type="text/css" href="">

    5. meta:vp
    1
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

    6. img
    1
    <img src="">

    7. input
    1
    <input type="" name="">

    8. input:search
    1
    <input type="search" name="" id="">

    9. btn:s
    1
    <button type="submit"></button>

    10. form:get
    1
    <form action="" method="get"></form>

参考文章：