快速生成HTML结构语法

---

1. Tab补全

如要生成div 输入div后按Tab即可补全

2. 多个相同标签

用 *
如生成三个div 写为div*3

3. 有子父级关系

用 >
如ul>li

<!-- ul>li -->
    <ul>
      <li></li>
    </ul>
    <!-- ul>li*3 -->
    <ul>
      <li></li>
      <li></li>
      <li></li>
    </ul>
    <!-- 结合灵活应用 -->

4. 有兄弟级关系

用 +
如 div+p 就会在和div平级生成p标签

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

5. 有类名或id

直接写.content 或者#content （content是你自己想写的类名）

<!-- 如p标签 -->
<!-- p.content 就会生成如下 -->
<p class="dcontent"></p>

6. 自增 $

如生成的div类名有顺序 使用$

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

7. 标签内内容

用{}

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

快速生成css样式

---

1. Tab补全

不多说了Enter也可以

2. 首字母缩写

如需要设置宽度62px 可写 p20 然后点Tab或Enter都可

<!-- tac -->
text-align: center;
<!-- 其他同理首字母缩写即可 -->

快速格式化代码

---

1. Vscode快捷键

右击找到格式化文档就可以看到

2. 设置保存时自动格式化

1) 文件>首选项>设置 （或者直接点击左下角齿轮
2) 搜索emmet.include;
3) 在setting.json下的用户中对应添加:

项	值
editor.formatOnType	true
editor.formatOnSave	true

设置一次即可
新版本
搜索format
将On Save勾上即可