关于Emmet编辑器插件的详解（emmet插件有什么用）

概要

Emmet是一款编辑器插件，支持多种编辑器支持。在前端开发中，Emmet 使用缩写语法快速编写 HTML、CSS 以及实现其他的功能，极大的提高前端开发效率。

官方网站

https://emmet.io/

GitHub

https://github.com/emmetio

基础知识

?HTML5

?CSS3

开发工具

?记事本等文本编辑器（需要安装插件）

Visual Studio Code

id,class,属性指定

<!-- div#mainBody—>

<divid="mainBody"></div>

<!-- div.container -->

<divclass="container"></div>

<!-- div#mainBody.container -->

<divid="mainBody"class="container"></div>

<!-- a[title=“qianfeng"] -->

<ahref=""title="qianfeng"></a>

<!-- button[data-toggle="modal" type="button"]—>

<buttondata-toggle="modal"type="button"></button>

<!-- h1{The Page Title ...}—>

批量生成

知识点

?计算符号：* 可以快速产生多个标签

?计算符号：$ 可以为类名添加数字标记

<!-- p*3—>

<p></p>

<p></p>

<p></p>

<!-- div.cssSection*3 -->

<divclass="cssSection"></div>

<divclass="cssSection"></div>

<divclass="cssSection"></div>

<!-- div.cssSection$*5 -->

<divclass="cssSection1"></div>

<divclass="cssSection2"></div>

<divclass="cssSection3"></div>

<divclass="cssSection4"></div>

<divclass="cssSection5"></div>

<!-- div.cssSection$*13—>

<divclass="cssSection01"></div>

<divclass="cssSection02"></div>

<divclass="cssSection03"></div>

<divclass="cssSection04"></div>

<divclass="cssSection05"></div>

<divclass="cssSection06"></div>

<divclass="cssSection07"></div>

<divclass="cssSection08"></div>

<divclass="cssSection09"></div>

<divclass="cssSection10"></div>

<divclass="cssSection11"></div>

<divclass="cssSection12"></div>

<!-- div.cssSection$@3*5—>

<divclass="cssSection3"></div>

<divclass="cssSection4"></div>

<divclass="cssSection5"></div>

<divclass="cssSection6"></div>

<divclass="cssSection7"></div>

<!-- div.cssSection$@-*5—>

<divclass="cssSection5"></div>

<divclass="cssSection4"></div>

<divclass="cssSection3"></div>

<divclass="cssSection2"></div>

<divclass="cssSection1"></div>

<!-- div.cssSection$@-10*5—>

<divclass="cssSection14"></div>

<divclass="cssSection13"></div>

<divclass="cssSection12"></div>

<divclass="cssSection11"></div>

<divclass="cssSection10"></div>

嵌套生成

知识点

?计算符号：>

?计算符号：+

?计算符号：^

<!-- main>section*3—>

<mian>

<section></section>

<section></section>

<section></section>

</mian>

<!-- main>section*3+button.btn.btn-primary -->

<main>

<section></section>

<section></section>

<section></section>

<buttonclass="btn btn-primary"></button>

</main>

<!-- main>section*3^footer -->

<main>

<section></section>

<section></section>

<section></section>

</main>

<footer></footer>

<!-- ul>li*3 -->

<ul>

<li></li>

<li></li>

<li></li>

</ul>

<!-- ul*2>li*3—>

<ul>

<li></li>

<li></li>

<li></li>

</ul>

<ul>

<li></li>

<li></li>

<li></li>

</ul>

<!-- ul*2>li.item*3—>

<ul>

<liclass="item"></li>

<liclass="item"></li>

<liclass="item"></li>

</ul>

<ul>

<liclass="item"></li>

<liclass="item"></li>

<liclass="item"></li>

</ul>

<!-- (ul>li*3)*2—>

<ul>

<li></li>

<li></li>

<li></li>

</ul>

<ul>

<li></li>

<li></li>

<li></li>

</ul>

编辑：千锋HTML5