一、Emmet的安装与介绍

Emmet (前身为 Zen Coding) 是一个能大幅度提高前端开发效率的工具，能够实现 HTML、CSS 的快速编写。

Emmet Emmet

官网地址：http://emmet.io/
官方文档：http://docs.emmet.io/cheat-sheet/
Atom的emmet介绍页面：https://atom.io/packages/emmet

1-1. 使用Emmet的好处

通常大多数的文本编辑器都会允许我们存储和重用一些代码块，我们称之为“片段”。虽然片段能很好地推动我们的生产力，但大多数的实现都有这样一个缺点：我们必须先定义代码片段，并且不能再运行时进行拓展。
而 Emmet 把片段这个概念提高到了一个新的层次：我们可以设置 CSS 形式的能够动态被解析的表达式，然后根据输入的缩写来得到相应的内容。Emmet 很成熟的并且非常适用于编写 HTML/XML 和 CSS 代码的前端开发人员，但也可以用于编程语言。

1-2. 安装Emmet

Emmet 为大部分流行的编辑器都提供了安装插件，尤其是Adobe Dreamweaver早在2015版中就全面兼容Emmet语法，只要用tab键就能展开，非常好用。
如果你要在 Atom 中使用 Emmet 插件，可按下面方法部署：

（1）点击 Atom 的“Preferences”菜单选项（Windows 下是“Settings”菜单选项）

（2）进入到 Install 页面。

（3）搜索“Emmet”包，点击 Install 按钮即可安装。

原文:Atom - Emmet插件的使用详解（HTML/CSS代码自动补全）

1-3. 简单的使用样例

（1）我们在编辑器中输入如下代码：

ul>li*6

接着按下 tab 键，之前的缩写代码就会自动扩展为完整的 html 代码片断。

以及下面的动画

emmet

二、基本语法

2-1. 后代：>

缩写↓

nav>ul>li

展开输出↓

<nav>
    <ul>
        <li></li>
    </ul>
</nav>

2-2. 兄弟：+

缩写↓

div+p+bq

展开输出↓

<div></div>
<p></p>
<blockquote></blockquote>

2-3. 上级：^

(1)缩写↓

div+div>p>span+em^bq

展开输出↓

<div></div>
<div>
    <p><span></span><em></em></p>
    <blockquote></blockquote>
</div>

(2)缩写↓

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

展开输出↓

<div></div>
<div>
    <p><span></span><em></em></p>
</div>
<blockquote></blockquote>

2-4. 分组：()

(1)缩写↓

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>

(2)缩写↓

