mac系统下 Emmet使用指南

哈哈哈，感觉这个名字起的很高大上有木有，使用指南
其实就是自己的一点使用总结罢了
废话少说，来正文

写在前面

我是在sublime上使用的，所以先讲一下sublime安装Emmet的方法

1. 安装Package Control组件

这个组件其实就类似包管理工具，sublime的插件都要通过它来安装

1. control + ` sublime的console窗口
2. 粘贴以下代码到底部命令行并回车：

import urllib2,os;pf='Package Control.sublime-package';ipp=sublime.installed*packages*path();os.makedirs(ipp) if not os.path.exists(ipp) else None;open(os.path.join(ipp,pf),'wb').write(urllib2.urlopen('[http://sublime.wbond.net/'+pf.replace](http://sublime.wbond.net/'+pf.replace)(' ','%20')).read())

3. 重启sublime
4. Perferences->package settings看到package control，表示安装成功

2. 安装Emmet插件

1. command + shift + p 打开package control的命令板
2. 输入install然后选择install Package
3. 然输入emmet找到Emmet Css Snippets，点击自动完成安装

使用方法

新建html文件

1. mac下用sublime首先要把文件保存为html类型
2. 输入html:5后按tab键便会出现html5的框架
3. 输入任意字母按tab键生成标签，即便不是合法的html标签
4. 输入标签时也可以设置一些属性，比如：

// btn:s  

// input:c

// input:number

// meta:vp

后代 ： >

例：ul>li

兄弟 ： +

例：div+p+img

上级：^

例：div+div>span>em^p

  
  


// p标签是em的上级，即和span标签同级

例：div+div>span>em^^p

// p标签是em上级的上级，即和div标签同级

分组：()

例：(div+p>span)+div>(p+img)

乘法：*

例：ul>li*6

自增符号：$

例：ul>li#id$*6

文本：{}

例：ul>li#id${this is id $$@-3}*6

  
this is id 08
  
this is id 07
  
this is id 06
  
this is id 05
  
this is id 04
  
this is id 03

// 两个$$表示数字位数，@-3表示倒序到3；相反，@3表示正序从3开始

id和类属性

例：div#div1.red.big

自定义属性

例：div[am="div1" beautiful="red big" haha]

隐式标签

例：.lala

例：em>.lala

例：ul>.lala

例：table>.row>.col