学习视频
学习文档
Emmet介绍
Emmet (前身为 Zen Coding) 是一个能大幅度提高前端开发效率的工具,能够实现 HTML、CSS 的快速编写。vscode已经第三方支持Emmet,无需安装插件,直接使用Tab键或者回车键
使用Emmet好处
通常大多数的文本编辑器都会允许我们存储和重用一些代码块,我们称之为“片段”。虽然片段能很好地推动我们的生产力,但大多数的实现都有这样一个缺点:我们必须先定义代码片段,并且不能再运行时进行拓展。 而 Emmet 把片段这个概念提高到了一个新的层次:我们可以设置 CSS 形式的能够动态被解析的表达式,
然后根据输入的缩写来得到相应的内容
。Emmet 很成熟的并且非常适用于编写 HTML/XML 和 CSS 代码的前端开发人员,但也可以用于编程语言。
基本语法
只要你熟悉css的选择器知识,Emmet语法很容易上手。
HTML标签语法
CSS常用写法
缩小有很多,但不是都必须记住的,很多其实没有必要特意去记,使用Emmet语法是为了加快我们前端代码编写的效率。掌握基本的 *,>,+,div.class,ul>li * 5 等十分常用的,清楚这些就够用了。