介绍

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

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

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

示例

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

<ul>

    <li></li>

    <li></li>

    <li></li>

    <li></li>

    <li></li>

</ul>

下载和安装

编辑器插件

以下都是Emmet为编辑器提供的安装插件。

Sublime Text

Eclipse/Aptana

TextMate

Coda

Espresso

Chocolat

Komodo Edit

Notepad++

PSPad

textarea

CodeMirror

Brackets

NetBeans

Adobe Dreamweaver

在线编辑器的支持：

JSFiddle

JS Bin

CodePen

ICEcoder

Divshot

Codio

第三方插件的支持

下面这些编辑器的插件都是由第三方开发者所提供的，所以可能并不支持所有Emmet的功能和特性。

SynWrite

WebStorm

PhpStorm

Vim

HTML-Kit

HippoEDIT

CodeLobster PHP Edition

TinyMCE

语法

后代：>

nav>ul>li

<nav>

    <ul>

        <li></li>

    </ul>

</nav>

兄弟：+

div+p+bq

<div></div>

<p></p>

<blockquote></blockquote>

上级：^

div+div>p>span+em^bq

<div></div>

<div>

    <p><span></span><em></em></p>

    <blockquote></blockquote>

</div>

div+div>p>span+em^^bq

<div></div>

<div>

    <p><span></span><em></em></p>

</div>

<blockquote></blockquote>

分组：()

div>(header>ul>li*2>a)+footer>p

<div>

    <header>

        <ul>

            <li><a href=""></a></li>

            <li><a href=""></a></li>

        </ul>

    </header>

    <footer>

        <p></p>

    </footer>

</div>

(div>dl>(dt+dd)*3)+footer>p

<div>

    <dl>

        <dt></dt>

        <dd></dd>

        <dt></dt>

        <dd></dd>

        <dt></dt>

        <dd></dd>

    </dl>

</div>

<footer>

    <p></p>

</footer>

乘法：*

ul>li*5

<ul>

    <li></li>

    <li></li>

    <li></li>

    <li></li>

    <li></li>

</ul>

自增符号：$

ul>li.item$*5

<ul>

    <li class="item1"></li>

    <li class="item2"></li>

    <li class="item3"></li>

    <li class="item4"></li>

    <li class="item5"></li>

</ul>

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 class="item001"></li>

    <li class="item002"></li>

    <li class="item003"></li>

    <li class="item004"></li>

    <li class="item005"></li>

</ul>

ul>li.item$@-*5

<ul>

    <li class="item5"></li>

    <li class="item4"></li>

    <li class="item3"></li>

    <li class="item2"></li>

    <li class="item1"></li>

</ul>

ul>li.item$@3*5

<ul>

    <li class="item3"></li>

    <li class="item4"></li>

    <li class="item5"></li>

    <li class="item6"></li>

    <li class="item7"></li>

</ul>

ID和类属性

#header

<div id="header"></div>

.title

<div class="title"></div>

form#search.wide

<form id="search" class="wide"></form>

p.class1.class2.class3

<p class="class1 class2 class3"></p>

自定义属性

p[title="Hello world"]

<p title="Hello world"></p>

td[rowspan=2 colspan=3 title]

<td rowspan="2" colspan="3" title=""></td>

[a='value1' b="value2"]

<div a="value1" b="value2"></div>

文本：{}

a{Click me}

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

p>{Click }+a{here}+{ to continue}

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

隐式标签

.class

<div class="class"></div>

em>.class

<em><span class="class"></span></em>

ul>.class

<ul>

    <li class="class"></li>

</ul>

table>.row>.col

<table>

    <tr class="row">

        <td class="col"></td>

    </tr>

</table>

HTML

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

!

<!doctype html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

</head>

<body>

</body>

</html>

a

<a href=""></a>

a:link

<a href="http://"></a>

a:mail

<a href="mailto:"></a>

abbr

<abbr title=""></abbr>

acronym

<acronym title=""></acronym>

base

<base href="" />

basefont

<basefont />

br

<br />

frame

<frame />

hr

<hr />

bdo

<bdo dir=""></bdo>

bdo:r

<bdo dir="rtl"></bdo>

bdo:l

<bdo dir="ltr"></bdo>

col

<col />

link

<link rel="stylesheet" href="" />

link:css

<link rel="stylesheet" href="style.css" />

link:print

<link rel="stylesheet" href="print.css" media="print" />

link:favicon

