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)

      Sublime 学习记录(三) Emmet 插件

  5)     隐式标签

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

      所有隐式标签有

        Li : 用于ul 和 ol 中

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

        Option : 用于select 和 optgroup中

  6)     定义多个元素

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

      Sublime 学习记录(三) Emmet 插件

iv. CSS 缩写

  1) 值

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

     Sublime 学习记录(三) Emmet 插件

  2) 附加属性

     如@f 生成

     Sublime 学习记录(三) Emmet 插件

     @f+

     Sublime 学习记录(三) Emmet 插件

  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)

上一篇:VS2013 EMMET插件学习


下一篇:JMS学习(二)- JMS Message Model 组成介绍及消息头详解