5分钟学会前端开发神器 —— Emmet
Posted 物联网技术交流平台
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了5分钟学会前端开发神器 —— Emmet相关的知识，希望对你有一定的参考价值。
Emmet是一款编辑器插件，支持多种编辑器支持。在前端开发中，Emmet 使用缩写语法快速编写 html、CSS 以及实现其他的功能，极大的提高前端开发效率。
Emmet ['emɪt] 是一款编辑器插件，支持多种编辑器支持，例如常用的VS code、sublime text都有很好的支持。
在前端开发中，Emmet 使用缩写语法快速编写 HTML、CSS 以及实现其他的功能，极大的提高前端开发效率。
Emmet HTML
本文只讲解HTML部分的使用方法，其他语言的emmet语法请参考官方文档https://docs.emmet.io/.
Show you the code
step1: 编辑器ctrl+shift+p打开命令输入emmet，回车
step2: 输入如下代码，回车
#page>div.logo+ul#navigation>li*5>a{Item $}
转义结果为：
<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>
vs code emmet效果预览：
Ok，我猜你已经学会了，so easy！
原理
Emmet使用特殊的表达式Abbreviations，也就是缩写：这种特殊的表达式会被Emmet解析并转义成结构化的代码块。Emmet使用类似CSS选择器的语法来描述元素在DOM树节点的位置和属性。
嵌套操作符
嵌套操作用来生成元素的DOM树中的兄弟节点或子节点
child: >
Sibling: +
Climb-up: ^
div+div>p>span+em^bq
转义成
<div></div>
<div>
<p><span></span><em></em></p>
<blockquote></blockquote>
</div>
Multiplication: *
Grouping: ()
div>(header>ul>li*2>a)+footer>p
转义成
<div>
<header>
<ul>
<li><a href=""></a></li>
<li><a href=""></a></li>
</ul>
</header>
<footer>
<p></p>
</footer>
</div>
()可嵌套，例如：
(div>dl>(dt+dd)*3)+footer>p
转义成
<div>
<dl>
<dt></dt>
<dd></dd>
<dt></dt>
<dd></dd>
<dt></dt>
<dd></dd>
</dl>
</div>
<footer>
<p></p>
</footer>
属性操作符
ID、CLASS、[attr]自定义属性、$有序编号、 @
文本操作符{}
p>{Click }+a{here}+{ to continue}
转义成
<p>Click <a href="">here</a> to continue</p>
觉得本文有收获？请转发分享给更多人
关注「 物联网技术交流平台 」，了解更多知识
以上是关于5分钟学会前端开发神器 —— Emmet的主要内容，如果未能解决你的问题，请参考以下文章