H5/C3进阶(1) -- Emmet语法

1、Emmet语法

Emmet语法的前身是zen coding，它使用缩写，来提高 HTML/CSS 的编写速度，VScode内部已经集成该语法。

1.1.快速生成HTML结构语法

1.生成标签直接输入标签名按tab键即可比如div然后tab键, 就可以生成<div> </div> 。

2如果想要生成多个相同标签，加上就可以了，比如div3 ，就可以快速生成3个div 。

3.如果有父子级关系的标签,可以用 > 比如 ul> I 就可以了。

4.如果有兄弟关系的标签，用 + 就可以了，比如 div + p 。

5.如果生成带有类名或者id名字的，直接写 .demo 或者 #two tab 键就可以了。

6.如果生成的div 类名是有顺序的，可以用自增符号 $ 。

7.如果想要在生成的标签内部写内容可以用{}表示。

1.2.快速生成CSS样式

CSS基本采取简写形式即可.

1.比如w200 按tab可以生成width: 200px;

2.比如Ih26按tab可以生成line height: 26px;

（每个单词首字母）

补充：

如何快速格式化代码？

（1）右键->格式化文档。（ Vscode快速格式化代码: shift +alt+f ）

（2）也可以设置当我们保存页面的时候自动格式化代码:

1 )文件-----.> [首选项] ------- [设置] ;

2 )搜索emmet.include;

3 )在settingsjson下的[用户]中添加以下语句:

“editor.formatOnType”:true,

“editor.formatOnSave”: true

只需要设置一次即可,以后都可以自动保存格式化代码