前言：本篇文章简单讲述了HTML和CSS中的Emmet语法，更多详细语法内容可以参见此文章
/Emmet/
Emmet 语法
Emmet语法的前身是Zen coding，它使用缩写来提高 HTML/CSS 的编写速度，能大大提高代码书写，只需要敲一行代码就能生成你想要的完整HTML结构，下面介绍如何使用。
1.1 快速生成HTML标签
生成标签 直接输入标签名 按tab键即可 比如 div 然后tab 键， 就可以生成<div></div>如果想要生成多个相同标签 加上 * 就可以了 比如 div*3 就可以快速生成3个div如果有父子级关系的标签，可以用 > 比如 ul > li 就可以了如果有兄弟关系的标签，用 + 就可以了 比如 div+p如果生成带有类名或者id名字的， 直接写 .demo 或者 #two tab 键就可以了如果生成的div 类名是有顺序的， 可以用 自增符号 $如果想要在生成的标签内部写内容可以用 { } 表示下面分别举例讲解上述生成操作，注释内是快速生成的代码，注意每次要按 Tab 键
生成标签 直接输入标签名 按tab键即可
<!-- div --><div></div>
生成多个相同标签
<!-- div*3 --><div></div><div></div><div></div>
生成父子级关系的标签
<!-- ul>li --><ul><li></li></ul><!-- div>s --><div><san></san></div>
生成兄弟关系的标签
<!-- div+p --><div></div><p></p>
生成带有类名或者id名的标签
<!-- .nav 默认在div标签中生成--> <div class="nav"></div><!-- #banner --><div id="banner"></div><!-- p.one 指定标签中生成--><p class="one"></p><!-- ul>li#two --><ul><li id="two"></li></ul>
生成的div 类名是有顺序的
<!-- .demo*5 --><div class="demo1"></div><div class="demo2"></div><div class="demo3"></div><div class="demo4"></div><div class="demo5"></div><!-- div{$}*3 --><div>1</div><div>2</div><div>3</div>
在生成的标签内部写内容
<!-- div{emmet语法真好用} --><div>emmet语法真好用</div><!-- div{爽歪歪}*5 --><div>爽歪歪</div><div>爽歪歪</div><div>爽歪歪</div><div>爽歪歪</div><div>爽歪歪</div>
1.2 快速生成CSS样式
如 w100 按 Tab键 可以 生成
width: 100px;如 lh26px 按 Tab键 可以生成
line-height: 26px;
基本上输入首字母就可以出现提示，然后进行自动生成，这里不再一一赘述
1.3 快速格式化代码
VS code 快速格式化代码：
Shift + Alt + F
此外，VS code 打开设置搜索format可以直接勾选自动格式化
