Emmet 语法

本文介绍了如何利用Emmet语法在Vscode中快速生成HTML结构和CSS样式,包括快速创建标签、父子级和兄弟级关系、类名及ID,以及自增符号的应用。此外,还分享了快速格式化代码的方法,如通过快捷键Shift+Alt+F进行格式化,以及设置自动格式化代码的步骤。掌握这些技巧能显著提高前端开发效率。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

Emmet语法的前身是Zen coding,它使用缩写,来提高html/css的编写速度,Vscode内部已经集成该语法。

 

1. 快速生成HTML结构语法

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

2. 如果想要生成多个相同标签,加上*然后按tab键即可。比如 div*3 就可以快速生成3个div

3. 如果有父子级关系的标签,可以用 > 比如 ul > li按tab键即可

4. 如果有兄弟关系的标签,用+ ,比如 div+p,然后按tab键

5. 如果生成带有类名或者id名字的, 直接写.demo 或者 #two tab 键即可

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

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

2. 快速生成CSS样式语法

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

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

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

3. 快速格式化代码

Vscode 快速格式化代码:shift+alt+f

也可以设置 当保存页面(ctrl+s)时自动格式化代码:(只需设置一次)

1)文件File ------->【首选项】Preferences------->【设置】Settings;

2)搜索emmet.include;

3)在settings.json下的【工作区设置】中添加以下语句:

"editor.formatOnType": true,
"editor.formatOnSave": true

然后保存即可。

示例:

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

YiRano_0

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值