介绍
Emmet (前身为 Zen Coding) 是一个能大幅度提高前端开发效率的一个工具。
在前端开发的过程中，一大部分的工作是写 HTML、CSS 代码。特别是手动编写 HTML 代码的时候，效率会特别低下，因为需要敲打很多尖括号，而且很多标签都需要闭合标签等。于是，就有了 Emmet，它可以极大的提高代码编写的效率，它提供了一种非常简练的语法规则，然后立刻生成对应的 HTML 结构或者 CSS 代码，同时还有多种实用的功能帮助进行前端开发。
VsCode内置了Emmet语法,在后缀为.html/.css中输入缩写后按Tab键即会自动生成相应代码。
请注意在VsCode新版本中按Tab不再默认启用Emmet展开缩写!需要在首选项配置中将emmet.triggerExpansionOnTab设置为true值!
使用方式：
在编辑器中输入缩写代码：！按下tab键便会得到
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>在编辑器中输入缩写代码：.demo$*5按下tab键便会得到
<div class="demo1"></div>
<div class="demo2"></div>
<div class="demo3"></div>
<div class="demo4"></div>
<div class="demo5"></div>在编辑器中输入缩写代码：.demo 或者 div.demo 按下tab键便会得到
<div class="demo"></div>常用缩写
一、HTML
1. link:css -- 快捷引入外部css文件
2. cc:ie -- 编写在ie情况下
3. script:src -- 快捷引入外部js文件
4. h1{text} -- <h1>text</h1>
5. a[href=#] -- <a href="#"></a>
6. ul>li.item$*3 --
<ul>
<li class="item1"></li>
<li class="item2"></li>
<li class="item3"></li>
</ul>
7. a.link{click} -- <a href="" class="link">click</a>
8. input:button.btn -- <input type="button" class="btn">
9. lorem定制文本 （用于测试）
lorem30 -- 生成30个word
二、CSS（个人认为比html更有用）
1. w100 -- width:100px;
2. h5p -- height:5%;
3. oh / ovh /ov-h -- overflow:hidden;
zm1 -- zoom:1;
4. o0 -- opacity:0;
op+ -- opacity: ;
filter: alpha(opacity=);
op:ie -- -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
5. db -- display:block;
dib -- display:inline-block;
6. trf -- transform各种兼容
trf:sc -- transform:scale();
trs -- transition
bdrs -- border-radius及各种前缀
bxsh -- box-shadow
7. bdb -- border-bottom
bdt -- border-top
bdl -- border-left
bdr -- border-right
8. fz -- font-size
fw -- font-weight
fw400 -- font-weight:400;
ff -- font-family
9. m-10-2-0-12 -- margin:10px 2px 0 12px;
10. c#0 -- color:#000;
cra -- color: rgba(0,0,0.5);
11. bd1-s-red -- border:1px solid red;
bd+ -- border: 1px solid #000;
bdb+ -- border-bottom: 1px solid #000;
12. m0-auto-0 -- margin:0 auto 0;
13. lh1.6 -- line-height:1.6;
vam -- vertical-align:middle;
tac -- text-align: center;
td -- text-decoration:none;
tdu -- text-decoration:underline;
ti -- text-indent
14. z10 -- z-index:10;
15. bg -- background
bgc -- background-color
bgsz:cv -- background-size:cover;
bg+ -- background:#fff url() 0 0 no-repeat;
16. pos: a -- position:absolute;
pos: r -- position: relative;
pos: f -- position: fixed;
17. fl -- float:left;
fr -- float:right;
18. curp -- cursor: pointer;声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。
