Sublime 学习记录（三） Emmet 插件

i. 安装 ： 打开命令面板 输入pci 回车  然后输入emmet 回车即可

ii.用处 ： 快速编写html和css代码（快捷键：tab建）

iii.html用法：

　　1)     初始化，html文档包含一些固定标签，通过emmet 一键生成。

　　　　　　html:5或！生成html5文档类型

　　　　　　html:xt 生成XHTML过度文档类型

　　　　　　html:4 生成html4文档类型

　　2)     轻松添加类、id、文本和属性

　　　　　　添加id : 标签名#ID名+tab键

　　　　　　添加类：标签名.类名+tab键

　　　　　　添加内容：标签名{内容}+tab键

　　　　　　添加便签内部属性：标签名[属性名=内容]+tab键

　　3)     嵌套

　　　　　　> : 子元素符号，表示嵌套元素 eg:p>span 生成 <p><span></span></p>

　　　　　　+ : 同级标签符号 eg:p+span 生成<p></p><span></span>

　　　　　　^ : 可以使符号钱的标签提升一行

　　4)     分组

　　　　　　可以通过组合达到快速生成代码 eg:(.foo>h1)+(.bar>h2)

　　　　　　

　　5)     隐式标签

　　　　　　Emmet会根据父标签进行判断，可以隐去标签名不写

　　　　　　所有隐式标签有

　　　　　　　　Li : 用于ul 和 ol 中

　　　　　　　　Tr : 用于table、tbody 、thead 和 tfoot 中

　　　　　　　　Option : 用于select 和 optgroup中

　　6)     定义多个元素

　　　　　　Eg: ul>.item *3  注：.item$ $会自动累加

　　　　　　

iv. CSS 缩写

　　1) 值

　　　　　比如定义宽度  只需w100即可 除了生成px还可以生成其他单位如h10p + m5e

　　　　　

　　2) 附加属性

　　　　　如@f 生成

　　　　　

　　　　　@f+

　　　　　

　　3) 模糊匹配

　　　　　　如ov:h、ov-h、ovh和oh  代码都相同的

　　4) 供应商前缀

　　　　　　输入非W2C标准的css emmet 会自动加上前缀

　　　　　　在任意属性前加上- 也可加上前缀

　　　　　　不希望加上所有前缀，可使用缩写来指定 如-wm-trf

　　　　　　　　W 表示  -webkit-

　　　　　　　　M 表示 –moz-

　　　　　　　　S  表示 –ms-

　　　　　　　　O 表示 –o-

　　5) 渐变

　　　　　　输入lg(left,#fff 50%,#000)