Emmet 是高效、快速编写 HTML 和 CSS 代码的一种插件，你使用的开发HTML/CSS的编辑器如果没有内置该插件，则需要先安装，HBuildX中时内置好的。下面我们来学一下它的语法。
[v_blue]说明：所有的语法写好后都要按Tab键生成对应得HTML/CSS代码[/v_blue]
1、HTML5模版
输入!或html:5，然后按下Tab键即可

2、其他HTML模版
[list]html:5 + Tab 或者 ! 生成 HTML5 结构
html:xt + Tab 生成 HTML4 过渡型
html:4s + Tab 生成 HTML4 严格型[/list]

3、任意一个 html 标签输入都会生成完整的闭合标签
例如输入div 按 Tab，生成如下

4、生成带有 id 、class 的 HTML 标签
1）使用#生成id属性，例如输入 div#header则生成：

程序员导航

优网导航旗下整合全网优质开发资源，一站式IT编程学习与工具大全网站

立即访问

2）使用.生成class属性，例如输入 div.section则生成：

3）结合使用，例如输入 div#header.section则生成：

5、使用>生成后代标签
例如输入div>span，则生成：

6、使用+生成兄弟标签
例如输入div+p，则生成：

AI 工具导航

优网导航旗下AI工具导航，精选全球千款优质 AI 工具集

立即访问

7、使用^生成上级标签：
例如输入ul>li>a^h1 则生成：

也可以使用多个 ^,例如输入ul>li>a^^h1 则生成:

8、使用*重复生成多个标签
例如输入div*3,则生成：

例如输入ul>li*3,则生成：

9、使用()生成分组的标签
例如输入ul>(li>a)*3则生成：

免费在线工具导航

优网导航旗下整合全网优质免费、免注册的在线工具导航大全

立即访问

注意和ul>li>a*3 生成是不一样的

10、使用[]生成自定义属性
例如输入a[href=http://www.panziye.com][alt=潘子夜博客] 则生成：

11、使用$生成递增的属性标签
例如输入ul>li.item$*3 则生成

$结合其他的还有如下使用：
1）$可以使用多次，表示位数，实现多位递增，想生成几位就输入几个$，例如输入ul>li.item$$$*3 则生成:

2）结合@N想要从某个特定的顺序开始生成
例如输入ul>li.item$@10*3 则生成：

3）结合@-逆序生成到某个数
例如输入ul>li.item$@-5*3 则生成：

12、使用{}生成文本内容
例如输入div{我是文字内容} 则生成:

我是文字内容

13、缺省元素
1）声明一个带class的div可以不用输入div，直接输入.header+.main+.footer 则生成:

2）Emmet 还会根据父标签进行判定例如输入table>.row*3>.col*2 则生成:

下面是所有的隐式标签名称：
[list]li：用于 ul 和 ol 中
tr：用于 table、tbody、thead 和 tfoot 中
td：用于 tr 中
option：用于 select和 optgroup 中[/list]