Home / Blog / software

Sublime text Emmet 插件语法使用

Author: Vic.Wang 2016/03/08 Tags:sublimetextsublime textemmetZen Coding代码生成标签生成DOM生成

这是又一篇 Sublime 插件的使用笔记,主要介绍 Emmet 插件,它的前身是 Zen Coding ,它使用类似CSS选择器的语法,用过的人可能都知道,它能快速批量的生成DOM结构,简直是前端开发的神器,用对了它能大大提高我们的工作效率,可以早点下班哦 ^_^

输入相关的缩写,按Tab键或者Ctrl + E补全相关标签和代码。

做了些动态图,具体看下面哈

1、HTML标签

emmet生成标签

不论是HTML定义的系统标签,还是自定义标签,都可以直接生成。

2、标签属性

2.1、生成带 class 属性的标签

emmet生成带class属性的标签

2.2、生成带 id 属性的标签

emmet生成带id属性的标签

2.3、多个 class 属性和其他属性

emmet生成多个属性的标签

2.4、生成带内容的标签

生成带内容的标签

要想生成的 html 代码里面带内容,需要使用{}花括号,花括号里面是内容。

2.5、生成带属性和值的标签

生成带属性和值的标签

属性带值需要用[]中括号,多个键值对直接用空格,属性值可以使用单引号或者双引号。

生成带属性和值的标签2

多个属性值,也可以写多个中括号[],每个属性和值写在单独的 [] 里面。

3、嵌套重复标签

3.1、生成重复标签

生成重复标签

*来重复生成标签,后面跟的数字表示生成几个,比如*5就会生成5个,多用于列表,ul li,tr td等,如3.2。

3.2、生成嵌套标签

生成嵌套标签

嵌套标签用>表示, > 后面的是子元素,也可以多层嵌套。

3.3、生成重复带序号标签

生成重复带序号标签
生成重复带序号标签2

序号从1开始,也可以使用多个$ => 1$$ => 01$$$ => 001不仅可以用在类名id名上,也可以用在内容上。

3.4、生成倒序标签

生成倒序标签

序号不仅可以递增,也是可以递减的,用的是@-,在 $ 和数字之间。

3.5、生成指定排序开始的标签

生成指定排序开始的标签

语法是从指定的位置开始,比如上面从3开始,生成5个,3 4 5 6 7。

3.6、生成指定倒序的标签

生成指定倒序的标签

4、生成兄弟标签

4.1、兄弟标签

生成兄弟标签

兄弟标签用的是+号,生成的 html 都是同级的。

4.2、兄弟内容+标签

生成兄弟内容+标签

5、父级同辈标签

生成父级同辈标签

父级同辈标签用的是^号,能返回前一个元素的上一级,几个 ^ 返回几级,和路径一个概念,生成的是上级的同辈元素,也就是父级的同辈元素,是不是有点绕?

生成父级同辈标签2
生成父级同辈标签3

6、分组

分组

缩写分组用的是()小括号,当嵌套多层的时候为了不引起错乱和解析错误,就需要分下组了。

7、文档声明

除了能快速生成上面说的标签属性外,还可以用来写文档声明哦,有谁记得 HTML4 那段长长的声明代码?没几个人记得吧,虽然 HTML5 变得很短了,但是能快速生成也是极好的嘛。

7.1、HTML5文档声明

html5文档声明
html5文档声明

上面两种是 HTML5 声明的快速生成语法,我最喜欢用的就是第一种了,你没看错,就一个!感叹号。

7.2、HTML4严格模式文档声明

HTML4严格模式文档声明
HTML4严格模式文档声明

上面html:4shtml:xs的区别是一个是 HTML4 的标准,一个是 XHTML 的标准,你注意声明代码,是不同的。

7.3、HTML4过渡模式文档声明

HTML4过渡模式文档声明
HTML4过渡模式文档声明

html:4thtml:xt同上段说明,不赘述。

8、其他

8.1、外链CSS

外链CSS

最后来个例子,装(xuan)逼(yao)下

外链CSS

官方不推荐这样写的哦!以后发现了新的写法再来更新,先这样啦。

参考资料:

官方:官方介绍文档