html用emmt写菜单,前端开发工具Emmet的介绍

曾经也为写HTML/CSS代码而烦恼过，不愿再写下去，感觉很烦琐，写那么多的尖括号，用的标签都是在重复写，而且绝大多数标题都需要闭合标签，再多几个无序列表就更头疼。

Emmet，一个强大的插件，可以为我们解决这些问题，是前端开发人员必备的工具包。可以在许多流行的文本编辑器中安装使用，大大提高了编写HTML和CSS代码的工作效率。

Emmet是用纯JavaScript编写的，是一款跨平台的强大HTML/CSS代码编辑插件，超高速的完成HTML/CSS的开发。

最初知道有这样神奇的插件是寻找Sublime Text插件时，知道Zen Coding，一个可以快速编写HTML/CSS代码的工具，看到演示效果，只有用神奇来表达，现在有了Emmet，而且是在Zen Coding基础上再次开发，功能各方面肯定是更加强大。

下面就在Sublime Text和Notepad++这两款编辑器中安装，一些代码编写还是以Sublime Text为例(推荐大家使用Sublime Text编辑器，用了你肯定会喜欢，而Notepad++是相当好的开源文本编辑器，舍不得删除。)

Emmet的安装：

1、在Sublime Text安装：

没有用过Sublime Text编辑器的朋友还是先看下这篇文章：Sublime Text 2 - 性感无比的代码编辑器！

在Sublime Text中按“Ctrl+Shift+p”快捷键或在菜单-工具中打开“命令面板”，输入：Install Package (安装扩展)后回车，弹出新的窗口，再查找“Emmet”确定安装：

2、在Notepad++安装：

打开菜单：插件-Plugin Manager-Show Plugin Manager面板，找到“Emmet”勾选后，点击“Install”，中途会弹窗提示需要安装或更新文件，确定就OK。

用Emmet编写时需要再转换成HTML/CSS代码，而Sublime Text和Notepad++的快捷键是不一样，分别是：Tab和Ctrl+Alt+Enter。

Emmet快速编写HTML/CSS：

缩写是Emmet的核心，Emmet中特殊的表达式在运行时解析和转化为结构化代码块，缩写的语法看起来就是CSS选择器和一些特定的HTML代码，所以稍微了解了就能看明白和如果使用。

我们先举个例，在编辑器中输入：

#page>div.logo+ul#navigation>li*5>a{Item $}

[slidenormal borderleft="4px solid #ddd" color="#000"]再按Tab键你会看到它神奇的效果，得到的HTML代码是：[/slidenormal]

• Item1
• Item2
• Item3
• Item4
• Item5