Emmet 语法探析
Emmet(Zen Coding)是一个能大幅度提高前端开发效率的一个工具。
大多数编辑器都支持Snippet,即存储和重用一些代码块。但是前提是：你必须先定义
这些代码块。
Emmet的特点在于你可以设置CSS形式的能够动态解析的表达式，然后根据所输入
的表达式来生成相应的内容。Emmet还有一些常用的高级功能，如生成Lorem Ipsum,更新CSS的属性值，
将图片资源转换成data url形式等。通过对Emmet的熟练使用，可以极大地推动你的生产力。
使用Emmet生产HTMl语法解析
- 生成HTML文档初始结构
首先使用Ctrl+N新建一个页面，然后使用Ctrl+Shift+PSet Syntax:HTML.在得到的支持HTML语法
文档中输入一个"!",然后摁下TAB键，就可以生成一个HTML5的标准文档结构：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
< title>Document</title>
</head>
<body>
</body>
</html>
其他常用的 HTML 结构指令：
- html:5 或者!生成HTML5结果
- html:xt 生成HTML4过渡型
- html:4s 生成HTML4严格型
生成带有id、class的HTML标签
Emment 默认的标签为div
生成id为main的div标签,指令为#main
编写一个clas为aaa的span标签,指令为span
编写一个id为list的class为fruit的ul标签,指令为ul#list.fruit
生成后代:>
大于号表示后面要生成的内容为当前标签的后代。例如要生成一个无序列表，
而且被class为list的div包裹，则指令为:div.list>ul>li
生成兄弟:+
如果要生成平级元素，就需要+号,ex: div+p+dq
生成上级元素: ^
根据ul与li的关系不难理解上级元素(Climb-up)的意思。
尝试如下指令: div>ul>li^span,生成结构如下：
<div>
<ul>
<li></li>
</ul>
<span></span>
</div>
重复生成多份: *
对于一个无序列表,如果要生成多个li标签，可以直接在li后面
*上附加所需个数 : ul>li*5
生成分组:()
用括号进行分组，可以生成层析关系明确的结构，如:div>(header>ul>li*2>a)+footer>p
<div>
<header>
<ul>
<li><a href=""></a></li>
<li><a href=""></a></li>
</ul>
</header>
<footer>
<p></p>
</footer>
</div>
生成自定义属性: [attr]
a标签中往往需要附带href属性和title属性，如果想要生成一个href为"http://google.com",
title为"google"的a标签，指令为: a[href="http://google.com" title="google"]
对生成内容编号: $
ex: 为五个li增加一个class属性值为itme1,然后依次递增从1-5，则使用$符号：ul>li.item$*5,
- 如果要生成三位数的序号,
ul>li.item$$$*5; - 同时也可以在$后面增加@-来实现倒序排列,
ul>li.item$@-*5; - 使用@N指定开始的序号:
ul>li.item$@3*5，生成如下代码；
<ul>
<li class="item3"></li>
<li class="item4"></li>
<li class="item5"></li>
<li class="item6"></li>
<li class="item7"></li>
</ul>
生成文本内容：{}
ex: 生成a标签里面的内容：a[href="http://github.com"]{点击链接GITHUB}
这样就生成一个github的超链接.生成内容的时候特别要注意前后的符号关系，
虽然 a>{Click me} 和 a{Click me} 生成的结构是相同的，但是加上其他的内容就不一定了.
ex:
<!-- a{click}+b{here} -->
<a href="">click</a><b>here</b>
<!-- a>{click}+b{here} -->
<a href="">click<b>here</b></a>
切忌指令中，不要有空格，一面导致代码无法使用。