先來介紹一下什么是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
將生成：
width: 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>