前端开发必备！Emmet使用手册

深碍√TFBOYSˉ_ 2022-08-03 00:24 151阅读 0赞

### 介绍 ###

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

![1011541543-0.jpg][]

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

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

### 使用示例： ###

**在编辑器中输入缩写代码：**ul>li\*5 ，然后按下拓展键（默认为tab），即可得到代码片段：

### 下载和安装 ###

1.  **Emmet为大部分流行的编辑器都提供了安装插件，下面是它们的下载链接：**
    
     *  [Sublime Text][]
     *  [Eclipse/Aptana][Eclipse_Aptana]
     *  [TextMate][]
     *  [Coda][]
     *  [Espresso][]
     *  [Chocolat][]
     *  [Komodo Edit][]
     *  [Notepad++][Notepad]
     *  [PSPad][]
     *  [textarea][]
     *  [CodeMirror][]
     *  [Brackets][]
     *  [NetBeans][]
     *  [Adobe Dreamweaver][]
2.  **在线编辑器的支持：**
    
     *  [JSFiddle][]
     *  [JS Bin][]
     *  [CodePen][]
     *  [ICEcoder][]
     *  [Divshot][]
     *  [Codio][]
3.  **第三方插件的支持**
    
    下面这些编辑器的插件都是由第三方开发者所提供的，所以可能并不支持所有Emmet的功能和特性。
    
     *  [SynWrite][]
     *  [WebStorm][]
     *  [PhpStorm][]
     *  [Vim][]
     *  [HTML-Kit][]
     *  [HippoEDIT][]
     *  [CodeLobster PHP Edition][]
     *  [TinyMCE][]

**因为我也是Sublime Text的使用者，所以下面为大家介绍一下sublime text中Emmet的安装方法：**

**步骤一：**首先你需要为sublime text安装Package Control组件：

