Emmet常用语法

Emmet的前身是Zen coding,它使用缩写,能大幅度提高前端开发效率的一个工具m,来提高html/css的编写速度。
在这里插入图片描述
详情可看:https://www.w3cplus.com/tools/emmet-cheat-sheet.html

1、生成标签 直接输入标签名 按tab键即可 比如 div 然后tab 键, 就可以生成

<div></div>

2、如果想要生成多个相同标签 加上 * 就可以了 比如 div*3 就可以快速生成3个div

<div></div>
<div></div>
<div></div>

3、.如果有父子级关系的标签,可以用 > 比如 ul > li就可以了

<ul>
	<li></li>
</ul>

4、如果有兄弟关系的标签,用 + 就可以了 比如 div+p

<div></div>
<p></p>

5、 如果生成带有类名或者id名字的, 直接写 .demo 或者 #two tab 键就可以了

<div class="demo"></div>

<div id="two"></div>

6、 如果生成的div 类名是有顺序的, 可以用 自增符号 $ ,直接写.demo$*3 tab 键就可以了

   <div class="demo1"></div>
   <div class="demo2"></div>
   <div class="demo3"></div>

猜你喜欢

转载自blog.csdn.net/u011523953/article/details/105414982