开学第二课 Emmet语法
<!-- !+tab: 快速生产html5源码模板 -->
<!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>Emmet语法</title>
</head>
<body>
<!-- 1. 标签与内容：{text} -->
<!-- div.title{内容}或.tile{内容} -->
<h3>html是结构化标签语言</h3>
<div class="title">默认标签是div</div>
<hr/>
<!-- 2. 属性和语法糖：[attr] -->
<!-- [id=app]{内容} -->
<div id="app">app</div>
<!-- [class=title]{内容} -->
<div class="title">title</div>
<!-- id,class是高频，通用属性，emmet为其定制了语法糖 -->
<!-- id=》#，class=》. -->
<!-- #id{app1} -->
<div id="app1">app1</div>
<!-- .title1{title1} -->
<div class="title1">title1</div>
<hr/>
<!-- 3. 重复：* -->
<!-- .container{box}*3 -->
<div class="container">box</div>
<div class="container">box</div>
<div class="container">box</div>
<hr>
<!-- 4. 父子关系：> -->
<!-- ul>li{item}*3 -->
<ul>
<li>item</li>
<li>item</li>
<li>item</li>
</ul>
<hr>
<!-- 5. 兄弟关系 + -->
<!-- h2{标题}+p{内容} -->
<h2>标题</h2>
<p>内容</p>
<hr>
<!-- 6. 父级关系：^ -->
<!-- .box>span{text}^h2{小标题} -->
<div class="box">
<span>text</span>
</div>
<h2>小标题</h2>
<hr>
<!-- 7. 分组（...）-->
<!-- nav>h3{导航}+ul>li*3>a{link} -->
<!-- nav>h3{导航}+(ul>li*3>a{link}) -->
<nav>
<h3>导航</h3>
<ul>
<li><a href="">link-1</a></li>
<li><a href="">link-2</a></li>
<li><a href="">link-3</a></li>
</ul>
</nav>
<hr>
<!-- 8. 序号：$,$@ -->
<!-- 默认从1开始 ul>li{itme-$}*3 -->
<ul>
<li>item-1</li>
<li>item-2</li>
<li>item-3</li>
</ul>
<!-- 逆序 ul>li{item-$@-1}*3 -->
<ul>
<li>item-3</li>
<li>item-2</li>
<li>item-1</li>
</ul>
<!-- 自定义起始序号 ul>li{item-$@9}*3 -->
<ul>
<li>item-9</li>
<li>item-10</li>
<li>item-11</li>
</ul>
<hr>
</body>
</html>