前言
学习摘录使用，非原创。
原文链接：抛弃HTML Snippets，拥抱Emmet成为html大师！持续创作，加速成长！这是我参与「掘金日新计划 · 6 月 - 掘金 (juejin.cn)
Emmet概述
缩写是 Emmet 工具包的核心：这些特殊的表达式在运行时被解析并转换成结构化的代码块，例如 HTML。缩写的语法看起来像 CSS 选择器，带有一些特定于代码生成的扩展。因此，每个 Web 开发人员都已经知道如何使用它。
简单来说，Emmet是基于html和css这些基础，当然，也包括React和Vue，设计而出的一套snippet。
就跟我们下载的其他snippet一样，或者我们手动在vscode里新增的snippet片段，效果是一样一样的。
下面，我们来介绍下Emmet到底有多方便吧！
先贴一个例子
javascript代码解读
复制代码#page>div.logo+ul#navigation>li*5>a{Item $}
生成：
xml 代码解读复制代码<div id="page"><div class="logo"></div><ul id="navigation"><li><a href="">Item 1</a></li><li><a href="">Item 2</a></li><li><a href="">Item 3</a></li><li><a href="">Item 4</a></li><li><a href="">Item 5</a></li></ul>
</div>
好啦，下面详细来看下语法吧，语法也很简单哟！简单到看着看着就上瘾的程度哈哈哈哈
Emmet语法
-
>添加子节点-
div>pcss 代码解读复制代码<div><p></p> </div>
-
-
+同级添加标签-
div+pcss 代码解读复制代码<div></div> <p></p>
-
-
^层级向上跳一级-
通常用于
>之后，可以理解为Emmet是线性的，可以通过>和^来互相跳转层级 -
div>p+bqcss 代码解读复制代码<div><p></p><blockquote></blockquote> </div> -
div>p^bqcss 代码解读复制代码<div><p></p> </div> <blockquote></blockquote>
-
-
*重复，不止可以重复标签，也可以重复属性值和文本-
div*3css 代码解读复制代码<div></div> <div></div> <div></div>
-
-
.给标签添加class-
div.nameini代码解读 复制代码<div class="name"></div> -
div.name1.name2ini代码解读 复制代码<div class="name1 name2"></div>
-
-
#给标签添加id-
div#namebash代码解读 复制代码<div id="name"></div>
-
-
[]给标签添加属性-
div[name='xxx']ini代码解读 复制代码<div name="xxx"></div>
-
-
()分组，与其他所有语法一样，是用来将不同操作分隔成不同分组的-
div+p*3css 代码解读复制代码<div></div> <p></p> <p></p> <p></p> -
(div+p)*3css 代码解读复制代码<div></div> <p></p> <div></div> <p></p> <div></div> <p></p>
-
-
{}文本-
div{xxx}css代码解读 复制代码<div>xxx</div>
-
-
$通常与*一同使用，用来填充递增的序号-
div{item$}*3css 代码解读复制代码<div>item1</div> <div>item2</div> <div>item3</div> -
div.item$*3ini 代码解读复制代码<div class="item1"></div> <div class="item2"></div> <div class="item3"></div> -
div[name='item$']*3ini 代码解读复制代码<div name="item1"></div> <div name="item2"></div> <div name="item3"></div>
-
-
@x是用于指定基础序号的，也因此通常与$向关联使用-
div.item$@2*3ini 代码解读复制代码<div class="item2"></div> <div class="item3"></div> <div class="item4"></div>
-
-
@-是用来倒序序号的-
div.item$@-*3ini 代码解读复制代码<div class="item3"></div> <div class="item2"></div> <div class="item1"></div> -
也可以与
@x联合使用-
div.item$@-3*3ini 代码解读复制代码<div class="item5"></div> <div class="item4"></div> <div class="item3"></div>
-
-
Emmet语法中间不可以有缩进与空格，当然，如果是{}定义文本的话可以有空格
否则默认为不使用Emmet规则
Emmet css语法
这个语法用于css中
css属性+px
这个规则很简单，基本所有的都可以参考，比如
-
m2css代码解读 复制代码margin: 2px; -
p2css代码解读 复制代码padding: 2px; -
mr2css代码解读 复制代码margin-right: 2px; -
t2css代码解读 复制代码top: 2px;
其他的属性可以类比
css属性+百分比
如果number单独使用，则被解释成px，如果添加%或p则为百分比
-
m2%css代码解读 复制代码margin: 2%; -
m2pcss代码解读 复制代码margin: 2%;
其他的可以类比
css属性+em
number后跟e即可
-
m2ecss代码解读 复制代码margin: 2em;
其他类比
css属性+ex
number后跟x即可
-
m2xcss代码解读 复制代码margin: 2ex;
其他类比
css属性+important
-
m2!css代码解读 复制代码margin: 2px !important;
其他类比
css属性+颜色
默认color的颜色为#000，此时光标会选中#000，直接更改颜色即可，比如，此时直接键入red即可将默认的#000为red
-
c!css代码解读 复制代码color: #000 !important; -
c#1css代码解读 复制代码color: #111; -
c#e2css代码解读 复制代码color: #e2e2e2; -
c#fc0css代码解读 复制代码color: #fc0;此时跟
#ffcc00作用一致
css属性的模糊匹配
所有的css属性都可以通过键入关键字符来模糊匹配相应的css属性
-
bgcss代码解读 复制代码background: #000; -
poacss代码解读 复制代码position: absolute; -
lharduino代码解读 复制代码line-height: ;此时可以直接键入具体数值
-
bxz:cb或bxzccss代码解读 复制代码box-sizing: content-box; -
bxz:bb或bxzbcss代码解读 复制代码box-sizing: border-box; -
fxdccss代码解读 复制代码flex-direction: column; -
aiccss代码解读 复制代码align-items: center; -
aiscss代码解读 复制代码align-items: start; -
jcccss代码解读 复制代码justify-content: center; -
jcscss代码解读 复制代码justify-content: start; -
dbcss代码解读 复制代码display: block; -
dfcss代码解读 复制代码display: flex; -
dibarduino代码解读 复制代码display: inline-block; -
lg或bgicss代码解读 复制代码background-image: linear-gradient();
其他可以类比
css属性与:联合使用
:后面可以直接书写目标属性，当然，有的可以直接缩写
如
-
bgs:100p或
bgs100parduino代码解读 复制代码background-size: 100%; -
pl9:!css代码解读 复制代码padding-left: 9px !important;
其他可以类比
css属性+Emmet语法
css可以像标签一样使用Emmet语法
-
m2+p3+df+aiccss 代码解读复制代码margin: 2px; padding: 3px; display: flex; align-items: center; -
t3+poa+l2css 代码解读复制代码top: 3px; position: absolute; left: 2px;
其他类比，这个有点限制，比如不能poa在前面等。
其他
其他的基本没了，其他的涉及一些结合Emmet的快捷操作，比如跳转、定位等。
这些功能现在编辑器都可以实现。
最主要的用途就是上述html和css的便捷书写
Emmet语法适用于React和vue，还有一般网页，可以说是非常全能了。
Emmet官网
结语
如果文章真的有帮到你，希望可以多多点赞、收藏、关注支持一波呀！！小阵会很开心哒~
