概念:emmet插件是用在编辑器里面的一个可以快速编写代码的插件,比如sublime text中,就可以用它来快速创建代码,本文主要是在sublime text的编辑器中做的测试代码。
一、html
1.快速创建html
(1) html:5 --> tab
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body> </body>
</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.}
<div class="one" id="one">
<h1>This is one.</h1>
<div class="two" id="two">
<h1>This is two.</h1>
</div>
</div>
(2)(div.one#one>h1{This is one.})+(div.two#two>h1{This is two.})
<div class="one" id="one">
<h1>This is one.</h1>
</div>
<div class="two" id="two">
<h1>This is two.</h1>
</div>
9.向上一层^
(1) div>p>a^span --> tab (即跟p同层)
<div>
<p><a href=""></a></p>
<span></span>
</div>
10.省略标签
(1) 根据父元素来自动决定标签
示例:.container --> tab
<div class="container"></div>
示例:ul>.list --> tab
<ul>
<li class="list"></li>
</ul>
11.重复代码
(1)ul>li*3 --> tab
<ul>
<li></li>
<li></li>
<li></li>
</ul>
(2)ul>li{item}*3 --> tab
<ul>
<li>item</li>
<li>item</li>
<li>item</li>
</ul>
(3) (ul>li{item})*3 --> tab
<ul>
<li>item</li>
</ul>
<ul>
<li>item</li>
</ul>
<ul>
<li>item</li>
</ul>
12.列表计算
(1) ul>li.item$*3 --> tab(PS:一位数一个$,两位数两个$)
<ul>
<li class="item1"></li>
<li class="item2"></li>
<li class="item3"></li>
</ul>
(2) ul>li.item$$*3 --> tab
<ul>
<li class="item01"></li>
<li class="item02"></li>
<li class="item03"></li>
</ul>
二、css
1.w100 --> tab
h10p --> tab
m5e --> tab
p5r --> tab
或者
w100+h10p+m5e+p5r
(PS:p --> %; e --> em; r --> rem; x --> ex;)
width: 100px;
height: 10%;
margin: 5em;
padding: 5rem;
2.@f --> tab
@font-face {
font-family:;
src:url();
}
3.供应商前缀-(一些非W3C标准的,会加前缀)
(1)-trs --> tab
-webkit-transition: prop time;
-o-transition: prop time;
transition: prop time;
PS:如果不希望加上所有前缀,可以使用缩写来指定,比如-wm-trf表示只加上-webkit和-moz前缀:
-webkit-transform: ;
-moz-transform: ;
transform: ;
三、定制Emmet插件
- 添加新缩写或更新现有缩写,可修改snippets.json文件
- 更改Emmet过滤器和操作的行为,可修改preferences.json文件
- 定义如何生成HTML或XML代码,可修改syntaxProfiles.json文件
参考资料:
http://www.iteye.com/news/27580
https://gold.xitu.io/post/5843a0e861ff4b006b97f5d5