emmet插件快捷键：
Posted Triangel
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了emmet插件快捷键：相关的知识，希望对你有一定的参考价值。
概念：emmet插件是用在编辑器里面的一个可以快速编写代码的插件，比如sublime text中，就可以用它来快速创建代码，本文主要是在sublime text的编辑器中做的测试代码。
一、html
1.快速创建html
（1） html:5 --> tab
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 </head> 7 <body> 8 9 </body> 10 </html>
2.标签
（1） 标签 --> tab
示例：p --> tab
<p></p>
3.类.或ID#
（1） p.class1#id1 --> tab
<p class="class1" id="id1"></p>
（2）p.class1.class2#id1#id2 --> tab(只会选择一个ID，可以有多个class)
<p class="class1 class2" id="id2"></p>
4.文本{}
（1） p{你好} --> tab
<p>你好</p>
5.属性
（1） a[href=https://baidu.com] --> tab
<a href="https://baidu.com"></a>
6.嵌套>
（1） p>span
<p><span></span></p>
7.同级+
（1）p+span
<p></p> <span></span>
8.嵌套分级升级版
（1）div.one#one>h1{This is one.}+div.two#two>h1{This is two.}
1 <div class="one" id="one"> 2 <h1>This is one.</h1> 3 <div class="two" id="two"> 4 <h1>This is two.</h1> 5 </div> 6 </div>
（2）(div.one#one>h1{This is one.})+(div.two#two>h1{This is two.})
1 <div class="one" id="one"> 2 <h1>This is one.</h1> 3 </div> 4 <div class="two" id="two"> 5 <h1>This is two.</h1> 6 </div>
9.向上一层^
（1） div>p>a^span --> tab (即跟p同层)
1 <div> 2 <p><a href=""></a></p> 3 <span></span> 4 </div>
10.省略标签
（1） 根据父元素来自动决定标签
示例：.container --> tab
<div class="container"></div>
示例：ul>.list --> tab
1 <ul> 2 <li class="list"></li> 3 </ul>
11.重复代码
（1）ul>li*3 --> tab
1 <ul> 2 <li></li> 3 <li></li> 4 <li></li> 5 </ul>
（2）ul>li{item}*3 --> tab
1 <ul> 2 <li>item</li> 3 <li>item</li> 4 <li>item</li> 5 </ul>
（3） (ul>li{item})*3 --> tab
1 <ul> 2 <li>item</li> 3 </ul> 4 <ul> 5 <li>item</li> 6 </ul> 7 <ul> 8 <li>item</li> 9 </ul>
12.列表计算
（1） ul>li.item$*3 --> tab(PS:一位数一个$，两位数两个$)
1 <ul> 2 <li class="item1"></li> 3 <li class="item2"></li> 4 <li class="item3"></li> 5 </ul>
（2） ul>li.item$$*3 --> tab
1 <ul> 2 <li class="item01"></li> 3 <li class="item02"></li> 4 <li class="item03"></li> 5 </ul>
二、css
1.w100 --> tab
h10p --> tab
m5e --> tab
p5r --> tab
或者
w100+h10p+m5e+p5r
（PS：p --> %; e --> em; r --> rem; x --> ex;）
1 width: 100px; 2 height: 10%; 3 margin: 5em; 4 padding: 5rem;
[email protected] --> tab
1 @font-face { 2 font-family:; 3 src:url(); 4 }
3.供应商前缀-（一些非W3C标准的，会加前缀）
（1）-trs --> tab
1 -webkit-transition: prop time; 2 -o-transition: prop time; 3 transition: prop time;
PS：如果不希望加上所有前缀，可以使用缩写来指定，比如-wm-trf表示只加上-webkit和-moz前缀：
1 -webkit-transform: ; 2 -moz-transform: ; 3 transform: ;
三、定制Emmet插件
- 添加新缩写或更新现有缩写，可修改snippets.json文件
- 更改Emmet过滤器和操作的行为，可修改preferences.json文件
- 定义如何生成HTML或XML代码，可修改syntaxProfiles.json文件
参考资料：
http://www.iteye.com/news/27580
https://gold.xitu.io/post/5843a0e861ff4b006b97f5d5
以上是关于emmet插件快捷键：的主要内容，如果未能解决你的问题，请参考以下文章
sublime text3 emmet 插件 安装方法,,快捷键