缩写语法

Emmet 使用类似于 CSS 选择器的语法描述元素在生成的文档树中的位置及其属性。

使用方式

写好缩写之后，按一下tab键就能生成你所请求的代码

创建初始文档

输入!或html:5，然后点击tab键，你就会看到一个HTML5的文档结构。 createHtml.gif

（1）子代操作符（Child）：>

使用>操作符可以用来创建我们的子代元素：
ul>li>a

emmet-child.gif

（2）兄弟操作符（Sibling）：+

使用+运算符可以用来生成相邻的元素：
div+p

emmet-brother.gif

(3）返回上级操作符（Climb-up）：^

使用^操作符可以用来创建父级元素

emmet-farther.gif

（4）乘法操作符（Multiplication）：*

如果你想一次性生成多个相同的元素，比如列表中的li，那么就可以使用乘法运算符
ul>li*5

emmet-mul.gif

快速添加类名、ID、文本和属性

使用”标签名#ID“格式添加ID
使用"标签名.class"添加类名
使用"标签名[attr]"添加属性
使用"标签名{text}"添加文本

emmet-more.gif

自动编号

用“$”符号实现1到n的自动编号

emmet-order.gif

可在 “$” 后添加 “@n” 修改编号的起始值为n

emmet-order2.gif