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
<div id="d1" class="test"></div>
a#a1.test[href=#]{返回首页}
<a href="#" id="a1" class="test">返回首页</a>
3.后代> 兄弟+ 上级^
使用>运算符可以用来生成彼此嵌套的元素:
div>ul>li>a
<div>
<ul>
<li><a href=""></a></li>
</ul>
</div>
使用+运算符可以用来生成彼此相邻的元素：
h1+p+a
<h1></h1>
<p></p>
<a href=""></a>
使用^运算符，可以让你的代码返回上一层。当你使用>嵌套元素时，想让后面的回到上一层，那么这个方法很适用
div>p>a^h1
<div>
<p><a href=""></a></p>
<h1></h1>
</div>
4.乘法 *
如果你想一次性生成多个相同的元素，那么就可以使用乘法运算符
ul>li*4
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
除了能一次性生成多个相同的标签之外，我们还可以通过$符号做递增；通过$@-符号做递减；
ul>li.lie$*5
<ul>
<li class="lie1"></li>
<li class="lie2"></li>
<li class="lie3"></li>
<li class="lie4"></li>
<li class="lie5"></li>
</ul>
ul>li.lie$@3*5
<ul>
<li class="lie3"></li>
<li class="lie4"></li>
<li class="lie5"></li>
<li class="lie6"></li>
<li class="lie7"></li>
</ul>
ul>li.lie$@-3*5
<ul>
<li class="lie7"></li>
<li class="lie6"></li>
<li class="lie5"></li>
<li class="lie4"></li>
<li class="lie3"></li>
</ul>
5.组合 ()
为了更有效的利用嵌套，我们常会制作一些代码片段。在Emmet中你可以通过()将一个块组合在一起
ul>(li>a)*4
<ul>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
</ul>
(ul>(li>a)*4)+(select>option*4)+p
<ul>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
</ul>
<select name="" id="">
<option value=""></option>
<option value=""></option>
<option value=""></option>
<option value=""></option>
</select>
<p></p>
6.省略标签名
在Emmet中可以省略标签名，Emmet会根据其父标签进行判定。一般情况下都是生成div标签。
.test
<div class="test"></div>
在实际中还有一下情况
ul和 ol中输入指的是li
table、tbody、thead和tfoot指的是tr
tr中指的是td
select指的是option
例如：ul>.test
<ul>
<li class="test"></li>
</ul>
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;
网友评论