Emmet

Emmet

功能
snippet(代码片段,不如用专门的片段插件)
abbreviation expand(简写展开)

目的
只有一个,加快web开发(编码速度)

Emmet特性
简写支持嵌套
简写支持分组
简写支持乘法
简写支持自增和自减,起序,编号

解析简写代码可以用Tab键或者Ctrl+E来调用

Emmet与HTML

1.创建初始文档

只要输入!或html:5，然后点击tab键，你就会看到一个HTML5的doctype默认标签

html:5或!：HTML5文档类型
html:xt：XHTML过渡型文档类型
html:xs：XHTML严格型文档类型
html:4t：HTML4过渡型文档类型
html:4s：HTML4严格型文档类型

2.轻松添加类、id、文本和属性

连续输入元素名称和ID，Emmet会自动为你补全

使用E#ID添加ID名
使用E.class添加类名
使用E[attr]添加属性
使用E{text}添加文本

div#d1.test

a#a1.test[href=#]{返回首页}

返回首页

3.后代> 兄弟+ 上级^

使用>运算符可以用来生成彼此嵌套的元素:
div>ul>li>a

使用+运算符可以用来生成彼此相邻的元素：
h1+p+a

使用^运算符，可以让你的代码返回上一层。当你使用>嵌套元素时，想让后面的回到上一层，那么这个方法很适用
div>p>a^h1

4.乘法 *

如果你想一次性生成多个相同的元素，那么就可以使用乘法运算符
ul>li*4

除了能一次性生成多个相同的标签之外，我们还可以通过$符号做递增；通过$@-符号做递减；
ul>li.lie$*5

ul>li.lie$@3*5

ul>li.lie$@-3*5

5.组合 ()

为了更有效的利用嵌套，我们常会制作一些代码片段。在Emmet中你可以通过()将一个块组合在一起
ul>(li>a)*4

(ul>(li>a)*4)+(select>option*4)+p

6.省略标签名

在Emmet中可以省略标签名，Emmet会根据其父标签进行判定。一般情况下都是生成div标签。
.test

在实际中还有一下情况

ul和 ol中输入指的是li
table、tbody、thead和tfoot指的是tr
tr中指的是td
select指的是option

例如：ul>.test

Emmet与CSS

属性值：CSS的属性，它只需要添加一个值。这是通过一个组合缩写和所需要的值一起来完成。例如，fz18将输出font-size:18px
单位：在Emmet中每一个单位都有其缩写形式：

px→ 默认
p→ %
e→ em
r→ rem
x→ ex

例如fz1e font-size:1em

多个单位：CSS中的某些属性，比如margin，允许多个值。只需要每个值之间使用（减号）-
例如：m10-20-30-40 margin: 10px 20px 30px 40px;
多个属性：可以使用加号+运算符来创建多个属性
例如：m10+p20+fz30

  margin: 10px;
  padding: 20px;
  font-size: 30px;

Emmet定义了所有已知的CSS属性和缩写
盒模型相关

d展开为display: block;
d:n展开为display:none;
d:f展开为display:flex;
d:i展开为display:inline;

d:ib展开为display: inline-block;
fl展开为float: left;
fl:r展开为float: right;
fl:n展开为float: none;
pos展开为position:relative;
pos:a展开为position: absolute;
pos:f展开为position:fixed;
m展开为margin: ;
m:a展开为margin: auto;
mt展开为margin-top: ;
类型的还有 mt,mb,mr
p展开为padding: ;
其他和margin类型
bxz展开为box-sizing: border-box;

字体相关

f展开为font: ;
fz展开为font-size: ;
ff展开为font-family: ;

fs展开为font-style: italic;

文本相关

va展开为vertical-align: top;
va:m展开为vertical-align: middle;
ta展开为text-align: left;
ta:c展开为text-align: center;
td:n展开为text-decoration: none;
wos展开为word-spacing: ;
c展开为color: #000;
c:r展开为color: rgb(0, 0, 0);
c:ra展开为color: rgba(0, 0, 0, .5);

op展开为opacity: ;
op+展开为opacity: ;filter: alpha(opacity=);

背景

bg展开为background: #000;
bg+展开为background: #fff url() 0 0 no-repeat;
bgc展开为background-color: #fff;
bgi展开为background-image: url();
bgr展开为background-repeat: ;
bgp展开为background-position: 0 0;
bgsz展开为background-size: ;

边框和轮廓

bd展开为border: ;
bd+展开为border: 1px solid #000;
bd:n展开为border: none;
bdl展开为border-left: ;
bdl+展开为border-left: 1px solid #000;
bdrs展开为border-radius: ;
bdc:t展开为border-color: transparent;
ol展开为outline: ;

列表

lis展开为list-style: ;
lst展开为list-style-type: ;
list:n展开为list-style-type:none;

其他

!展开为!important
anim展开为animation: ;
anim-展开为animation:name duration timing-function delay iteration-count direction fill-mode;
trf展开为transform: ;
trf:r展开为transform: rotate(angle);
trf:rx展开为transform: rotateX(angle);
trf:sc展开为transform: scale(x, y);
trf:t展开为transform: translate(x, y);
trf:t3展开为transform: translate3d(tx, ty, tz);
trs展开为transition: prop time;
us展开为user-select: none;