Emmet
语法的前身是
Zen coding,
它使用缩写
,
来提高
html/css
的编写速度
, Vscode
内部已经集成该语法
.
以下说明中的tab键也可换为回车键。
1. 快速生成HTML结构语法
1.
生成标签 直接输入标签名 按
tab
键即可
比如
div
然后
tab
键, 就可以生成 <div></div>
2.
如果想要生成多个相同标签
加上
*
就可以了 比如
div*3
就可以快速生成
3
个
div
<div></div>
<div></div>
<div></div>
3.
如果有父子级关系的标签,可以用
>
比如
ul > li
就可以了
ul>li*3 显示效果如下:
<ul>
<li></li>
<li></li>
<li></li>
</ul>
4.
如果有兄弟关系的标签,用
+
就可以了 比如
div+p
<div></div>
<p></p>
5.
如果生成带有类名或者
id
名字的,
直接写
.demo
或者
#two,再按tab
键就可以了
<div id="demo"></div>
<div class="two"></div>
6.
如果生成的
div
类名是有顺序的, 可以用 自增符号 $
div$*5 显示效果如下:<div1></div1>
<div2></div2>
<div3></div3>
<div4></div4>
<div5></div5>
7.
如果想要在生成的标签内部写内容可以用
{ }
表示
p{我是示例} 显示效果如下:<p>我是示例</p>
2. 快速生成CSS样式语法
CSS 基本采取简写形式即可 .1. 比如 w200 按 tab 可以 生成 width: 200px;2. 比如 lh26px 按 tab 可以生成 line-height: 26px;
3 快速格式化代码
Vscode 快速格式化代码 : shift+alt+f也可以设置 当我们 保存页面的时候自动格式化代码 :1 )文件 ------.> 【首选项】 ----------> 【设置】;2 )搜索 emmet.include;3 )在 settings.json 下的【工作区设置】中添加以下语句:"editor.formatOnType": true,"editor.formatOnSave": true