Emmet语法可以让我们编写HTML/CSS时更快速和便捷,它几乎集成在了很多代码编辑器里面,比如VScode、Sublime就支持Emmet语法。

以下是使用VScode作为演示和使用。

生成HTML结构:

输入 ! 按Tab键

div5.png

div5.png

生成多个指定标签

输入 [标签] * [数量] 按Tab键

div5.png

div5.png

生成带有层级结构的标签

输入 [父级标签] > [子标签] 按Tab键

div5.png

div5.png

生成多个同层级的不同标签

输入 [标签1] + [标签2] 按Tab键

div5.png

div5.png

生成带类属性的DIV

输入 .类名 按Tab键

div5.png

div5.png

生成带ID属性的DIV

输入 [#ID名] 按Tab键

div5.png

div5.png

生成多个带(数字顺序)类属性的DIV

输入 .[类名]$*[数量]

div5.png

div5.png

生成多个带(数字顺序)ID属性的DIV

输入 #[id名]$*[数量]

div5.png

div5.png

生成多个同样内容的标签

输入 标签{内容}*数量 按Tab键

div5.png

div5.png

生成CSS属性

b.gif