Emmet快速编写代码
★div → <div></div>, span → <span></span>
★CSS选择器
给标签指定id选择器 div#header→<div id="header"></div>
给标签指定class选择器 div.footer→<div class="footerr"></div>
★默认元素div,div可省略
★轻松添加文本 h1{foo} → <h1>foo<h1>
★轻松添加属性 a[href=#] → <a href="#"></a>
1. 父子关系：>，使用>操作符在内部相互嵌套的标签
div>ul>li
将生成：
<div> <ul> <li></li> </ul> </div>
2. 兄弟关系：+，使用+操作符将标签处于同一个层级
div+p+footer
将生成：
<div></div> <p></p> <footer></footer>
3. 上级关系：^，使用^操作符使标签与前一标签的父级处于相同的级别
div+div>p>span+em^bq
将生成：
<div> <p><span></span><em></em></p> <blockquote></blockquote> </div>
4. 乘法：使用*操作符可以输出多个标签
div>ul>li*5
将生成：
<div> <ul> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> </div>
5. 分组：()，用()操作符进行分组，使编写的代码结构更加清晰、明了，一组标签就相当一个元素
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>
6.项目编号：当使用∗可以重复的标签，用$产生有序列表
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>
也可以使用多个$操作符用0（零）来分填充数字：001 002 ...
ul>li.item$$$*5
倒序：在$后面加 @-
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、属性、有序属性值、有序文本的例子：
select#month-select>option[value=$]{$}*5
将生成：
<select name="" id="month-select">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
7. 文本：{}，使用花括号来添加文本元素：
a{Click me}
将生成：
<a href="">Click me</a>