Emmet使用手册
Emmet 简介
- Emmet (前身为 Zen Coding) 是一个能大幅度提高前端开发效率的一个工具
- 大部分编辑器中都可以安装emmet插件, 不同编辑器的安装方式请自行搜索; 向"webstorm"这样的集成开发工具已经集成了emmet,无需单独安装
使用演示
使用方法
- 比如要输入
<div>
标签, 只需要 输入div然后按Tab
健 即可 - 输入其他复杂的内容,只需要相应的语法 配合
Tab
健即可 (或者Ctrl
+E
) - 注意不要添加额外的空格
语法
初始化文档
!
html:5
类 ID 属性 文本
tagName
+ tab健tagName.className
+ tab健tagName#idName
+ tab健tagName[attr=value]
+ tab健tagName{content}
+ tab健
嵌套
>
子元素符号,表示嵌套的元素+
同级标签符号^
可以使该符号前的标签提升一行
分组
- 可以通过
()
来改变优先级,对代码进行组合
省略标签
- 如果输入
div.item
,就会生成<div class="item"></div>
, 如果只输入.item,则Emmet会根据父标签进行判定。比如在<ul>
中输入.item,就会生成<li class="item"></li>
- 下面是所有的隐式标签名称:
- li:用于ul和ol中
- tr:用于table、tbody、thead和tfoot中
- td:用于tr中
- option:用于select和optgroup中
- 如果父元素不是特殊元素的话,只写
.item
会生成<div class="item"></div>
定义多个元素
- 要定义多个元素,可以使用
*
符号
顺序内容
li.item$
会生成<li class="item1"></li><li class="item2"></li><li class="item3"></li>
- 如果需要指定反向编号,可以使用"$@-"符号
- 要从指定的数字开始编号,可以使用ul>li.item$@3*5
CSS缩写语法
属性和值的缩写
长度值缩写
- 默认 是 px
- p 表示 百分比
- e 表示 em
- x 表示 ex
相关语法规则简写
- ! 表示 !import
- @i 表示 @import
- @m 表示 @media
- @f css3 web字体
- @f+ css3 web字体 全兼容写法
- @k css3动画
浏览器私有前缀
- 在属性前面加
+
会自动生成私有前缀
CSS3渐变简写
- 渐变输入lg(left, #fff 50%, #000),会生成如下代码