CSS学习笔记——emmet语法

Posted 2021-06-24 UDK_KL.

使用缩写来提高编写速度，部分编译器不支持

快速生成html结构语法

1. 生成标签：直接输入标签名并按tab键
2. 生成多个相同标签： 加*

div*3

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

3. 如果是有父子关系的标签可以用> 如 ul>li

ul>li

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

4. 如果是兄弟关系的标签（并列关系） 用+

div+p

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

5. 生成带有类名或id名字的直接写 .类名 或 #id tab

.123
<div class="123"></div>

#123
<div id="123"></div>

6. 如果生成的div类名是顺序的，可以用自增符号 $

.deom$*5

<div class="deom1"></div>
<div class="deom2"></div>
<div class="deom3"></div>
<div class="deom4"></div>
<div class="deom5"></div>

7. 如果要在生成的标签内些内容用{}

div{三连}*3
<div>三连</div>
<div>三连</div>
<div>三连</div>

div{$}*5
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>