<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />

link:touch

<link rel="apple-touch-icon" href="favicon.png" />

link:rss

<link rel="alternate" type="application/rss+xml" title="RSS" href="rss.xml" />

link:atom

<link rel="alternate" type="application/atom+xml" title="Atom" href="atom.xml" />

meta

<meta />

meta:utf

<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />

meta:win

<meta http-equiv="Content-Type" content="text/html;charset=windows-1251" />

meta:vp

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />

meta:compat

<meta http-equiv="X-UA-Compatible" content="IE=7" />

style

<style></style>

script

<script></script>

script:src

<script src=""></script>

img

<img src="" alt="" />

iframe

<iframe src="" frameborder="0"></iframe>

embed

<embed src="" type="" />

object

<object data="" type=""></object>

param

<param name="" value="" />

map

<map name=""></map>

area

<area shape="" coords="" href="" alt="" />

area:d

<area shape="default" href="" alt="" />

area:c

<area shape="circle" coords="" href="" alt="" />

area:r

<area shape="rect" coords="" href="" alt="" />

area:p

<area shape="poly" coords="" href="" alt="" />

form

<form action=""></form>

form:get

<form action="" method="get"></form>

form:post

<form action="" method="post"></form>

label

<label for=""></label>

input

<input type="text" />

input:text input:t inp

<input type="text" name="" id="" />

input:hidden input:h input[type=hidden name]

<input type="hidden" name="" />

input:search inp[type=search]

<input type="search" name="" id="" />

input:email inp[type=email]

<input type="email" name="" id="" />

input:url inp[type=url]

<input type="url" name="" id="" />

input:password input:p inp[type=password]

<input type="password" name="" id="" />

input:datetime inp[type=datetime]

<input type="datetime" name="" id="" />

input:date inp[type=date]

<input type="date" name="" id="" />

input:datetime-local inp[type=datetime-local]

<input type="datetime-local" name="" id="" />

input:month inp[type=month]

<input type="month" name="" id="" />

input:week inp[type=week]

<input type="week" name="" id="" />

input:time inp[type=time]

<input type="time" name="" id="" />

input:number inp[type=number]

<input type="number" name="" id="" />

input:color inp[type=color]

<input type="color" name="" id="" />

input:checkbox input:c inp[type=checkbox]

<input type="checkbox" name="" id="" />

input:radio input:r inp[type=radio]

<input type="radio" name="" id="" />

input:range inp[type=range]

<input type="range" name="" id="" />

input:file input:f inp[type=file]

<input type="file" name="" id="" />

input:submit input:s

<input type="submit" value="" />

input:image input:i

<input type="image" src="" alt="" />

input:button input:b

<input type="button" value="" />

input:reset input:button[type=reset]

<input type="reset" value="" />

select

<select name="" id=""></select>

option

<option value=""></option>

textarea

<textarea name="" id="" cols="30" rows="10"></textarea>

menu:context menu:c menu[type=context]

<menu type="context"></menu>

menu:toolbar menu:t menu[type=toolbar]

<menu type="toolbar"></menu>

video

<video src=""></video>

audio

<audio src=""></audio>

html:xml

<html xmlns="http://www.w3.org/1999/xhtml"></html>

keygen

<keygen />

command

<command />

bq blockquote

<blockquote></blockquote>

acr acronym

<acronym title=""></acronym>

fig figure

<figure></figure>

figc figcaption

<figcaption></figcaption>

ifr iframe

<iframe src="" frameborder="0"></iframe>

emb embed

<embed src="" type="" />

obj object

<object data="" type=""></object>

src source

<source></source>

cap caption

<caption></caption>

colg colgroup

<colgroup></colgroup>

fst fset fieldset

<fieldset></fieldset>

btn button

<button></button>

btn:b button[type=button]

<button type="button"></button>

btn:r button[type=reset]

<button type="reset"></button>

btn:s button[type=submit]

<button type="submit"></button>

最后

关于更多的HTML以及CSS的缩写请查看：http://docs.emmet.io/cheat-sheet/