1.  按Ctrl+\`调出sublime text的console
2.  粘贴以下代码到底部命令行并回车： import urllib2,os;pf='Package Control.sublime-package';ipp=sublime.installed*packages*path();os.makedirs(ipp) if not os.path.exists(ipp) else None;open(os.path.join(ipp,pf),'wb').write(urllib2.urlopen('[http://sublime.wbond.net/'+pf.replace][http_sublime.wbond.net_pf.replace](' ','%20')).read())
3.  重启Sublime Text
4.  在Perferences->package settings中看到package control，则表示安装成功

**步骤二：**使用Package Control安装Emmet插件：

1.  按Ctrl+Shift+P命令板
2.  输入install然后选择install Package，然后输入emmet找到 Emmet Css Snippets，点击就可以自动完成安装。

### 使用方法 ###

emmet的使用方法也非常简单，以sublime text为例，直接在编辑器中输入HTML或CSS的代码的缩写，然后按tab键就可以拓展为完整的代码片段。（如果与已有的快捷键有冲突的话，可以自行在编辑器中将拓展键设为其他快捷键）

## 语法: ##

#### 后代：> ####

**缩写**：nav>ul>li

#### 兄弟：+ ####

**缩写**：div+p+bq

#### 上级：^ ####

**缩写**：div+div>p>span+em^bq

**缩写**：div+div>p>span+em^^bq

#### 分组：() ####

**缩写**：div>(header>ul>li\*2>a)+footer>p

**缩写**：(div>dl>(dt+dd)\*3)+footer>p

#### 乘法：\* ####

**缩写**：ul>li\*5

#### 自增符号：$ ####

**缩写**：ul>li.item$\*5

**缩写**：h$\[title=item$\]\{Header $\}\*3

<h1 title="item1">Header 1</h1> <h2 title="item2">Header 2</h2> <h3 title="item3">Header 3</h3>

**缩写**：ul>li.item$$$\*5

**缩写**：ul>li.item$@-\*5

**缩写**：ul>li.item$@3\*5

#### ID和类属性 ####

**缩写**：\#header

**缩写**：.title

**缩写**：form\#search.wide

**缩写**：p.class1.class2.class3

#### 自定义属性 ####

**缩写**：p\[title="Hello world"\]

**缩写**：td\[rowspan=2 colspan=3 title\]

**缩写**：\[a='value1' b="value2"\]

#### 文本：\{\} ####

**缩写**：a\{Click me\}

<a href="">Click me</a>

**缩写**：p>\{Click \}+a\{here\}+\{ to continue\}

<p>Click <a href="">here</a> to continue</p>

#### 隐式标签 ####

**缩写**：.class

**缩写**：em>.class

**缩写**：ul>.class

**缩写**：table>.row>.col

### HTML ###

*所有未知的缩写都会转换成标签，例如，foo → <foo></foo>*

**缩写**：!

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> </body> </html>

**缩写**：a

**缩写**：a:link

**缩写**：a:mail

**缩写**：abbr

**缩写**：acronym

**缩写**：base

**缩写**：basefont

**缩写**：br

<br />

**缩写**：frame

**缩写**：hr

<hr />

**缩写**：bdo

**缩写**：bdo:r

**缩写**：bdo:l

**缩写**：col

<col />

**缩写**：link

**缩写**：link:css

**缩写**：link:print

**缩写**：link:favicon

**缩写**：link:touch

**缩写**：link:rss

**缩写**：link:atom

**缩写**：meta

**缩写**：meta:utf

**缩写**：meta:win

**缩写**：meta:vp

**缩写**：meta:compat

**缩写**：style

**缩写**：script

**缩写**：script:src

**缩写**：img

**缩写**：iframe

**缩写**：embed

**缩写**：object

**缩写**：param

**缩写**：map

**缩写**：area

**缩写**：area:d

**缩写**：area:c

**缩写**：area:r

**缩写**：area:p

**缩写**：form

**缩写**：form:get

**缩写**：form:post

**缩写**：label

**缩写**：input

**缩写**：inp

**缩写**：input:hidden

*别名：input\[type=hidden name\]*

**缩写**：input:h

*别名：input:hidden*

**缩写**：input:text, input:t

*别名：inp*

**缩写**：input:search

*别名：inp\[type=search\]*

**缩写**：input:email

*别名：inp\[type=email\]*

**缩写**：input:url

*别名：inp\[type=url\]*

**缩写**：input:password

*别名：inp\[type=password\]*

**缩写**：input:p

*别名：input:password*

**缩写**：input:datetime

*别名：inp\[type=datetime\]*

**缩写**：input:date

*别名：inp\[type=date\]*

**缩写**：input:datetime-local

*别名：inp\[type=datetime-local\]*

**缩写**：input:month

*别名：inp\[type=month\]*

**缩写**：input:week

*别名：inp\[type=week\]*

**缩写**：input:time

*别名：inp\[type=time\]*

**缩写**：input:number

*别名：inp\[type=number\]*

**缩写**：input:color

*别名：inp\[type=color\]*

**缩写**：input:checkbox

*别名：inp\[type=checkbox\]*

**缩写**：input:c

*别名：input:checkbox*

**缩写**：input:radio

*别名：inp\[type=radio\]*

**缩写**：input:r

*别名：input:radio*

**缩写**：input:range

*别名：inp\[type=range\]*

**缩写**：input:file

*别名：inp\[type=file\]*

**缩写**：input:f

*别名：input:file*

**缩写**：input:submit

**缩写**：input:s

*别名：input:submit*

**缩写**：input:image

**缩写**：input:i

*别名：input:image*

**缩写**：input:button

**缩写**：input:b

*别名：input:button*

**缩写**：isindex

**缩写**：input:reset

*别名：input:button\[type=reset\]*

**缩写**：select

**缩写**：option

**缩写**：textarea

**缩写**：menu:context

*别名：menu\[type=context\]>*

**缩写**：menu:c

*别名：menu:context*

**缩写**：menu:toolbar

*别名：menu\[type=toolbar\]>*

**缩写**：menu:t

*别名：menu:toolbar*

**缩写**：video

**缩写**：audio

**缩写**：html:xml

**缩写**：keygen

**缩写**：command

**缩写**：bq

*别名：blockquote*

**缩写**：acr

*别名：acronym*

**缩写**：fig

*别名：figure*

**缩写**：figc

*别名：figcaption*

**缩写**：ifr

*别名：iframe*

**缩写**：emb

*别名：embed*

**缩写**：obj

*别名：object*

**缩写**：src

*别名：source*

**缩写**：cap

*别名：caption*

**缩写**：colg

*别名：colgroup*

**缩写**：fst, fset

*别名：fieldset*

**缩写**：btn

*别名：button*

**缩写**：btn:b

*别名：button\[type=button\]*

**缩写**：btn:r

*别名：button\[type=reset\]*

**缩写**：btn:s

*别名：button\[type=submit\]*

#### 关于更多的HTML以及CSS的缩写请查看： ####

[下载 API表][API][直击官网文档][Link 1]

转载自： [http://html5.9tech.cn/news/2013/1010/33090.html][http_html5.9tech.cn_news_2013_1010_33090.html]

[1011541543-0.jpg]: http://www.9ria.com/uploads/allimg/131010/1011541543-0.jpg
[Sublime Text]: https://github.com/sergeche/emmet-sublime#readme
[Eclipse_Aptana]: https://github.com/emmetio/emmet-eclipse#readme
[TextMate]: https://github.com/emmetio/Emmet.tmplugin#readme
[Coda]: https://github.com/emmetio/Emmet.codaplugin#readme
[Espresso]: https://github.com/emmetio/Emmet.sugar#readme
[Chocolat]: https://github.com/sergeche/emmet.chocmixin#readme
[Komodo Edit]: http://community.activestate.com/xpi/zen-coding
[Notepad]: https://github.com/emmetio/npp#readme
[PSPad]: https://github.com/emmetio/pspad
[textarea]: https://github.com/emmetio/textarea
[CodeMirror]: https://github.com/emmetio/codemirror#readme
[Brackets]: https://github.com/emmetio/brackets-emmet#readme
[NetBeans]: https://github.com/emmetio/netbeans#readme
[Adobe Dreamweaver]: https://github.com/emmetio/dreamweaver#readme
[JSFiddle]: http://jsfiddle.net/
[JS Bin]: http://jsbin.com/
[CodePen]: http://codepen.io/
[ICEcoder]: http://icecoder.net/
[Divshot]: http://www.divshot.com/
[Codio]: http://codio.com/
[SynWrite]: http://www.uvviewsoft.com/synwrite/
[WebStorm]: http://www.jetbrains.com/webstorm/
[PhpStorm]: http://www.jetbrains.com/phpstorm/
[Vim]: https://github.com/mattn/emmet-vim
[HTML-Kit]: http://www.htmlkit.com/
[HippoEDIT]: http://wiki.hippoedit.com/plugins/emmet
[CodeLobster PHP Edition]: http://www.codelobster.com/
[TinyMCE]: https://github.com/e-sites/tinymce-emmet-plugin#readme
[http_sublime.wbond.net_pf.replace]: http://sublime.wbond.net/'%20rel=
[API]: http://www.w3cplus.com/sites/default/files/baiyaimages/CheatSheet.jpg
[Link 1]: http://docs.emmet.io/cheat-sheet/
[http_html5.9tech.cn_news_2013_1010_33090.html]: http://html5.9tech.cn/news/2013/1010/33090.html