铭哥和佩佩的博客

铭哥和佩佩的博客分享Python、PHP、JavaScript、HTML5、CSS3等各种知识

Emmet使用手册

Emmet 简介

  • Emmet (前身为 Zen Coding) 是一个能大幅度提高前端开发效率的一个工具
  • 大部分编辑器中都可以安装emmet插件, 不同编辑器的安装方式请自行搜索; 向"webstorm"这样的集成开发工具已经集成了emmet,无需单独安装

使用演示

GIF.gif

使用方法

  • 比如要输入 <div> 标签, 只需要 输入div然后按Tab健 即可
  • 输入其他复杂的内容,只需要相应的语法 配合Tab健即可 (或者 Ctrl+E)
  • 注意不要添加额外的空格

语法

初始化文档

  • !
  • html:5

GIF.gif

类 ID 属性 文本

  • tagName + tab健
  • tagName.className + tab健
  • tagName#idName + tab健
  • tagName[attr=value] + tab健
  • tagName{content} + tab健

GIF.gif

嵌套

  • > 子元素符号,表示嵌套的元素
  • + 同级标签符号
  • ^ 可以使该符号前的标签提升一行

1.gif

分组

  • 可以通过() 来改变优先级,对代码进行组合

2.gif

省略标签

  • 如果输入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>

3.gif

定义多个元素

  • 要定义多个元素,可以使用*符号

4.gif

顺序内容

  • li.item$ 会生成 <li class="item1"></li><li class="item2"></li><li class="item3"></li>
  • 如果需要指定反向编号,可以使用"$@-"符号
  • 要从指定的数字开始编号,可以使用ul>li.item$@3*5

5.gif

CSS缩写语法

属性和值的缩写

1.gif

长度值缩写

  • 默认 是 px
  • p 表示 百分比
  • e 表示 em
  • x 表示 ex

GIF.gif

相关语法规则简写

  • ! 表示 !import
  • @i 表示 @import
  • @m 表示 @media
  • @f css3 web字体
  • @f+ css3 web字体 全兼容写法
  • @k css3动画

GIF.gif

浏览器私有前缀

  • 在属性前面加 + 会自动生成私有前缀

GIF.gif

CSS3渐变简写

  • 渐变输入lg(left, #fff 50%, #000),会生成如下代码

GIF.gif

Emmet文档大全(附)

CheatSheet.jpg

添加新评论