Emmet快速输入

基本使用

输入一个标签或者语法然后按Tab键,未知的输入都会识别为标签

1. html初始结构

！=> Tab

2. id # ,class .

div#test
div.test

3. 子节点 >，兄弟节点 +，上级节点 ^

div>ul>li>p
div+ul+p
div>ul>li^div

4. 重复 *

div*5

5. 分组 ()

div>(ul>li>a)+div>p

6. 属性[attr=""]

a[href=### name=cda]

7. 文本 {}

ul>li.test{测试}*3

7.1 自动生成连续数字

ul>li.test${测试$}*3

7.2 随机生成字符

ul>li.test*3>lorem10

8. 隐式标签

而是部分标签可以不使用输入标签，直接输入指令，即可识别父类标签。

8.1 没有父类默认为 div

#test .test

8.2 ul的子类默认为 li

ul>.test*3

8.3 select的子类默认为 option

select>.test*5

9. 类名id连写

#test.test .test.test2

CSS

缩写	含义	缩写	含义
t	top	5	5px
b	bottom	5p	5%
l	left	5e	5em
r	right	w	width
m	margin	h	height
p	padding	bg	background
bgc	background-color	bgi	background-imgage
bgr	background-repeat	bgp	background-position
lh	line-height	ov	overflow:hidden
fl	float:left	fr	float:right
por	position:relative	poa	position:absolute