前端开发必备 - Emmet的更多相关文章

  1. 前端开发必备之Chrome开发者工具（下篇）

    本文介绍的 Chrome 开发者工具基于 Chrome 65版本,如果你的 Chrome 开发者工具没有下文提到的那些内容,请检查下 Chrome 的版本 本文是 前端开发必备之Chrome开发者工具 ...

  2. 超高速前端开发工具——Emmet

    [由于 CSDN 不支持富文本编辑器写的文章迁移到 Markdown 编辑器中修改,已重发了一个重新排版的版本, 新版链接:http://blog.csdn.net/ys743276112/artic ...

  3. Web前端开发必备

    前端学习相关书籍 关于书籍 HTML.CSS 类别书籍,都是大同小异,在当当网.卓越网搜索一下很多推荐.如果感觉学的差不多了,可以关注一下<CSS禅意花园>,这个很有影响力. Javasc ...

  4. Web前端开发必备工具推荐

    http://gaohaixian.blog.163.com/blog/static/12326010520114265223489/不管你做前端开发还是网页重构,前端工具都起着非常重要的作用,这里向 ...

  5. 前端开发必备调试工具（Chrome的F12自带的功能和firebug插件差不多）

    前端开发必备调试工具(Chrome的F12自带的功能和firebug插件差不多) 一.总结 Chrome的F12自带的功能和firebug插件差不多 二.前端开发必备调试工具 在前端开发中我们经常会要 ...

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

    介绍 Emmet (前身为 Zen Coding) 是一个能大幅度提高前端开发效率的一个工具: 基本上,大多数的文本编辑器都会允许你存储和重用一些代码块,我们称之为"片段".虽然片 ...

  7. （webstorm的CSS插件）前端开发必备！Emmet使用手册

    介绍 Emmet (前身为 Zen Coding) 是一个能大幅度提高前端开发效率的一个工具: 基本上,大多数的文本编辑器都会允许你存储和重用一些代码块,我们称之为“片段”.虽然片段能很好地推动你得生 ...

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

    转自:https://www.w3cplus.com/tools/emmet-cheat-sheet.html 介绍 Emmet (前身为 Zen Coding) 是一个能大幅度提高前端开发效率的一个 ...

  9. 前端开发必备的Sublime 3插件

    Sublime的大名已经无需我介绍了,首先先介绍如何启用插件安装功能: 打开Sublime 3,然后按 ctrl+` 或者在View → Show Console 在打开的窗口里黏贴这个网站上的代码( ...

随机推荐

  1. mysql 及练习题

    if() 函数的用法 IF(expr1,expr2,expr3),如果expr1的值为true,则返回expr2的值,如果expr1的值为false, mysql,'女','男') as sex fr ...

  2. 300. Longest Increasing Subsequence(LIS最长递增子序列 动态规划)

    Given an unsorted array of integers, find the length of longest increasing subsequence. For example, ...

  3. 金融 贷款类 App 审核被拒 4.3 1.2 2.1 4.2.2 问题总结

    辛辛苦苦搞了一两个月,开发测试修bug,一路艰辛,到了审核这最后一关,各位同仁,咬紧牙关!接下来是鄙人遇到过的被拒问题,望能帮到诸君! ******************************** ...

  4. H5 动画：轨迹移动 | H5游戏 推金币

    https://aotu.io/notes/2017/11/06/path-animation/ https://aotu.io/notes/2017/11/06/coindozer/

  5. JS正则表达式从入门到入土（10）—— 字符串对象方法

    字符串对象方法 search方法 String.prototype.search(reg) search方法用于检索字符串中指定的子字符串,或检索与正则表达式相匹配的子字符串,方法返回第一个匹配结果的 ...

  6. 【c++ primer, 5e】定义类相关的非成员函数

    练习 7.6 & 7.7 #include <iostream> #include <string> using namespace std; // Sales_dat ...

  7. 【c++ primer, 5e】函数匹配

    练习 6.49 候选函数:与所调用的函数的名字相同的函数的集合. 可行函数:给候选函数加上参数数量.参数类型的约束所得到的函数的集合. 6.50 a 3.4可行,二义匹配 b 2.4可行,2是最佳匹配 ...

  8. zabbix3.2通过snmp v2采集Dell服务器iDRAC口信息监控硬件

    模板下载 https://files.cnblogs.com/files/LuckWJL/zbx_export_templates.xml 模板源代码 <?xml version="1 ...

  9. openwrt生成的镜像放在哪里

    答:1.打包好之后是放在build_dir/target-$(cross-compile-toolchan-name)/linux-$(chip-series-name)_$(chip-arch)/t ...

  10. Grunt Part 1

    Grunt Part 1 Objectives and Outcomes In this exercise, you will learn to use Grunt, the task runner. ...