关于Emmet入门知识点

概要

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

官方网站

emmet.io/

GitHub

https://github.com/emmetio

基础知识

• HTML5


• CSS3


开发工具

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


Visual Studio Code

id,class,属性指定

<!-- div#mainBody —>

<div id="mainBody"></div>

<!-- div.container -->

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

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

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

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

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

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

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

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

批量生成

知识点

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


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


<!-- p*3 —>

<p></p>

<p></p>

<p></p>

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

<div class="cssSection"></div>

<div class="cssSection"></div>

<div class="cssSection"></div>

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

<div class="cssSection1"></div>

<div class="cssSection2"></div>

<div class="cssSection3"></div>

<div class="cssSection4"></div>

<div class="cssSection5"></div>

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

<div class="cssSection01"></div>

<div class="cssSection02"></div>

<div class="cssSection03"></div>

<div class="cssSection04"></div>

<div class="cssSection05"></div>

<div class="cssSection06"></div>

<div class="cssSection07"></div>

<div class="cssSection08"></div>

<div class="cssSection09"></div>

<div class="cssSection10"></div>

<div class="cssSection11"></div>

<div class="cssSection12"></div>

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

<div class="cssSection3"></div>

<div class="cssSection4"></div>

<div class="cssSection5"></div>

<div class="cssSection6"></div>

<div class="cssSection7"></div>

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

<div class="cssSection5"></div>

<div class="cssSection4"></div>

<div class="cssSection3"></div>

<div class="cssSection2"></div>

<div class="cssSection1"></div>

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

<div class="cssSection14"></div>

<div class="cssSection13"></div>

<div class="cssSection12"></div>

<div class="cssSection11"></div>

<div class="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>

<button class="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>

<li class="item"></li>

<li class="item"></li>

<li class="item"></li>

</ul>

<ul>

<li class="item"></li>

<li class="item"></li>

<li class="item"></li>

</ul>

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

<ul>

<li></li>

<li></li>

<li></li>

</ul>

<ul>

<li></li>

<li></li>

<li></li>

</ul>