09月14, 2013

emmet使用方法简介

作为一名前端开发,需要写大量的html标签,还要闭合这些标签,面对大工作量时,一个标签一个标签的写就显得效率很低。而emmet的出现恰恰可以有效提高我们的工作效率。

Emmet的前身为zend coding,前端开发的神器。下面是我目前用到的一些emmet语法。将将算是入个门吧。

首先,我是在sublime text2中通过包安装了emmet。

之后,同通过快捷键ctrl+alt+enter打开emmet命令行。

再然后,你就可以按照emmet的语法自由发挥了。但是要注意在命令之间不能有空格。

1.生成文档结构

html:5 或者 ! 生成 HTML5 结构

html:xt 生成 HTML4 过渡型

html:4s 生成 HTML4 严格型

2.基本语法

#: id

.: class

>: 后代元素

+: 同级兄弟元素

^: 上一级元素

(): 分组

*: 生成几个元素 li*5 会生成5个li标签

$: 排序

$@- :倒序

$@4:序号从4开始

3.将图片资源转换成 data url 形式

将光标移动到 background: url() 中的图片位置的地方,按下 Ctrl+’(就是那个引号) 即可将图片编码成 data url 格式。

4.选择标签的快捷键

使用 Shift+Ctrl+. 和 Shift+Ctrl+,分别向下或者向上移动,选取的是一整块,先从标签开始,再是整个属性,再是属性值。

我在这里呢,只写了能基本满足要求的简单语法,http://blog.wpjam.com/m/emmet/ 这里面介绍的很详细,更多的功能,你还可以看官方的文档http://docs.emmet.io/actions/。

版权声明:本文为博主原创文章,未经博主允许不得转载。

本文链接:https://imjiaolong.cn/post/7.html

-- EOF --

Comments

评论加载中...

注:如果长时间无法加载,请针对 disq.us | disquscdn.com | disqus.com 启用代理。