emmet常用基本语法备忘

Emmet (前身为 Zen Coding) 是一个能大幅度提高前端开发效率的工具,能够实现 HTML、CSS 的快速编写。

记住一些常用的emmet基本语法,大大提高前端代码书写速度。

1、html初始结构:!

下图中的结构,偷懒的都会直接一个!=> Tab 解决,这样可以快速生成基础的结构,同时防止手写时忘记某个代码块,输入错误的代码。

 

2、后代:>

缩写:nav>ul>li

输出:

 

3、兄弟:+

缩写:div+p+bq

输出:

 

4、上级:^,上级的上级可以使用两个^^表示

缩写:div+div>p>span+em^bq

输出:

 

5、分组:()

缩写:div>(header>ul>li*2>a)+footer>p

输出:

 

6、乘法:*

缩写:ul>li*5

输出:

 

7、自增符号:$,从1自增,如果需要从01或001自增,可以使用$$和$$$

缩写:ul>li.item$*5

输出:

 

8、ID和类属性

缩写:#header 和.title

输出:

 

9、自定义属性

缩写:p[title=”Hello world”]

输出:<p title=”Hello world”></p>

 

10、文本:{}

缩写:a{Click me}

输出:<a href=””>Click me</a>

 

11、隐式标签

缩写:table>.row>.col

输出:

 

12、基本html标签

处上面说的!之外,html的一些常用标签都可以缩写,如下

缩写:a

输出:<a href=””></a>

缩写:input

输出:<input type=”text” />

缩写:img

输出:<img src=”” alt=”” />

缩写:script:src

输出:<script src=””></script>

缩写:form:post

输出:<form action=”” method=”post”></form>

其他基本html标签都类似,大家可以在日常编码中去多去实践,熟练之后对前端代码的编写速度将有大幅提升