(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>

2-5. 乘法：*

缩写↓

ul>li*5

展开输出↓

<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
<ul>

2-6.自增符号：$

(1)缩写↓

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>

(2)缩写↓

h$[title=item$]{Header $}*3

展开输出↓

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

(3)缩写↓

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>

(4)缩写↓

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>

(5)缩写↓

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>

2-7.ID和类属性

(1)缩写↓

#header

展开输出↓

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

(2)缩写↓

.title

展开输出↓

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

(3)缩写↓

form#search.wide

展开输出↓

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

(4)缩写↓

p.class1.class2.class3

展开输出↓

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

2-8.自定义属性

(1)缩写↓

p[title="Hello world"]

展开输出↓

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

(2)缩写↓

td[rowspan=2 colspan=3 title]

展开输出↓

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

(3)缩写↓

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

展开输出↓

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

2-9.文本：{}

(1)缩写↓

a{Click me}

展开输出↓

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

(2)缩写↓

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

展开输出↓

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

2-10.隐式标签

(1)缩写↓

.class

展开输出↓

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

(2)缩写↓

em>.class

展开输出↓

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

(3)缩写↓

ul>.class

展开输出↓

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

(4)缩写↓

table>.row>.col

展开输出↓

<table>
    <tr class="row">
        <td class="col"></td>
    </tr>
</table>

三、HTML标签语法

3-1. 所有未知的缩写都会转换成标签

缩写↓

hangge

展开输出↓

<hangge></hangge>

3-2.基本html标签

(1)缩写↓

展开输出↓

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
   
</body>
</html>

(2)缩写↓

展开输出↓

<a href=""></a>

(3)缩写↓

a:link

展开输出↓

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

(4)缩写↓

a:mail

展开输出↓

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

(5)缩写↓

abbr

展开输出↓

<abbr title=""></abbr>

(6)缩写↓

acronym

展开输出↓

<acronym title=""></acronym>

(7)缩写↓

base

展开输出↓

<base href="" />

(8)缩写↓

basefont

展开输出↓

<basefont />

(9)缩写↓

br

展开输出↓

<br />

(10)缩写↓

frame

展开输出↓

<frame />

(11)缩写↓

hr

展开输出↓

<hr />

(12)缩写↓

bdo

展开输出↓

<bdo dir=""></bdo>

(13)缩写↓

bdo:r

展开输出↓

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

(14)缩写↓

bdo:l

展开输出↓

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

(15)缩写↓

col

展开输出↓

<col />

(16)缩写↓

link

展开输出↓

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

(17)缩写↓

link:css

展开输出↓

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

(18)缩写↓

link:print

展开输出↓

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

(19)缩写↓

link:favicon

展开输出↓

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

(20)缩写↓

link:touch

展开输出↓

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

(21)缩写↓

link:rss

展开输出↓

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

(22)缩写↓

link:atom

展开输出↓

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

(23)缩写↓

meta

展开输出↓

<meta />

(24)缩写↓

meta:utf

展开输出↓

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

(25)缩写↓

meta:win

展开输出↓

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

(26)缩写↓

meta:vp

展开输出↓

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

(27)缩写↓

meta:compat

展开输出↓

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

(28)缩写↓

style

展开输出↓

<style></style>

(29)缩写↓

script

展开输出↓

<script></script>

(30)缩写↓

script:src

展开输出↓

<script src=""></script>

(31)缩写↓

img

展开输出↓

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

(32)缩写↓

iframe

展开输出↓

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

(33)缩写↓

embed

展开输出↓

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

(34)缩写↓

object

展开输出↓

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

(35)缩写↓

param

展开输出↓

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

(36)缩写↓

map

展开输出↓

<map name=""></map>

(37)缩写↓

area

展开输出↓

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

(38)缩写↓

area:d

展开输出↓

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

(39)缩写↓

area:c

展开输出↓

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

(40)缩写↓

area:r

展开输出↓

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

(41)缩写↓

area:p

展开输出↓

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

(42)缩写↓

form

展开输出↓

<form action=""></form>

(43)缩写↓

form:get

展开输出↓

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

(44)缩写↓

form:post

展开输出↓

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

(45)缩写↓

label

展开输出↓

<label for=""></label>

(46)缩写↓

input

展开输出↓

<input type="text" />

(47)缩写↓

inp

展开输出↓

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

(48)缩写↓

input:hidden

别名：input[type=hidden name]

展开输出↓

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

(49)缩写↓

input:h

别名：input:hidden

展开输出↓

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

(50)缩写↓

input:text, input:t

别名：inp

展开输出↓

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

(51)缩写↓

input:search

别名：inp[type=search]

展开输出↓

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

(52)缩写↓

input:email

别名：inp[type=email]

展开输出↓

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

(53)缩写↓

input:url

别名：inp[type=url]

展开输出↓

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

(54)缩写↓

input:password

别名：inp[type=password]

展开输出↓

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

(55)缩写↓

input:p

别名：input:password

展开输出↓

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

(56)缩写↓

input:datetime

别名：inp[type=datetime]

展开输出↓

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

(57)缩写↓

input:date

别名：inp[type=date]

展开输出↓

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

(58)缩写↓

input:datetime-local

别名：inp[type=datetime-local]

展开输出↓

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

(59)缩写↓

input:month

别名：inp[type=month]

展开输出↓

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

(60)缩写↓

input:week

别名：inp[type=week]

展开输出↓

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

(61)缩写↓

input:time

别名：inp[type=time]

展开输出↓

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

(62)缩写↓

input:number

别名：inp[type=number]

展开输出↓

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

(63)缩写↓

input:color

别名：inp[type=color]

展开输出↓

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

(64)缩写↓

input:checkbox

别名：inp[type=checkbox]

展开输出↓

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

(65)缩写↓

input:c

别名：input:checkbox

展开输出↓

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

(66)缩写↓

input:radio

别名：inp[type=radio]

展开输出↓

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

(67)缩写↓

input:r

别名：input:radio

展开输出↓

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

(68)缩写↓

input:range

别名：inp[type=range]

展开输出↓

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

(69)缩写↓

input:file

别名：inp[type=file]

展开输出↓

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

(70)缩写↓

input:f

别名：input:file

展开输出↓

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

(71)缩写↓

input:submit

展开输出↓

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

(72)缩写↓

input:s

别名：input:submit

展开输出↓

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

(73)缩写↓

input:image

展开输出↓

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

(74)缩写↓

input:i

别名：input:image

展开输出↓

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

(75)缩写↓

input:button

展开输出↓

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

(76)缩写↓

input:b

别名：input:button

展开输出↓

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

(77)缩写↓

isindex

展开输出↓

<isindex />

(78)缩写↓

input:reset

别名：input:button[type=reset]

展开输出↓

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

(79)缩写↓

select

展开输出↓

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

(80)缩写↓

option

展开输出↓

<option value=""></option>

(81)缩写↓

textarea

展开输出↓

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

(82)缩写↓

menu:context

别名：menu[type=context]>

展开输出↓

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

(83)缩写↓

menu:c

别名：menu:context

展开输出↓

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

(84)缩写↓

menu:toolbar

别名：menu[type=toolbar]>

展开输出↓

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

(85)缩写↓

menu:t

别名：menu:toolbar

展开输出↓

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

(86)缩写↓

video

展开输出↓

<video src=""></video>

(87)缩写↓

audio

展开输出↓

<audio src=""></audio>

(88)缩写↓

html:xml

展开输出↓

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

(89)缩写↓

keygen

展开输出↓

<keygen />

(90)缩写↓

command

展开输出↓

<command />

(91)缩写↓

bq

别名：blockquote

展开输出↓

<blockquote></blockquote>

(92)缩写↓

acr

别名：acronym

展开输出↓

<acronym title=""></acronym>

(93)缩写↓

fig

别名：figcaption

展开输出↓

<figure></figure>

(94)缩写↓

figc

别名：figcaption

展开输出↓

<figcaption></figcaption>

(95)缩写↓

ifr

别名：iframe

展开输出↓

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

(96)缩写↓

emb

别名：embed

展开输出↓

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

(97)缩写↓

obj

别名：object

展开输出↓

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

(98)缩写↓

src

别名：source

展开输出↓

<source></source>

(99)缩写↓

cap

别名：caption

展开输出↓

<caption></caption>

(100)缩写↓

colg

别名：colgroup

展开输出↓

<colgroup></colgroup>

(101)缩写↓

input:text, input:t

别名：inp

展开输出↓

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

(102)缩写↓

input:text, input:t

别名：inp

展开输出↓

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

(103)缩写↓

btn:r

别名：button[type=reset]

展开输出↓

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

(104)缩写↓

btn:s

别名：button[type=submit]

展开输出↓

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

四、CSS

4-1. CSS模块使用模糊搜索来查找未知的缩写

如： == ov-h == ovh == oh

如果没有找到缩写，则转换为属性名称:foo-bar → foo-bar: |;

您可以使用连字符作为前缀缩写以生成供应商的前缀属性： -foo

4-2. 常用样式简写

(1)缩写↓

pos

展开输出↓

position:relative;

(2)缩写↓

展开输出↓

top:;

五、XSL

(1)缩写↓

xsl

展开输出↓

Alias of !!!+xsl:stylesheet[version=1.0 xmlns:xsl=http://www.w3.org/1999/XSL/Transform]>{ |}

<?xml version="1.0" encoding="UTF-8"?> <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"></xsl:stylesheet>

(2)缩写↓

var

展开输出↓

<xsl:variable name=""></xsl:variable>

查看全部命令集>>

以及这里的一篇使用心得

Emmet Logo Emmet快速语法

一、Emmet的安装与介绍

1-1. 使用Emmet的好处

1-2. 安装Emmet

1-3. 简单的使用样例

二、基本语法

2-1. 后代：>

2-2. 兄弟：+

2-3. 上级：^

2-4. 分组：()

2-5. 乘法：*

2-6.自增符号：$

2-7.ID和类属性

2-8.自定义属性

2-9.文本：{}

2-10.隐式标签

三、HTML标签语法

3-1. 所有未知的缩写都会转换成标签

3-2.基本html标签

四、CSS

4-1. CSS模块使用模糊搜索来查找未知的缩写

4-2. 常用样式简写

五、XSL

Emmet快速语法