emmet语法

前言

本文整理了一些笔者在学习前端过程中的一些emmet语法。

emmet语法前身是Zen coding，它使用缩写来提高html/css的编写速度。（以下皆是笔者在VSCode中使用，在VSCode内部已经集成该语法）

1、html中的emmet

1）新建一个html页面，输入“!” 后按tab键将自动补全html基本结构；

2）生成标签：直接输入标签名，按tab键即可。比如，输入div，按tab，就可以生成<div></div>；

3）如果想要生成多个相同的标签，加上“*”即可。（以下操作均要按tab键）

<!-- div*3 -->
<div></div>
<div></div>
<div></div>

4）如果要父子级关系的标签，可以用“>”。

<!-- ul>li -->
<ul>
    <li></li>
</ul>

5）如果要生成兄弟关系的标签，可以用“+”。

<!-- div+p -->
<div></div>
<p></p>

6）如果生成带有类名或者id名的标签，可以用“.”（生成带有类名的标签）或“#”（生成带有id名的标签）。默认是生成带有类名或id名的div标签，如果要指定标签，则需要在“.”/“#”前面加上标签名。

<!-- .demo -->
<div class="demo"></div>

<!-- #demo1 -->
<div id="demo1"></div>

<!-- p.demo2 -->
<p class="demo2"></p>

<!-- p#demo3 -->
<p id="demo3"></p>

7）如果生成的div类名或id名是有顺序的，可以使用自增符号“$”。可以在$后加上“@n”指定从n开始编号。

<!-- p.demo$*5 -->
<p class="demo1"></p>
<p class="demo2"></p>
<p class="demo3"></p>
<p class="demo4"></p>
<p class="demo5"></p>

<!-- p#demo$*5 -->
<p id="demo1"></p>
<p id="demo2"></p>
<p id="demo3"></p>
<p id="demo4"></p>
<p id="demo5"></p>

<!-- p.demo$@3*5 -->
<p class="demo3"></p>
<p class="demo4"></p>
<p class="demo5"></p>
<p class="demo6"></p>
<p class="demo7"></p>

8）如果想要在生成标签的内部写文本内容，可以用“{}”

<!-- div{你好} -->
<div>你好</div>

2、css中的emmet

在css中基本上采取简写形式即可：

<style>

    div {
        /* w200，按tab */
        width: 200px;
        /* lh20，按tab */
        line-height: 20px;
    }
    
</style>

3、快速格式化代码

编写代码的时候，可能有时候多删除了空格，代码会变得不符合格式，在VSCode中，可以使用快捷键“shift+alt+f”快速格式化代码。

也可以在VSCode中设置当我们保存页面的时候自动格式化代码：

1）文件——首选项——设置

2）搜索emmet.include

3）在settings.json下的【用户】中添加以下语句：

"editor.formatOnType":true,

"editor.formatOnSave":true

设置好以后，当自动保存代码时，就可以自动格式化代码。