通常大多数的文本编辑器都会允许我们存储和重用一些代码块，我们称之为 “片段或代码模板”。虽然片段能很好地推动我们的生产力，但大多数的实现都有这样一个缺点：我们必须先定义代码片段，并且不能再运行时进行拓展。而Emmet把片段这个概念提高到了一个新的层次：我们可以设置CSS形式的能够动态被解析的表达式，然后根据输入的缩写来得到相应的内容。Emmet很成熟的并且非常适用于编写HTML/XML和CSS代码的前端开发人员，但也可以用于编程语言。它支持大多数流行文本编辑器，极大的 改善 了开发html/css的 效率
类似于css选择器的语法，用来控制元素在文档树中的位置及其属性 eg: nav>div#nav+ul>li*5>a+span
<nav> <div id="nav"></div> <ul> <li><a href=""></a><span></span></li> <li><a href=""></a><span></span></li> <li><a href=""></a><span></span></li> <li><a href=""></a><span></span></li> <li><a href=""></a><span></span></li> </ul> </nav>
eg1: html:5 eg2: !
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> </body> </html>
关系符 >：用于定位嵌套关系的元素，">" 左右两端分别是父元素、子元素 eg: nav>div>ul>li
<nav> <div> <ul> <li></li> </ul> </div> </nav>关系符 +：用于定位同级关系的元素，"+"左右两端分别是上下两个元素 eg: nav>div>ul>li>p+span+strong
<nav> <div> <ul> <li> <p></p> <span></span> <strong></strong> </li> </ul> </div> </nav>关系符 ^：用于在HTML片段中爬到上一层并更改应该出现以下元素的上下文 eg: nav>div>q>strong+em^blockquote
<nav> <div> <q> <strong></strong><em></em> </q> <blockquote></blockquote> </div> </nav>^也可以连续多个使用 eg: nav>div>div>div^^^strong
<nav> <div> <div> <div></div> </div> </div> </nav> <strong></strong>关系符 * ：用于定义输出元素的次数 eg: div>ul>li*5>a+span
<div> <ul> <li><a href=""></a><span></span></li> <li><a href=""></a><span></span></li> <li><a href=""></a><span></span></li> <li><a href=""></a><span></span></li> <li><a href=""></a><span></span></li> </ul> </div>关系符 ()：用于将定义代码片段的缩写分组为复杂的结构 eg: article>(header>div+div>img+h1+p)+(footer>div>ul>li*5>h4+q)
<article> <header> <div></div> <div> <img src="" alt=""> <h1></h1> <p></p> </div> </header> <footer> <div> <ul> <li> <h4></h4> <q></q> </li> <li> <h4></h4> <q></q> </li> <li> <h4></h4> <q></q> </li> <li> <h4></h4> <q></q> </li> <li> <h4></h4> <q></q> </li> </ul> </div> </footer> </article>以上分组也可以用^代替，如下： eg: article>header>div+div>img+h1+p^^footer>div>ul>li*5>h4+q
<article> <header> <div></div> <div> <img src="" alt=""> <h1></h1> <p></p> </div> </header> <footer> <div> <ul> <li> <h4></h4> <q></q> </li> <li> <h4></h4> <q></q> </li> <li> <h4></h4> <q></q> </li> <li> <h4></h4> <q></q> </li> <li> <h4></h4> <q></q> </li> </ul> </div> </footer> </article>
属性运算符 #：将id属性指向指定的元素 eg: div#header1
<div id="header1"></div>属性运算符 .：将class属性指向指定的元素 eg：div#header2.clearfix
<div id="header2" class="clearfix"></div>属性运算符 [ ]：自定义属性与相应的值 eg: input#in1.form-control[name=“queryBtn” value=“提交” type=“button” disabled=“disabled”]
<input type="button" id="in1" class="form-control" name="queryBtn" value="提交" disabled="disabled">属性运算符 $ ：在元素的名称、属性的名称或属性值中输出当前重复元素的数量 eg: div>ul>li#li$*5
<div> <ul> <li id="li1"></li> <li id="li2"></li> <li id="li3"></li> <li id="li4"></li> <li id="li5"></li> </ul> </div>属性运算符 @-：用在 $ 之后，用来更改 $ 的递增方向 eg: div>ul>li#lili@-*5
<div> <ul> <li id="lili5"></li> <li id="lili4"></li> <li id="lili3"></li> <li id="lili2"></li> <li id="lili1"></li> </ul> </div>属性运算符 @N：用在 $ 之后，用来更改 $ 的递增基数 eg: div>ul>li#demo$@3*5
<div> <ul> <li id="demo3"></li> <li id="demo4"></li> <li id="demo5"></li> <li id="demo6"></li> <li id="demo7"></li> </ul> </div>综合示例：倒序、基数不为1 eg:div>ul>li#link$@-5*5
<div> <ul> <li id="link9"></li> <li id="link8"></li> <li id="link7"></li> <li id="link6"></li> <li id="link5"></li> </ul> </div>案文 {}：使用大括号向元素添加文本
用法一： eg: div{他山之石，可以攻玉}+q{时间就像海绵里的水，想挤总能挤出来的}+cite{鲁迅}
<div>他山之石，可以攻玉</div> <q>时间就像海绵里的水，想挤总能挤出来</q>用法二： 当元素直接加{}时，元素与{}为一个整体，它们与后面追加元素是同级关系，当元素与 {} 用 > 连接时，它与后面追加元素 （包括{}） 是父子关系 eg: div>{他山之石，可以攻玉}+q{时间就像海绵里的水，想挤总能挤出来的}+cite{鲁迅}
<div>他山之石，可以攻玉<q>时间就像海绵里的水，想挤总能挤出来的</q><cite>鲁迅</cite></div>lorem：自动填充文本 eg: div.showdiv>ul>li#link$@-20*5>lorem20
<div class="showdiv"> <ul> <li id="link20">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur dignissimos ducimus illo nam nulla numquam pariatur perferendis perspiciatis quae suscipit! </li> <li id="link19">Ipsam, libero, repellat? Accusamus aliquam aspernatur dolorum ducimus error ex, expedita impedit iure magnam, maiores, perspiciatis qui rem sunt ut. </li> <li id="link18">Dignissimos inventore, laboriosam laborum nam odio officiis optio perspiciatis possimus quaerat sapiente. Animi blanditiis impedit maiores voluptate! Autem numquam, quam! </li> <li id="link17">Eum molestias mollitia optio quasi voluptas. Dicta doloribus eveniet impedit iste itaque officiis quo ratione rerum? Corporis quibusdam quos sed. </li> <li id="link16">Architecto aut consequuntur cum cumque delectus doloremque dolores enim fugiat labore laboriosam laudantium libero minus modi, nisi quisquam saepe soluta. </li> </ul> </div>css缩写：当使用缩写定义css属性时，Emmet会自动附加兼容不同浏览器的前缀
<style type="text/css"> body { /* bdrs */ -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; /* bg */ background: #000; /* lh */ line-height: 1000px; /* fs */ font-style: italic; /* co */ color: red; /* fl */ float: left; ... ... } </style>
1.表达式中不能使用空格，空间是停止符号，Emmet停止缩略语解析的地方，如果使用空格，Emmet会停止解析 2.每个表达式可以写在支持Emmet文本的任何地方，不用另起一行
