Sublime text Emmet 插件语法使用

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

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

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

1、HTML标签

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

2、标签属性

2.1、生成带 class 属性的标签

2.2、生成带 id 属性的标签

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

2.4、生成带内容的标签

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

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

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

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

3、嵌套重复标签

3.1、生成重复标签

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

3.2、生成嵌套标签

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

3.3、生成重复带序号标签

序号从 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、父级同辈标签

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

6、分组

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

7、文档声明

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

7.1、HTML5文档声明

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

7.2、HTML4严格模式文档声明

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

7.3、HTML4过渡模式文档声明

html:4t 和 html:xt 同上段说明，不赘述。

8、其他

8.1、外链CSS

最后来个例子，装（xuan）逼（yao）下

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

官方参考资料：官方介绍文档