Emmet 插件快速入门

发表于 | 更新于 | 分类于 | 阅读次数：

Emmet 插件是一款能够大幅度提升网页前端开发效率的插件，能通过简单的语法快速生成一个标签结构

现在很多的文本编辑器都支持了 Emmet 插件了，像 Zend，Sublime 等都支持

本人用 Sublime Text 3，在 package control 中就能安装 Emmet 插件了

下面来简单笔记几种常见的用法

快速生成一个 3 行 4 列的 table 表格结构

1
table>tr*3>td*4

输入完之后按 tab 键即可生成代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<table>
    <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
</table>

快速生成一个 h1 标题

1
h1{hello}

按 tab 键即可生成 html 代码

1
<h1>hello</h1>

快速生成一个超链接

1
a[href="me.mo-cloud.net"]{ 链接到本站 }

按 tab 键生成 html 代码

1
<a href="me.mo-cloud.net"> 链接到本站 < span class="tag"></a>

生成一个无序列表，套用编号过的 class 属性

1
ul>li.item${haha $$}*9

按 tab 键生成 html 代码

1
2
3
4
5
6
7
8
9
10
11
<ul>
    <li class="item1">haha 01</li>
    <li class="item2">haha 02</li>
    <li class="item3">haha 03</li>
    <li class="item4">haha 04</li>
    <li class="item5">haha 05</li>
    <li class="item6">haha 06</li>
    <li class="item7">haha 07</li>
    <li class="item8">haha 08</li>
    <li class="item9">haha 09</li>
</ul>

生成两个并列的下拉列表，使用稍微复杂的组合属性

1
(select>.wrap>h1>p>a)+(select>.huh>p+p)

按 tab 键生成代码

1
2
3
4
5
6
7
8
9
10
11
12
<select name="" id="">
    <option class="wrap">
        <h1>
            <p><a href=""></a></p>
        </h1>
    </option>
</select><select name="" id="">
    <option class="huh">
        <p></p>
        <p></p>
    </option>
</select>