emmet 使用手册
利用 emmet 提高前端编写效率
环境安装
emmet 官网 下载编辑器插件，PHPSTORM 默认安装 EMMET 来开发代码
快速上手
采用缩写来定义常用的标签属性，及标签。例如
#id1 按下 tab 键后会变成<div id="id1"></div>
演示一个复杂的例子。
范例：
#page>div.logo+ul#navigation>li*5>a{Item $}
按下 TAB 键后展开结果为：
<div id="page">
<div class="logo"></div>
<ul id="navigation">
<li><a href="">Item 1</a></li>
<li><a href="">Item 2</a></li>
<li><a href="">Item 3</a></li>
<li><a href="">Item 4</a></li>
<li><a href="">Item 5</a></li>
</ul>
</div>
将上述范例进行拆解，#page 默认产生了一个 id 为 div 的标签，> 和 CSS 的自结合符含义相同，代表 id=page 的 div 标签内部嵌套了，
class=logo 的 div 其中 .logo 即表示类名为 logo + 号类似 CSS 的相邻兄弟结合符及 id=navigation 的ul 和div 之间是并列关系
在后面的 *5 表示前面的 li 出现 5 次，{ $}表示 a 标签中包含按次序
增加的 Item 1-5 的内容。再根据标识符优先级关系可以将上面的结构表示如下
#page>(div.logo+(ul#navigatiaon>(li*5>a{Item $})))
符号详解
EMMET 的语法类似与 CSS 的选择器标识符，语法分为 HTML 内部标签的简明写法和 style 中 CSS 的简明语法使用
并且支持嵌套操作，这在生成表格和产生表单等嵌套层级元素中及其有效，若自定标签例如 tag 按 tab 键后会变成标签格式
在组合时中间不能加空格，因为 EMMET 会将空格识别为结束，当然字符串中或{} 中的空格除外。
嵌套操作符
- 子代:
>
范例：div>ul>li
结果
<div>
<ul>
<li></li>
</ul>
</div>
- 兄弟:
+
范例：div+p+bp
结果
<div></div>
<p></p>
<bp></bp>
- 上升:
^
范例：div+div>p>span+em^^bq+p
讲解：看上面范例攀爬元素可以出现多次，由于每出现一次>代表树的深度加一，
^ 的作用是使后面的元素或元素组(下面会有范例)向上移动一层，当^的符号大于树的深度时
就是最外层元素，
结果:
<div>
<p><span></span><em></em></p>
</div>
<blockquote></blockquote>
```html
* **元素组:`()`**
范例：`div>(header>ul>li*2>a)+footer>p`
结果
```html
<div>
<header>
<ul>
<li><a href=""></a></li>
<li><a href=""></a></li>
</ul>
</header>
<footer>
<p></p>
</footer>
</div>
- 元素组:
()
范例：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>
属性操作符
ID 和类元素:#、.
范例：div#header+div.page+div#footer.class1.class2.class3
结果
<div id="header"></div>
<div class="page"></div>
<div id="footer" class="class1 class2 class3"></div>
自定义属性:[属性名1="属性值1..." 属性名2="属性值1"...]
范例：td[title="Hello world!" colspan=3]
结果
<td title="Hello world!" colspan="3"></td>
项目编号:$、$@-、$@n
解释:$ 来表示顺序增加，$@-按照 *n1 从 n1 开始倒序减少,$@n 表示从
n 开始计数,这两种符号也可以结合使用$@-n 表示从基数为 n 加上重复符的次数倒序排列
范例：
1.ul>li.item$*5
2.ul>li.item$@-*5
3.ul>li.items$@10*5
4.ul>li.items$@-10*5
结果
<ul>
<li class="item1"></li>
<li class="item2"></li>
<li class="item3"></li>
<li class="item4"></li>
<li class="item5"></li>
</ul>
<ul>
<li class="item5"></li>
<li class="item4"></li>
<li class="item3"></li>
<li class="item2"></li>
<li class="item1"></li>
</ul>
<ul>
<li class="items10"></li>
<li class="items11"></li>
<li class="items12"></li>
<li class="items13"></li>
<li class="items14"></li>
</ul>
<ul>
<li class="items14"></li>
<li class="items13"></li>
<li class="items12"></li>
<li class="items11"></li>
<li class="items10"></li>
</ul>
文本:{}
范例：a["http://www.baidu.com"]{Click me}
结果
<a href="http://www.baidu.com">Click me</a>
元素类型
所有元素的缩写和展开方式，都是以 json 的格式存储在 snippets.json 的文件之下，这就意味着你可以自己修改，此文件来增加你所需要的缩写扩展。具体详见EMMET 元素扩展
隐式标签名
解释：当你在只使用 #类名 或 .属性名 是他可以根据父标签自动将属性添加到可能的标签中
举例:
1.span#s1>#s2
2.ul>.l_1
结果:
<span id="s1"><span id="s2"></span></span>
<ul>
<li class="l_1"></li>
</ul>
乱数假文生成器
解释：乱数假文是一堆无意义的英文字符序列，是用来验证印刷排版的，你可以在段落中先插入这些，乱序字符
来模拟看排版是否正确。lorm后面跟数字可以控制生成的单词数量
举例:
1.p>lorem
2.p>lorem3
结果: 1.
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus delectus eaque est iste laboriosam minima
necessitatibus, nostrum numquam officiis quaerat qui recusandae reiciendis repellat sint soluta tempora unde vero
voluptas!
</p>
<p>Lorem ipsum dolor.</p>
CSS 缩写
直接在 style 标签或 .css 文件中使用 css 缩写就会被，emmet 展开，
举例:1.m:10p2.mr10r3.p5rem+m10px!
结果:
/* 1 */
margin: 10%;
/* 2 */
margin-right: 10rem;
/* 3 */
margin: 10px !important;
解释: css 缩写的展开方式及其智能，自动识别缩写全称及单位，感叹号代表重要性。
厂商前缀
对于不同属性由于各浏览器厂商会定义自己的规则前缀，在使用 emmet 缩写时自动帮我们识别，添加所有 可能会出现不同前置标签的属性。