在VS Code中使用Emmet快速编写HTML代码

在前端开发的过程中，最费时间的工作就是写 HTML、CSS 代码，同时会配合cv大法，emmet会是一个更好的选择，提高代码书写速度。

Emmet (前身为 Zen Coding) 是一个能大幅度提高前端开发效率的工具，能够实现 HTML、CSS 的快速编写，已经集成到vscode中。

常用语法糖

.  --class
#  --id
[] --attr
{} -- textnode
*  -- duplicate

1. html语法

div.class

标签.class

div#id

img[src="a.png" alt="a"]

其他属性补全，用[]将属性包裹

p{text}

输入文本用{}包裹

div+div

多个标签

ul>li

标签嵌套

div+div>p>span^p

鼠标回退一级^

div>(header>table>tbody)+footer>p

分组（）

ul>li*5

多个相同标签

ul>li{item $}*5

多个相同标签加数字 $自增占位符 默认从1开始

ul>li.class$$$*5 三位数字

ul>li.class$@3*5 数字从3开始

.class

默认是div 隐式标签

em>.class

推断内部可以嵌套的标签--隐式标签

2. css语法

w100

width :100px 默认px

w100p

width:100%

w100r

width:100rem

颜色

bd5#0s -> border:5px #000 solid

模糊匹配

-链接的属性取首字母