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)