Emmet（原名 Zen Coding）——更快速地编写 HTML/CSS

Emmet 是 Zen Coding 项目的改名版本。Emmet 允许通过简写快速生成 HTML 列表、带类名或 ID 的块结构。不仅如此，它还支持通过简写快速编写 CSS 属性。虽然一开始记忆这些缩写和工具看起来有些多余，但当你习惯之后，会发现没有 Emmet 写代码反而变得不方便。

Emmet（Zen Coding）的功能

在编写 HTML 时，我们经常需要写大量代码，写得越多，出错的几率（例如忘记闭合标签）也越高。这时 Emmet（Zen Coding）就能帮上忙。大多数 IDE 都内置或支持安装 Emmet 插件，只需设置一个快捷键即可生成 HTML 代码。

例如，你可以写下：

div#content>h1+p

按下 Emmet 执行快捷键后，它会转换为：

<div id="content">
  <h1></h1>
  <p></p>
</div>

如你所见，我们输入的只是类似 CSS 的选择器，而生成的却是对应结构的 HTML。

Emmet 最方便的功能之一是快速生成 HTML 菜单结构。例如以下代码：

div#header>img.logo+ul#nav>li*4>a

生成后会变成：

这里我们使用了星号（*）选择器，它表示生成多个相同元素。它不仅适用于 <li>，也适用于任何标签：

div.item$*3

结合美元符号（$）会生成如下代码：

现在我们回到菜单示例，写出以下代码：

div#header>ul#navigation>li.item$*>a>span
关于我们
产品
新闻
博客
联系我们

这会生成完整的菜单：

<div id="header">
<ul id="navigation">
<li class="item1"><a href=""><span>关于我们</span></a></li>
<li class="item2"><a href=""><span>产品</span></a></li>
<li class="item3"><a href=""><span>新闻</span></a></li>
<li class="item4"><a href=""><span>博客</span></a></li>
<li class="item5"><a href=""><span>联系我们</span></a></li>
</ul>
</div>

你可以使用 Emmet 选择器来编写各种标签结构：

• E
  元素名称（div、ul）
• E#id
  元素的 id 属性（<div id="">）
• E.class
  元素的 class 属性（<div class="">）
• E>N
  子元素（嵌套元素）
• E+N
  相邻元素
• E*N
  生成多个相同元素
• E$*N
  生成多个带编号类名的元素（例如 ul#nav>li.item-$*5）

几乎所有流行的 IDE 都支持 Emmet（Zen Coding），但如果你使用 Notepad++，则需要单独安装。

在 Notepad++ 中安装 Emmet（Zen Coding）

你可以在以下链接下载 Notepad++ 的插件：

http://sourceforge.net/projects/npppythonscript/files/

将 Emmet（Zen Coding）库复制到 Notepad++ 的安装目录。

要安装库，请使用 Notepad++ 内置的插件管理器：

在插件列表中勾选 “Zen Coding - Python”，然后点击 “Install” 安装。

如果列表中没有 Zen Coding 插件，说明你当前的 Notepad++ 版本不支持它。此时可以安装支持 Zen Coding 的早期版本，或等待插件更新以支持当前版本。

安装完成并重启 Notepad++ 后，你就可以使用该插件了。要执行代码生成，请按快捷键 Ctrl + Alt + Enter。例如，要生成以下代码：

<a href="" class="link"><span></span></a>

只需输入 a.link>span，然后按 Ctrl + Alt + Enter 即可。