VScode的小tip之Emmet语法

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

快速生成HTML结构语法

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

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

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

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

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

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

快速生成CSS样式语法

CSS 基本采取简写形式即可

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

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

相关推荐
携欢3 小时前
CodeQL(Mac)安装与测试(Visual Studio)简明指南
ide·vscode·macos
Android小码家5 小时前
Vscode + docker + qt 网络监听小工具
vscode·qt·docker
中国胖子风清扬5 小时前
Rust 序列化技术全解析:从基础到实战
开发语言·c++·spring boot·vscode·后端·中间件·rust
虫无涯8 小时前
【分享】基于百度脑图,并使用Vue二次开发的用例脑图编辑器组件
前端·vue.js·编辑器
程序员的世界你不懂8 小时前
【Flask】测试平台中,记一次在vue2中集成编辑器组件tinymce
编辑器
susu10830189119 小时前
如何选择文件夹然后用vscode直接打开
ide·vscode·编辑器
非得登录才能看吗?9 小时前
开发环境 之 编辑器、编译器、IDE梳理
ide·编辑器
艾莉丝努力练剑12 小时前
GCC编译器深度解剖:从源码到可执行文件的全面探索
c++·ide·经验分享·gcc
熊猫钓鱼>_>12 小时前
在VSCode中更新或安装最新版的npx和uv工具
ide·vscode·uv
ONLYOFFICE13 小时前
【技术教程】如何将文档编辑器集成至基于Java的Web应用程序
java·编辑器·onlyoffice