Emmet插件的使用

Emmet插件的使用:

Emmet插件功能：就是能快速成成 html 和 css 代码.
如果在sublime 上安装Emmet 插件可以实时看到将要生成的代码。 对于新手来说是很友好的。 可以去尝试一下。 熟练后转到自己公司用的开发工具上。
Sublime上安装emmet插件

基本使用:Tab键即可快速得到代码

每个命令输完后按下Tab键即可快速得到代码

1.生成HTML模板

1. 新建一个HTML文档，输入“!”或“html:5”，然后按Tab键,生成基本的html标签模板
   

2. 生成后代元素：> 大于号表示后面要生成的内容是当前标签的后代。

 eg: div>ul>li

3.生成兄弟元素： + 加号表示后面的元素和前面的元素是兄弟元素

div+p+bq 得到代码如下：

4.生成上级元素：^ 表示^ 后面的元素与^ 前面的元素的父元素是平级，即兄弟元素。一个^ 表示提升一个层级，两个提升两级.

命令：div+div>p>span+em^ bq 得到代码如下：

5生成类名：.类名

• . Emmet 默认的标签为 div ，如果我们不给出标签名称的话，默认就生成 div 标签
• Emmet会根据父标签进行判定。比如在
  • 中输入.item，就会生成
• 

6.生成ID：#ID名

命令：#container 得到代码如下：

7.重复生成多份：*数字 *号后面是想重复生成的份数

命令：ul>li*5 得到代码如下：

8.生成文本内容：{} 大括号里面是你想添加的文本内容

命令：a{百度} 得到代码如下:

是不是很好用呢。