缩写
缩写是Emmet工具包的关键：这些特殊的表达式在运行时解析和转化成结构化的代码块，例如HTML。缩写的语法看起来像CSS选择器，它有一些特定于代码生成的扩展。因此，每个Web开发者都已经知道如何使用它。
下面是一个例子：这个缩写1
#page>div.logo+ul#navigation>li*5>a{Item $}
可以转化为1
2
3
4
5
6
7
8
9
10<div id="page">
<div class="logo"></div>
<ul id="navigation">
<li><a href="">Item 1</a></li>
<li><a href="">Item 2</a></li>
<li><a href="">Item 3</a></li>
<li><a href="">Item 4</a></li>
<li><a href="">Item 5</a></li>
</ul>
</div>
只需一个键击。在许多编辑器中（如Eclipse、Sublime Text 2、Espresso等），插件也会生成适当的制表符标记，以便您可以使用Tab键在生成的代码的重要位置之间快速遍历。
缩写优化HTML和XML的生成，但不限于此，还使书写繁琐的标记代码变得轻而易举。你可以开始学习语法来释放Emmet缩写的全部力量。
缩写语法
Emmet使用类似于CSS选择器的语法来描述生成树和元素属性中的元素位置。
元素
可以使用元素的名称，如div或p来生成HTML标记。Emmet没有预定义的可用标记名称集，可以编写任何单词并将其转换成标记：div → <div></div>, foo → <foo></foo>等等。
嵌套运算符
嵌套运算符用于在生成的树中定位缩写元素：是应该放在上下文元素内还是应该放在上下文元素附近。
Child: >
可以使用>运算符将元素嵌套在一起：1
div>ul>li
将产生1
2
3
4
5<div>
<ul>
<li></li>
</ul>
</div>
Sibling: +
使用+运算符将元素彼此靠近，在同一水平上：1
div+p+bq
将输出1
2
3<div></div>
<p></p>
<blockquote></blockquote>
Climb-up: ^
使用>运算符，您将沿着生成的树下降，所有兄弟元素的位置将根据最深的元素进行解析：1
div+div>p>span+em
将扩展到1
2
3
4<div></div>
<div>
<p><span></span><em></em></p>
</div>
使用^运算符，您可以爬树一级并更改以下元素应该出现的上下文：1
div+div>p>span+em^bq
输出到1
2
3
4
5<div></div>
<div>
<p><span></span><em></em></p>
<blockquote></blockquote>
</div>
您可以使用尽可能多的^运算符，每个运算符将向上移动一个级别：1
div+div>p>span+em^^^bq
将输出1
2
3
4
5<div></div>
<div>
<p><span></span><em></em></p>
</div>
<blockquote></blockquote>
Multiplication: *
使用*运算符，可以定义要输出多少次元素：1
ul>li*5
输出1
2
3
4
5
6
7<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
Grouping: ()
Emmet的用户使用括号来对复杂缩写中的子树进行分组：1
div>(header>ul>li*2>a)+footer>p
扩展到1
2
3
4
5
6
7
8
9
10
11<div>
<header>
<ul>
<li><a href=""></a></li>
<li><a href=""></a></li>
</ul>
</header>
<footer>
<p></p>
</footer>
</div>
如果您正在使用浏览器的DOM，则可以将组看作文档片段：每个组包含缩写子树，并且其后面的所有元素都以与组的第一个元素相同的级别插入。
可以将组嵌套在一起，并将它们与乘法*运算符组合：1
(div>dl>(dt+dd)*3)+footer>p
产生1
2
3
4
5
6
7
8
9
10
11
12
13<div>
<dl>
<dt></dt>
<dd></dd>
<dt></dt>
<dd></dd>
<dt></dt>
<dd></dd>
</dl>
</div>
<footer>
<p></p>
</footer>
用组，你甚至可以用一个缩写来写完整的页面标记，但是请不要这样做。
属性运算符
属性运算符用于修改输出元素的属性。例如，在HTML和XML中，您可以快速地将 class 属性添加到生成的元素中。
ID and CLASS
在CSS中，您使用elem#id和elem.class符号来达到具有指定id或class属性的元素。在Emmet中，可以使用非常相同的语法将这些属性添加到指定的元素：1
div#header+div.page+div#footer.class1.class2.class3
输出1
2
3<div id="header"></div>
<div class="page"></div>
<div id="footer" class="class1 class2 class3"></div>
Custom attributes
可以使用[attr]符号（类似于CSS）将自定义属性添加到元素中：1
td[title="Hello world!" colspan=3]
输出<td title="Hello world!" colspan="3"></td>
- 您可以在方格括号内放置尽可能多的属性。
- 您不必指定属性值：
td[colspan title]将生成<td colspan="" title="">，每个空属性内都有tabstop（如果编辑器支持它们）。 - 您可以使用单引号或双引号引用属性值。
- 如果它们不包含空格，则不需要引用值：
td[title=hello colspan=3]将起作用。Item numbering: $
使用乘法*运算符，可以重复元素，但用$可以对它们进行编号。将$操作符放入元素的名称、属性名或属性值，以输出重复元素的当前数目：1
ul>li.item$*5
输出1
2
3
4
5
6
7<ul>
<li class="item1"></li>
<li class="item2"></li>
<li class="item3"></li>
<li class="item4"></li>
<li class="item5"></li>
</ul>
您可以在一行中使用多个$来用零来填充数字：1
ul>li.item$$$*5
输出1
2
3
4
5
6
7<ul>
<li class="item001"></li>
<li class="item002"></li>
<li class="item003"></li>
<li class="item004"></li>
<li class="item005"></li>
</ul>
改变编号基础和方向
使用@修饰符，可以更改编号方向（升序或降序）和基数（例如起始值）。
例如，为了改变方向,在$后面添加@-：1
ul>li.item$@-*5
输出1
2
3
4
5
6
7<ul>
<li class="item5"></li>
<li class="item4"></li>
<li class="item3"></li>
<li class="item2"></li>
<li class="item1"></li>
</ul>
若要更改计数器基值，请将@N修饰符添加到$：1
ul>li.item$@3*5
转化为1
2
3
4
5
6
7<ul>
<li class="item3"></li>
<li class="item4"></li>
<li class="item5"></li>
<li class="item6"></li>
<li class="item7"></li>
</ul>
你可以把这些修饰词组合在一起：1
ul>li.item$@-3*5
转化为1
2
3
4
5
6
7<ul>
<li class="item7"></li>
<li class="item6"></li>
<li class="item5"></li>
<li class="item4"></li>
<li class="item3"></li>
</ul>
Text: {}
可以使用大括号向元素添加文本：1
a{Click me}
将产生1
<a href="">Click me</a>
注意，{text}被用作一个单独的元素（如，div、p等）并被解析，但是当写在元素后面时，它具有特殊的含义。例如，a{click}和a>{click}将产生相同的输出，但a{click}+b{here}和a>{click}+b{here}将不会：1
2
3
4
5<!-- a{click}+b{here} -->
<a href="">click</a><b>here</b>
<!-- a>{click}+b{here} -->
<a href="">click<b>here</b></a>
在第二个例子中，<b>元素放置在<a>元素内。这就是区别：当{text}在元素之后被写入时，它不会改变父级上下文。这里有一个更复杂的例子，说明为什么它是重要的：1
p>{Click }+a{here}+{ to continue}
产生1
<p>Click <a href="">here</a> to continue</p>
在本例中，为了在<p>元素中写入Click here to continue，我们在p之后显式地用>运算符沿着树向下移动，但是在a元素的情况下，我们不必这样做，因为我们只需要使用<a>元素和here单词，而不需要改变父上下文。
为了比较，这里有相同的缩写，没有子节点>操作：1
p{Click }+a{here}+{ to continue}
产生1
2<p>Click </p>
<a href="">here</a> to continue
关于缩写格式的注记
当您熟悉Emmet的缩写语法时，您可能希望使用一些格式来使缩写更加可读。例如，在元素和运算符之间使用空格，如：1
(header > ul.nav > li*5) + footer
但是它不起作用，因为空间是一个停止符号，Emmet停止了缩写解析。
许多用户错误地认为每个缩写都应该用新行编写，但是他们错了：您可以在文本中的任何地方键入和扩展缩写：
你不需要新行来展开缩写1
<li>Hello World span.info<li>
Emmet很聪明，可以理解你想扩大span.info的缩写，而不是li>span.info。1
<li>span.info<li>
这就是为什么Emmet需要一些指示符（比如空格）的地方，它应该停止解析，以不扩展任何你不需要的东西。如果你仍然认为复杂的缩略语需要这样的格式化使它们更可读：
- 缩写不是模板语言，它们不必是“可读的”，它们必须是“快速可扩展和可移除的”。
- 你不需要写复杂的缩写。不要认为“打字”是网页开发中最慢的过程。您将很快发现，构造单个复杂缩写比构造并键入几个短缩写要慢得多，而且容易出错。
phpStorm中的用法
介绍
HTML中所有的标签都是盒子
盒子有几种关系：
盒子本身，盒子并列，盒子包含
类是统一类字符，可以很多盒子使用
id代表唯一，只能一个盒子使用phpStorm中标签输入方式
HTML表达式TAB健- HTML标签输入
标签名 tab - 内容输入
表达式>{内容} tab - 类输入
标签名.类名 tab - ID输入
标签#id名 tab - 序号输入
表达式*数字 tab - 多个相同的输入(乘法)
表达式 $* 数字 tab - 并列输入
表达式+表达式+表达式 tab - 包含盒子输入
表达式>表达式>表达式 tab - 括号分组
(表达式) tab
ul>(li>a)