首先，什么是 Emmet？官方给出了以下的解释：

Emmet uses syntax similar to CSS selectors for describing elements’ positions inside generated tree and elements’ attributes.

翻译过来就是：你可以使用类似于 CSS 选择器的语法来描述生成的树和元素属性中的元素位置。

那么什么是元素呢？元素指的就是我们的 div、p 标签等等。我们可以直接使用 p 加上 Tab 键就可以快速生成 <p></p>，这是极其方便的，现在的 IDE 好像都支持它。

嵌套运算符（Nesting Operator）

嵌套运算符用于在生成的树内定位缩写元素：它是否应该放置在上下文元素内部或附近。

（1）子代操作符（Child）：>

就像我们使用 CSS 选择器那样，我们可以使用 > 操作符来创建我们的子代。

当我在编辑器中使用这个操作符进行如下代码的创建：

div>div>p

它的意思就是 div 下有一个子代的 div，紧接着在此子代中又有一个 p 标签。

结果如下：

 

 

很简单，而且很方便吧？

---

（2）兄弟操作符（Sibling）：+

上面我们讲到了，创建子代的方法。但是现在，我们希望子代中的 div 不再包含 p 标签，而是与它成为同一级，都是父级 div 的子代。

那么我们就可以使用以下代码：

div>div+p

结果如下：

如此，它们就成为了同级的元素。

---

（3）返回上级操作符（Climb-up）：^

我们在上面的代码中，创建的结果大家都看到了。那么这时候，我想要在父级元素的 div 的同级再创建一个 div 怎么办呢？如果直接使用上面的兄弟操作符，结果就成了这样：

div>div+p+div

结果如下：

 

很显然，这不是我们想要的结果。这时候，我们就需要用到返回上级选择器了。

代码如下：

div>div+p^div

结果如下：

 

 

不错，达到了我们想要的目标。但是遇到更复杂的场景呢？一层层的嵌套后，这时候要怎么才能返回到最初的父级元素呢？

这时候我们就可以多次的使用这个操作符。
例如如下代码：

div>div>div>p^^^div

这时，我们使用了 3 次 ^ 操作符使其返回到了最初的父级 div 元素上，我们来看看结果吧：

 

没错了，完美！

---

（4）乘法操作符（Multiplication）：*

我们知道，用到重复元素最多的地方要数 ul 中的 li 了。一个一个复制，这显然是很麻烦而又枯燥的一件事情。

这时，我们可以使用乘法来解决它。比如我们这时需要 5 个 li。一个个复制太累啦，我们简单的一点代码就搞定它：

ul>li*5

结果如下：

 

很好理解吧。

---

（5）分组操作符（Grouping）：()

这个分组是什么意思呢？很好理解，比如我们在创建一个页面结构，如果一个一个往下这么写，最后再使用 ^ 一层一层的返回上去，恐怕数数都要数晕了吧。

那么使用这个分组就轻松的解决了问题，来，我们来个布局吧。

(header>h1+div>p)+(main>p)+(footer>ul>li*3)

我不知道这个 Emmet 语法是否有点困难？但是我们可以试着分析下，就很清楚，我们将其分为了 header、main 和 footer 三个页面结构。

结果如下：

 

相信你应该是正确的。

另外，我们上面还有使用 ^ 操作符来进行返回上一级的元素，但是元素多了不就很难受了吗，这时候我们就可以使用分组，将其分为一个个的部分，省去了大量的思考。

比如：

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

结果如下：

采用分组，我们就可以不用在代码中的 a 标签处使用很多的 ^ 操作符去一级一级地返回啦。明白了吗？

---

属性操作符（Attribute Operators）

属性运算符用于修改输出元素的属性。

（1）ID 和 Class（ID and CLASS）

想必在我们写代码的时候，不可能没有这两个属性吧？在 Emmet 语法中，我们可以快速生成它们。

例如下列代码：

div#header>p.news*3

这样我们就快速的创建了它们，还是使用我们最熟的 # 和 . 来写。

结果如下：

我知道，这时候你会问，如果我们的 Class 属性不止一个呢？怎么办啊！

没关系，我们使用并列书写的原则就可以啦。

div#wrapper>div.news.news-tip.+div.news.news-content

结果如下：

---

（2）定制属性（Custom attributes）

定制的属性，我们就不可以使用简单的写法啦，这时候，我们就需要使用中括号[] 来将其括起来。

比如我们的 a 标签，它默认只有 href 属性，如果我们还需要别的呢：

a[target='' title='hello world']*3

结果如下：

 

这样，我们就给其添加了别的属性了。

---

（3）数值计算操作符（Item numbering）：$

我们有时候在给 class 添加它的属性时，我们希望它是按照一定的数字进行排列，那么我们就可以使用这个操作符。

比如：

div>ul>li.item-$*3

结果如下：

如果你想倒着写数值的话呢，可以在 $ 操作符后面再加上 @-，也就是这样：

div>ul>li.item-$@-*3

结果如下：

 

不过这种情况我们很少会遇到。

最后还有一种情况，那就是你想指定数字是从几开始，那么你需要在 $ 后面加上 @N，这里的 N 为开始的数值。

div>ul>li.item-$@3*3

结果如下：

---

（4）文本操作符（Text）：{}

我们可以使用大括号 {} 来对其输入一定的内容。这个操作符就很简单啦。

div#news>p{Hello,World!}

结果就是这样啦：

 

这个不难，就不再多举例了。当然你也可以连着别的标签写。

p{What's your name?}+p{My name is Alice}

结果如下：

---

总结

以上就是 Emmet 写法的全部内容了。当然了，还有 CSS 相关的几个写法，我觉得没必要讲了，那都是对浏览器前缀的写法，现在的现代浏览器都已经不再需要使用前缀来识别属性了。