前端小白必看!如何高效快速编写html+css代码?emmet语法、快速格式化代码!

Oria ·
更新时间:2024-09-21
· 666 次阅读

在编写代码时,掌握emmet语法是非常有必要的,他可以帮助我们大幅提高编写效率!

1.快速生成html语法

1.1
生成标签,直接输入标签名,然后按tab即可。比如输入“div”,然后按tab,就可以自动生成


1.2
如果想要生成多个标签,用乘号就可以。方法:标签名书写的次数。比如:div7就可以快速生成7个div标签。
1.3
父子级关系的标签,用>号实现。方法:父级标签>子级标签
比如:ol>li,然后按tab就可以啦。
1.4
类似的,平级关系的标签,用+实现。
1.5
如果要生成带有class的标签,用标签.class名字即可。id标签把.改成#即可。比如:标签#id名字。按照tab键即可。
1.6
如果生成的div类名是有顺序的,用自增幅号--------美金(shift+4)实现:

//输入div.demo$*5,则自动生成:
//不输入div也可以,默认生成div标签。
2.快速生成css语法

css用简写形式,输入每个单词的首字母,即可生成你要的属性。
比如输入w200,按tab之后,生成width:200px;
lh26,按tab之后,生成line_height:26px;

3.快速格式化代码

很多支持前端开发的软件都可以快速格式化代码,它可以自动排版好写的很乱的页面。
vscode快速格式化代码:shift+alt+f,或者点击右键,选择快速格式化代码按钮。
不过,我们还可以让vscode保存页面的时候自动格式化代码:
选择“文件”------“首选项”-------“设置”
搜索emmet.include;
在setting.json下的“用户”中添加以下语句:
“editor.formatOnSave”:true,
“editor.formatOnSave”:true
这样就完成了。
只需要设置一次就可以了。以后都会自动保存格式化代码。


作者:温茶ing



css代码 emmet 快速格式化 HTML 格式化 前端 CSS

需要 登录 后方可回复, 如果你还没有账号请 注册新账号