在最开始做静态页的时候，我们经常把一个页面分为三个大块，也就是header（头部），content（中间内容），footer（底部）。然后在header中增加一个nav导航栏，content可能分为左右两个部分，即left和right。可能我们就会如下码出代码:
<div class="demo">
<header>
<nav>
<li><a href="#link"></a></li>
<li><a href="#link"></a></li>
<li><a href="#link"></a></li>
<li><a href="#link"></a></li>
<li><a href="#link"></a></li>
</nav>
</header>
<div class="content">
<div class="left"></div>
<div class="right"></div>
</div>
<footer></footer>
</div>
如果你已经熟练或者习惯手动码或者复制粘贴是可以的，但是这里展示下Emmet的魔法。
我们运行下面这一行代码：
div.demo>(header>nav>li.li$*5>a[href=#link$]{showPage$})+(div.content>div.left+div.right)+footer
(注意不要为了视觉效果好看就打空格，打了空格可能失效，然后在最后按tab，中间按tab只能显示部分代码)
效果如下：
<div class="demo">
<header>
<nav>
<li class="li1"><a href="#link1">showPage1</a></li>
<li class="li2"><a href="#link2">showPage2</a></li>
<li class="li3"><a href="#link3">showPage3</a></li>
<li class="li4"><a href="#link4">showPage4</a></li>
<li class="li5"><a href="#link5">showPage5</a></li>
</nav>
</header>
<div class="content">
<div class="left"></div>
<div class="right"></div>
</div>
<footer></footer>
</div>
语法：
- 后代 > : nav>ul>li
<nav>
<li></li>
</nav>
- 兄弟 + : div>header+div+footer
<nav>
<li></li>
</nav>
- 上级 ^ : div+div>p>span+em^bq(<blockquote>标记长引用)
<div></div>
<div>
<p><span></span><em></em></p>
<blockquote></blockquote>
</div>
- 分组() : div>(header>ul>li*2>a)+footer
<header>
<ul>
<li><a href=""></a></li>
<li><a href=""></a></li>
</ul>
</header>
<footer></footer>
- 乘法* ：div>nav>li*5>a
<div>
<nav>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
</nav>
</div>
- 自增符号$ , 属性 , 文本 {}: div>nav>li.li$*5>a[href=#link$]{showPage$}
<div>
<nav>
<li class="li1"><a href="#link1">showPage1</a></li>
<li class="li2"><a href="#link2">showPage2</a></li>
<li class="li3"><a href="#link3">showPage3</a></li>
<li class="li4"><a href="#link4">showPage4</a></li>
<li class="li5"><a href="#link5">showPage5</a></li>
</nav>
</div>
