Emmet

HTML书写规则

书写规则	效果
!	生成HTML骨架
link:css	导入css
#<id-name>	生成对应ID的div
.<class-name>	生成对应class类的div
>	后代元素
+	兄弟元素
^	上级元素 ul>li^p => ul和p是兄弟，li是ul的子元素
*n	重复n份
()	分组优先 (ul>li)*2会生成两组ul>li
[]	属性（多个属性用空格隔开）
{}	填充文本
$	自增加
$$$	三位自增加
@n	从n开始自增
@-n	从n开始自减
ul>.box	自动判断生成<ul><li class="box"></li></ul> li,tr,td,option支持隐式写法
lorem	随机生成填充字符

CSS书写规则

实现的效果	举例
首字母缩写	w =>width bg=>background fw=>font-weight
属性带尺寸	h100=>height:100px w100p=>width:100% h2e=>height:2em
带属性值	tac=>text-align: center
重复变异	fs=>font-style fz=>font-size

参考链接

🔗Emmet CheatSheet