• 元素(Elements)
• 属性操作符(Attribute operators)
• 嵌套操作符(Nesting operators)
• 乘法
• 分组操作符(Grouping)
• 自增符号: $
• 自定义属性
• 文本：{}
• 隐式标签

在VsCode内置了Emmet语法，在后缀为.html/.css中输入缩写后按Tab键即会自动生成相应代码，基本语法如下：

E 代表HTML标签。
E#id 代表id属性。
E.class 代表class属性。
E[attr=foo] 代表某一个特定属性。
E{foo} 代表标签包含的内容是foo。
E>N 代表N是E的子元素。
E+N 代表N是E的同级元素。
E^N 代表N是E的上级元素。

另外在html页面中输入：!可以快速生成html框架；输入lorem 或者 lipsum，按tab键可以直接生成一段无意义的文字（dummy text），这个对想快速生成一段文字来说太有用了

元素(Elements)

标签缩写太多记不过来，记些常用的吧，记得大概然后就会有提示，这点还是挺方便的，而且还能从提示中学到一些语法，hhh～

a	  ===>	
link	  ===>	
meta	  ===>	
style	  ===>	
script  ===>	
bq 	  ===>	

	别名：blockquote
ifr	 ===>	
  别名：iframe
emb	 ===>	
  别名：embed
obj	 ===>	
  别名：object
src	 ===>	
  别名：source
cap	 ===>	
  别名：caption
btn	 ===>	
  别名：button

有些标签还可以指定类型，比如 a:mail ===> ，标签名称后面加上英文冒号然后就会有提示

属性操作符(Attribute operators)

（1）缩写：#header

（2）缩写：.title

（3）缩写：form#search.wide

（4）缩写：p.class1.class2.class3

嵌套操作符(Nesting operators)

1. 后代：>

缩写：nav>ul>li

2. 兄弟：+

缩写：div+p+bq

3. 上级：^

? （1）缩写：div+div>p>span+em^bq

? （2）缩写：div+div>p>span+em^^bq

乘法

缩写：ul>li*5

分组操作符(Grouping)

（1）缩写：div>(header>ul>li*2>a)+footer>p

（2）缩写：(div>dl>(dt+dd)*3)+footer>p

自增符号: $

（1）缩写：ul>li.item$*5

（2）缩写：h$[title=item$]{Header $}*3

Header 1
Header 2
Header 3

（3）缩写：ul>li.item$$$*5

（4）缩写：ul>li.item$@-*5

（5）缩写：ul>li.item$@3*5

自定义属性

（1）缩写：p[title="Hello world"]

（2）缩写：td[rowspan=2 colspan=3 title]

（3）缩写：[a='value1' b="value2"]

文本：{}

（1）缩写：a{Click me}

Click me

（2）缩写：p>{Click }+a{here}+{ to continue}

Click here to continue

隐式标签

（1）缩写：.class

（2）缩写：em>.class

（3）缩写：ul>.class

（4）缩写：table>.row>.col

文章部分内容参考了VsCode中使用Emmet神器快速编写HTML代码 ，这位作者写的太棒了