先来介绍一下什么是Emmet语法——就是使用类似于 CSS 选择器的语法描述元素在生成的文档树中的位置及其属性。
缩写语法:
快速生成html模板：
在HBuilder空白的HTML页面 使用html:5 或者直接使用 ！在按Tab键
html:5
将生成：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
</head>
<body>
<!--code-->
</body>
</html>
使用元素名称生成html标签：
输入元素标签：例如 div 标签然后按下Tab键
div
将生成：
<div></div>
常见的CSS样式：
输入常用的css样式：例如：w120然后按下Tab键
w120
将生成：
120px;
定义class 和 ID：
输入 标签名 .class名：例如：我要生成一个div class名为header的标签 div.header按下Tab
div.header
将生成：
<div class="header"></div>
嵌套：嵌套运算符用于在生成的树中定位缩写元素：是否应将其放置在context元素的内部或附近(摘自Emmet文档)。
子：> 使用运算符将元素嵌套在彼此内 例如：div>ul>li>a 按下Tab
div>ul>li>a
将生成：
<div> <ul> <li><a href=""></a></li> </ul> </div>
兄弟：+ 生成同级关系的元素 例如:div+p+span按下Tab标签
div+p+span
将生成：
<div></div> <p></p> <span></span>
生成重复的元素：* 使用 * 可以生成重复的元素 例如：li*10按下Tab标签
li*10
将生成：
<li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li>
文本： 使用 { } 把想要写的文本放入里面 例如：a{ 山不在高有仙则名 }按下Tab
a{山不在高有仙则名}
将生成：
<a href="">山不在高有仙则名</a>
组合：使用括号()内容对复杂缩写中的子树进行分组 例如：
div>(header>ul>li*2)+footer
将生成：
<div>
<header>
<ul>
<li></li>
<li></li>
</ul>
</header>
<footer></footer>
</div>