文章目录
一、Emmet语法
Emmet语法的前身是Zen coding,它使用缩写,来提高html/css的编写速度,Vscode内部已经集成该语法。
1.快速生成HTML结构语法
- 生成标签,直接输入标签名按tab键即可,比如div然后tab键,就可以深层
<div></div>
- 如果想要生成多个相同标签,加上
*
就可以了,div*3
就可以快速生成3个div - 如果有父子级关系的标签,可以用
>
,比如:ul>li就可以了 - 如果有兄弟关系的标签,用
+
就可以了,比如:div+p
- 如果生成带有类名(id名字),直接写
.demo
(#two
),按tab键就可以了 - 如果生成的div类名是有顺序的,可以用自增符号
$
- 如果想要在生成的标签内部写内容可以用
{ }
表示
2.快速生成css样式语法
css基本采取简写形式即可。
- 比如w200,按tab键可以生成width:200px;
- 比如lh26,按tab键可以生成line-height:26px;
3.快速格式化代码
vscode快捷格式化代码:shift+alt+f
也可以设置当我们保存页面的时候自动格式化代码:
- 文件------> [首选项] --------> [设置] ;
- 搜索emmet.include;
- 在settings.json下的[用户]中添加以下语句: “eaitor.formatOnType” :true,
“editor.formatOnSave”:true
只需要设置一次即可,以后都可以自动保存格式化代码