<!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>Document</title>
</head>
<body>
<!-- 1 标签与内容 `{text}`-->
<h3>html是结构化标签语言</h3>
<div class="title">默认标签div</div>
<hr />
<!-- 2 属性和语法糖：`[attr]` -->
<!-- id,class 是高频通用属性，emmet为他定制了语法糖 -->
<!-- `id=>#,class=>.` -->
<!-- #appP{app1} -->
<div id="app">app1</div>
<!-- .title{test} -->
<div class="title">test</div>
<hr />
<!-- 3 重复 `*` -->
<div class="container"></div>
<div class="container"></div>
<div class="container"></div>
<!-- 4 父子关系 `>` ul>li{test}*3-->
<ul>
<li>test</li>
<li>test</li>
<li>test</li>
</ul>
<hr />
<!-- 5 兄弟：`+` h3{标题}+p{内容}-->
<h3>标题</h3>
<p>内容</p>
<hr />
<!-- 6. 父级：`^` .box>span{test}^h3{标题}-->
<div class="box"><span>test</span></div>
<h3>标题</h3>
<hr />
<!-- 7. 分组 `(...)` nav>h3{导航}+(ul>li*3>a[href='link']{link})-->
<nav>
<h3>导航</h3>
<ul>
<li><a href="link">link</a></li>
<li><a href="link">link</a></li>
<li><a href="link">link</a></li>
</ul>
</nav>
<!-- 8.序列 `$`,`$@` ul>li*4>a[href='link']{text-$@2}-->
<ul>
<li><a href="link">text-2</a></li>
<li><a href="link">text-3</a></li>
<li><a href="link">text-4</a></li>
<li><a href="link">text-5</a></li>
</ul>
<!-- 9. 序列倒序 `$`,`$@` ul>li*4>a[href='link']{text-$@-9} -->
<ul>
<li><a href="link">text-12</a></li>
<li><a href="link">text-11</a></li>
<li><a href="link">text-10</a></li>
<li><a href="link">text-9</a></li>
</ul>
</body>
</html>
