Emmet 常用语法

Unsplash

Emmet 是一个能大幅度提高前端开发效率的一个工具，通过在编辑器中输入 HTML 或 CSS 的代码缩写，按 Tab 键即可拓展为完整的代码片段，本文主要介绍一些 Emmet 常用的语法

快速生成 HTML5 文档类型

缩写： ! 或 html:5

HTML 文档类型

> 运算符可以用来生成彼此嵌套的元素，即后代元素

缩写： section>div>p

后代元素

运算符可以用来生成彼此相邻的元素，即兄弟元素

缩写： div p bg

兄弟元素

^ 运算符，可以让你的代码返回上一层

缩写： div>p>span em^bq

上层 1

缩写： div>p>span em^^bq

上层 2

() 分组嵌套

缩写：div>(header>ul>li*2>a) footer>p

分组嵌套 1

缩写：(div>dl>(dt dd)*3) footer>p

分组嵌套 2

* 运算符，能一次性生成多个相同的标签

缩写：ul>li*5

乘法

$ 递增

缩写：ul>li.item$*5

递增 1

缩写：h$title=item${Header $}*3

递增 2

ID、class、属性、文本

缩写：#header

ID

缩写：.item1.item2

class

缩写：inputname="item"

属性

缩写：p{peace and love}

文本

隐式标签

缩写： em>.item

隐式标签 1

缩写： ul>.item

隐式标签 2

标签

缩写： bq

blockquote

缩写： fig

figure

缩写： figc

figcaption

缩写： ifr

iframe

缩写： emb

embed

缩写： obj

object

缩写： cap

caption

缩写： clog

clogroup

缩写：fst

fieldset

缩写：btn

button