Emmet语法快速提升web开发效率！【web必备技能】

Emmet语法大纲：

  • 快速生成HTML结构语法
  • 快速生成CSS样式语法
  • 快速格式化代码

1.快速生成HTML结构语法

  1. 生成标签 直接输入标签名 按tab键即可 比如 div 然后tab 键， 就可以生成 <div></div>
  2. 如果想要生成多个相同标签 加上 * 就可以了 比如 div*3 就可以快速生成3个div
  3. 如果有父子级关系的标签，可以用 > 比如 ul > li就可以了
  4. 如果有兄弟关系的标签，用 + 就可以了 比如 div+p
  5. 如果生成带有类名或者id名字的， 直接写 .demo 或者 #two tab 键就可以了
  6. 如果生成的div 类名是有顺序的， 可以用自增符号$
  7. 如果想要在生成的标签内部写内容可以用 { } 表示
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<!-- 生成标签 直接输入标签名 按tab键即可 比如 div 然后tab 键， 就可以生成 <div></div> -->
<div></div>

<!-- 如果想要生成多个相同标签 加上 * 就可以了 比如 div*3 按tab键就可以快速生成3个div -->
<div></div>
<div></div>
<div></div>

<!-- 如果有父子级关系的标签，可以用 > 比如 ul > li就可以了 -->
<ul>
	<li></li>
</ul>

<!-- 如果有兄弟关系的标签，用 + 就可以了 比如 div+p -->
<div></div>
<p></p>
 
<!-- 生成带有类名如 直接写 .demo按tab 键就可以了 默认标签是div 如果想是别的标签就在.demo前面加上标签名，如span.demo -->
<div class="demo"></div>
<span class="demo"></span>
  
<!-- 生成带有id名字的标签 默认是div 如果想是别的标签，就在.demo前面加上标签名即可，如span#demo -->
<div id="demo"></div>
<span id="demo"></span>
  
<!-- 如果生成的div 类名是有顺序的， 可以用 自增符号 $ 如.demo$*5  -->
<div class="demo1"></div>
<div class="demo2"></div>
<div class="demo3"></div>
<div class="demo4"></div>
<div class="demo5"></div>
  
<!-- 我们想生成的标签里面默认显示几个文字  div{文字}-->
<div>pink老师不是gay</div>     
<div>我不喜欢男人</div>
 
<!-- div{$}*5 -->
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>

2.快速生成CSS样式语法

CSS 基本采取简写形式即可

1.比如 w200 按tab 可以 生成 width: 200px;

1
2
3
4

/* w200 按tab 可以 生成 width: 200px */
width: 200px;

2.比如 lh26px 按tab 可以生成 line-height: 26px;

1
2
3
4

/* lh26px 按tab 可以生成 line-height: 26px */
line-height: 26;

3.其他同理… 这里不做演示啦~

3.快速格式化代码

这里使用的方法是安装自动格式化插件~ 当然有别的方法，个人觉得此方法最棒！其他方法还请自行百度吧~

插件名称: JS-CSS-HTML Formatter

下面以汉化插件为例来演示安装方法

  • 点击左侧《扩展》图标，在搜索框输入需要安装的插件名称chinese，点击安装进行安装即可。安装完毕，需要重启软件使插件生效。

    点击左侧《扩展》图标，在搜索框输入需要安装的插件名称chinese

    点击安装进行安装即可。安装完毕，需要重启软件使插件生效。

  • JS-CSS-HTML-formatter 插件安装方法同理，很简单，就不一一演示了

插件管理：禁用、启用或卸载已安装的插件

在扩展界面，点击已安装，点击对应插件的设置，根据需求选择启用、禁用和卸载即可。