Emmet 常用语法参考

Emmet 介绍

注意：Emmet 语法不能为了代码美观而加空格。

Emmet 语法的前身是Zen coding，它使用缩写，来提高html/css的编写速度， VSCode 内部已经集成该语法。

Emmet 的使用方式很简单，写完缩写之后敲下tab按键，就可以自动渲染代码。

1. 快速生成HTML结构语法

1. 生成标签：直接输入标签名，按tab键即可

   <!-- 输入 div 之后直接按tab键 -->
   <div></div>
   

2. 生成多个相同标签，在标签后面加上 * num 就可以了，num 是想要生成标签的数量。

   <!-- 输入 div*3 之后直接按tab键 -->
   <div></div>
   <div></div>
   <div></div>
   

3. 生成有父子级关系的标签，可以用 >。

   <!-- 输入 div>p 之后直接按tab键 -->
   <div>
   	<p></p>
   </div>
   

4. 生成有兄弟关系的标签,用 + 就可以了。

   <!-- 输入 div+p 之后直接按tab键 -->
   <div></div>
   <p></p>
   

5. 生成带有类名或者id名字的标签，直接写 [标签名]#id名 或者 [标签名].类名1[.类名2 ...] 键就可以了，不写标签名默认生成 div 标签。

   <!-- 输入 #box 之后直接按tab键 -->
   <div id="box"></div>
   
   <!-- 输入 p#box 之后直接按tab键 -->
   <p id="box"></p>
   
   <!-- 输入 .nav 之后直接按tab键 -->
   <div class="nav"></div>
   
   <!-- 输入 p.nav1.nav2 之后直接按tab键 -->
   <p class="nav1 nav2"></p>
   

6. 生成同时带有 id名 和 类名 的标签。

   <!-- 输入 h1.title#header 之后直接按tab键 -->
   <h1 class="title" id="header"></h1>
   

7. 在生成的标签内部写内容可以用 { }。

   <!-- 输入 div{这是一个盒子} 之后直接按tab键 -->
   <div>这是一个盒子</div>
   

8. 自增符号 $。

   <!-- 生成的 div 类名是有顺序的，输入 .box$*3 之后直接按tab键 -->
   <div class="box1"></div>
   <div class="box2"></div>
   <div class="box3"></div>
   
   <!-- 在生成的标签内部同时写入序号，输入 .box$*3{$} 之后直接按tab键  -->
   <div class="box1">1</div>
   <div class="box2">2</div>
   <div class="box3">3</div>
   
   <!-- 在生成的标签内部同时写入序号，输入 .box$*3{这是第$$个盒子} 之后直接按tab键  -->
   <div class="box1">这是第01个盒子</div>
   <div class="box2">这是第02个盒子</div>
   <div class="box3">这是第03个盒子</div>
   

9. 自定义属性内容。

   <!-- 输入 a[href="#"] 之后直接按tab键 -->
   <a href="#"></a>
   
   <!-- 输入 label[for='content']>#content 之后直接按tab键 -->
   <label for="content"><span id="content"></span></label>
   

10. 自定义属性。

    <!-- 输入 input[data-content="test value"] 之后直接按tab键 -->
    <input type="text" data-content="test value">
    

11. 优先级。

    <!-- 输入 ul>li+p 之后直接按tab键 -->
    <ul>
        <li></li>
        <p></p>
    </ul>
    
    <!-- 输入 (ul>li)+p 之后直接按tab键 -->
    <ul>
        <li></li>
    </ul>
    <p></p>
    

12. 生成需要类型的表单元素。

    <!-- 输入 input:radio 之后直接按tab键 -->
    <input type="radio" name="" id="">
    

13. 设置SEO三大标签。

    <!-- 输入 ti 之后直接按tab键 -->
    <title></title>
    <!-- 输入 meta:desc 之后直接按tab键 -->
    <meta name="description" content="">
    <!-- 输入 meta:kw 之后直接按tab键 -->
    <meta name="keywords" content="">
    

2. 快速生成CSS样式语法

大部分属性直接输入属性名的简写形式即可。

1. 同时设置宽高

   /* 输入 w200+h200 之后直接按tab键 */
   width: 200px;
   height: 200px;
   

2. 设置行高

   /* 输入 lh26px 之后直接按tab键 */
   line-height: 26px;
   

3. 设置背景色

   /* 输入 bgc:#bababa 之后直接按tab键 */
   background-color: #bababa;
   

3. VSCode 快速格式化代码

Vscode 快速格式化代码:

• On Windows：Shift + Alt + F

• On Mac：Shift + Option + F

• On Ubuntu：Ctrl + Shift + I

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

1. 文件 ------.>【首选项】---------->【设置】

2. 搜索 emmet.include
   

3. 在 settings.json 中添加以下语句

   "editor.formatOnType": true,
   "editor.formatOnSave": true