Emmet 语法主要内容如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Emment语法</title>
</head>
<body>
<!-- 1.标签与内容:{text} -->
<h3>html是结构化标签语言</h3>
<div class="tltie">默认标签</div>
<hr>
<!-- 2. 属性与语法糖:{attr} -->
<!-- 语法: [id=app]{app} -->
<div id="app">app</div>
<div class="title">title</div>
<!-- id,class是高频属性,为它定制了“语法糖” -->
<!-- id : #; class : . -->
<!-- .title{title} -->
<div class="title">title</div>
<hr>
<!-- 3. 重复: * -->
<!-- .container{box}*3 -->
<div class="container">box</div>
<div class="container">box</div>
<div class="container">box</div>
<!-- 4.父子:> -->
<ul>
<li></li>
<li></li>
<li></li>
</ul>
<hr>
<!-- 5. 兄弟: + -->
<!-- h3{标题}+p{内容} -->
<h3>标题</h3>
<p>内容</p>
<hr />
<!-- 6.父级:^ -->
<!-- .box>span{text}^h3{小标题} -->
<div class="box">
<span>text</span>
</div>
<h3>小标题</h3>
</body>
</html>