<!DOCTYPE html>
<html lang="zh-CN">
<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>Eemmet语法</title>
</head>
<body>
<!-- 1.标签与内容：`[text]` -->
<h3>html是结构化标签语言</h3>
<div class="title">默认标签div</div>
<hr/>
<!-- 2.属性和语法糖：`[attr]` -->
<!-- [id=cat]{cat1} -->
<div id="cat">cat1</div>
<!-- [class=fish]{fish1} -->
<div class="fish">fish1</div>
<!-- id,class是高频,通用属性,emmet为它定制了"语法糖" -->
<!-- `id=>#，class=>.` -->
<!-- #cat{cat} -->
<div id="cat">cat</div>
<!-- .fish{fish} -->
<div class="fish">fish</div>
<hr/>
<!-- 3.重复：`*` -->
<!-- .container{box}*4 -->
<div class="container">box</div>
<div class="container">box</div>
<div class="container">box</div>
<div class="container">box</div>
<hr/>
<!-- 4.父子：`>` -->
<!-- ul>li{clumn}*4 -->
<ul>
<li>clumn</li>
<li>clumn</li>
<li>clumn</li>
<li>clumn</li>
</ul>
<hr/>
<!-- 5.兄弟：`+` -->
<!-- h1{标题}+p{内容} -->
<h1>标题</h1>
<p>内容</p>
<hr/>
<!-- 6.父级：`^` -->
<!-- .box>span{text}^h1{标题} -->
<div class="box">
<span>text</span>
</div>
<h1>标题</h1>
<hr/>
<!-- 7.分组：`(...)` -->
<!-- nav>h3{导航}+ul>li*4>a{link} -->
<!-- nav>h3{导航}+(ul>li*4>a{link}) -->
<nav>
<h3>导航</h3>
<ul>
<li><a href="">link</a></li>
<li><a href="">link</a></li>
<li><a href="">link</a></li>
<li><a href="">link</a></li>
</ul>
</nav>
<hr/>
<!-- 8.序号：`$`,`$@` -->
<!-- 默认从1开始：ul>li{item-$}*4 -->
<ul>
<li>item-1</li>
<li>item-2</li>
<li>item-3</li>
<li>item-4</li>
</ul>
<!-- 自定义起始序号：ul>li{item-$@8}*4 -->
<ul>
<li>item-8</li>
<li>item-9</li>
<li>item-10</li>
<li>item-11</li>
</ul>
<hr/>
<!-- 逆序：ul>li{item-$@-2}*4 -->
<ul>
<li>item-5</li>
<li>item-4</li>
<li>item-3</li>
<li>item-2</li>
</ul>
</body>
</html>