前端神器emmet语法语法gif形式详解

前言

工欲善其事，必先利其器，好的神器可以给我们的生活和工作带来事半功倍的效率，这篇文章就是介绍和演示一前端神器 emmet,它最大的特点就是用来帮我们前端同学快速书写html。

要完成下面这段html结构，在原始的刀耕火种时代我们是这样写的……

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
</ul>

;

然而科技是第一生产力，在程序员的世界里，生产力也是必不可少的，为了提高我们的代码产出率，emmet便诞生了，于是同样为了完成上述工作，emmet可以以下面简洁而又高效的方式完成，简直帅呆了，有木有

;

看到这里小伙伴是不是开始鸡冻了呢！ 有木有想自己亲自撸一把的冲动呢！！！接下来我们开始看一下emmet的语法吧，至于emmet，该怎么使用，各大编辑器里面插件怎么安装，大家百度google一把就可以知道，开始吧，骚年。

1. 基础语法 标签 id class ( tagName # . )

;

2. 后代 兄弟 父级 ( > + ^ )

;

3. 乘号 分组 ( () )

;

4. 自增 自减 ( $ $@- )

;

5. 自定义属性 ( [key=value] )

;

6. 文本 ( {} )

;

7. 隐式标签

隐式标签指的是例如在一般情况下 ul 的子元素是 li，在使用emmet语法的时候，我们可以直接写ul.list 而不用去指定子元素的标签名 ul>li.list

;

8. 缩写 :

;

结语

日常的工作可以将上述的各种方式混合使用，最终让我们的编码从速度和质量上得到较大的提升。