关于Emmet入门知识点

概要

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

 

官方网站

https://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>

 

 编辑：千锋HTML5