作业二：实例演示Emmet常用的8种语法形式

Emmet语法让编写HTML飞起来。
VSCode内置了Emmet插件，不用自己安装。

生成html5源码模板：!+tab。

1.标签与内容 {text}

Emmet语法：h3{标题} + tab
生成：

<h3>标题</h3>

如果不输入标签，而是使用属性，默认会添加div标签
Emmet语法：.title{class为title的div}
生成：

<div class="title">class为title的div</div>

上述Emmet语法等同于div.title{class为title的div}

2.属性和语法糖 [attr]

Emmet语法：h2[class=title]{标题} + tab
生成：

 <h2 class="title">标题</h2>

上面Emmet语法前面的标签名可以省略，省略后会自动生成div标签。
Emmet语法：[id=app]{app} + tab
生成：

<div id="app">app</div>

Emmet语法：[class=title]{title} + tab

<div class="title">title</div>

id和class是高频属性、通用属性。Emmet为它们定制了语法糖：#表示id，.表示class。

上面的Emmet语法可以使用语法糖进行简化。
Emmet语法：#app1{app1} + tab
生成：

<div id="app1">app1</div>

Emmet语法：.title1{title1} + tab

<div class="title1">title1</div>

3.重复生成 *

可以同时生成多个元素。
比如，下面是生成三个div
Emmet语法：.container{box}*3 + tab
生成：

  <div class="container">box</div>
  <div class="container">box</div>
  <div class="container">box</div>

层级关系

4.父子关系 >

比如，快速生成有三个li的ul，可以使用下面的方法。
Emmet语法：ul>li{item}*3 + tab
生成：

  <ul>
    <li>item</li>
    <li>item</li>
    <li>item</li>
  </ul>

5.兄弟关系 +

Emmet语法：h3{标题}+p{内容} + tab
生成：

  <h3>标题</h3>
  <p>内容</p>

6.父级关系 ^

父级就是上一级。
Emmet语法：.box>span{text}^h3{小标题} + tab
生成：

  <div class="box"><span>text</span></div>
  <h3>小标题</h3>

7.分组 (...)

Emmet语法：nav>h3{导航}+ul>li*3>a{link} + tab
生成：

  <nav>
    <h3>导航</h3>
    <ul>
      <li><a href="">link</a></li>
      <li><a href="">link</a></li>
      <li><a href="">link</a></li>
    </ul>
  </nav>

但是，上面的写法不够清晰，可以使用分组增加可读性。
Emmet语法：nav>h3{导航}+（ul>li*3>a{link}） + tab

8.序号 $ $@

默认从1开始
Emmet语法：ul>li{item-$}*3 + tab
生成：

  <ul>
    <li>item-1</li>
    <li>item-2</li>
    <li>item-3</li>
  </ul>

自定义起始序号
上面使用$，默认是从1开始的，我们可以使用$@指定任意起始序列号。
Emmet语法：ul>li{item-$@6}*3 + tab
生成：

  <ul>
    <li>item-6</li>
    <li>item-7</li>
    <li>item-8</li>
  </ul>

倒序
在$@后面的数字前面加上-即可。
Emmet语法：ul>li{item-$@-1}*3 + tab
生成：

  <ul>
    <li>item-3</li>
    <li>item-2</li>
    <li>item-1</li>
  </ul>