Emmet 是高效、快速编写 HTML 和 CSS 代码的一种插件，你使用的开发HTML/CSS的编辑器如果没有内置该插件，则需要先安装，HBuildX中时内置好的。下面我们来学一下它的语法。
1、HTML5模版
输入!或html:5，然后按下Tab键即可
2、其他HTML模版
html:5 + Tab或者 ! 生成 HTML5 结构html:xt + Tab生成 HTML4 过渡型html:4s + Tab生成 HTML4 严格型
3、任意一个 html 标签输入都会生成完整的闭合标签
例如输入div 按 Tab，生成如下
<div></div>
4、生成带有 id 、class 的 HTML 标签
1）使用#生成id属性，例如输入 div#header则生成：
<div id="header""></div>
2）使用.生成class属性，例如输入 div.section则生成：
<div class="section"></div>
3）结合使用，例如输入 div#header.section则生成：
<div id="header" class="section"></div>
5、使用>生成后代标签
例如输入div>span，则生成：
<div><span></span></div>
6、使用+生成兄弟标签
例如输入div+p，则生成：
<div></div> <p></p>
7、使用^生成上级标签：
例如输入ul>li>a^h1 则生成：
<ul>
<li><a href=""></a></li>
<h1></h1>
</ul>
也可以使用多个 ^,例如输入ul>li>a^^h1 则生成:
<ul>
<li><a href=""></a></li>
</ul>
<h1></h1>
8、使用*重复生成多个标签
例如输入div*3,则生成：
<div></div> <div></div> <div></div>
例如输入ul>li*3,则生成：
<ul>
<li></li>
<li></li>
<li></li>
</ul>
9、使用()生成分组的标签
例如输入ul>(li>a)*3则生成：
<ul>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
</ul>
注意和ul>li>a*3 生成是不一样的
<ul>
<li>
<a href=""></a>
<a href=""></a>
<a href=""></a>
</li>
</ul>
10、使用[]生成自定义属性
例如输入a[href=http://www.panziye.com][alt=潘子夜博客] 则生成：
<a href="http://www.panziye.com" alt="潘子夜博客"></a>
11、使用$生成递增的属性标签
例如输入ul>li.item$*3 则生成
<ul>
<li class="item1"></li>
<li class="item2"></li>
<li class="item3"></li>
</ul>
$结合其他的还有如下使用：
1）$可以使用多次，表示位数，实现多位递增，想生成几位就输入几个$，例如输入ul>li.item$$$*3 则生成:
<ul>
<li class="item001"></li>
<li class="item002"></li>
<li class="item003"></li>
</ul>
2）结合@N想要从某个特定的顺序开始生成
例如输入ul>li.item$@10*3 则生成：
<ul>
<li class="item10"></li>
<li class="item11"></li>
<li class="item12"></li>
</ul>
3）结合@-逆序生成到某个数
例如输入ul>li.item$@-5*3 则生成：
<ul>
<li class="item7"></li>
<li class="item6"></li>
<li class="item5"></li>
</ul>
12、使用{}生成文本内容
例如输入div{我是文字内容} 则生成:
<div>我是文字内容</div>
13、缺省元素
1）声明一个带class的div可以不用输入div，直接输入.header+.main+.footer 则生成:
<div class="header"></div> <div class="main"></div> <div class="footer"></div>
2）Emmet 还会根据父标签进行判定例如输入table>.row*3>.col*2 则生成:
<table>
<tr class="row">
<td class="col"></td>
<td class="col"></td>
</tr>
<tr class="row">
<td class="col"></td>
<td class="col"></td>
</tr>
<tr class="row">
<td class="col"></td>
<td class="col"></td>
</tr>
</table>
下面是所有的隐式标签名称：
li：用于ul和ol中tr：用于table、tbody、thead和tfoot中td：用于tr中option：用于select和optgroup中
