Emmet语法快速上手

时间:2024-05-19 22:24:53

学习视频

Emmet爆速开发

学习文档


Emmet在线文档


Emmet介绍

Emmet (前身为 Zen Coding) 是一个能大幅度提高前端开发效率的工具,能够实现 HTML、CSS 的快速编写。vscode已经第三方支持Emmet,无需安装插件,直接使用Tab键或者回车键


使用Emmet好处

通常大多数的文本编辑器都会允许我们存储和重用一些代码块,我们称之为“片段”。虽然片段能很好地推动我们的生产力,但大多数的实现都有这样一个缺点:我们必须先定义代码片段,并且不能再运行时进行拓展。 而 Emmet 把片段这个概念提高到了一个新的层次:我们可以设置 CSS 形式的能够动态被解析的表达式,然后根据输入的缩写来得到相应的内容。Emmet 很成熟的并且非常适用于编写 HTML/XML 和 CSS 代码的前端开发人员,但也可以用于编程语言。


基本语法

只要你熟悉css的选择器知识,Emmet语法很容易上手。

Emmet语法快速上手

Emmet语法快速上手
Emmet语法快速上手
Emmet语法快速上手
Emmet语法快速上手
Emmet语法快速上手
Emmet语法快速上手
Emmet语法快速上手
Emmet语法快速上手
Emmet语法快速上手
Emmet语法快速上手
Emmet语法快速上手
Emmet语法快速上手
Emmet语法快速上手
Emmet语法快速上手


HTML标签语法

Emmet语法快速上手
Emmet语法快速上手
Emmet语法快速上手
Emmet语法快速上手
Emmet语法快速上手

CSS常用写法

Emmet语法快速上手
Emmet语法快速上手
Emmet语法快速上手
Emmet语法快速上手

缩小有很多,但不是都必须记住的,很多其实没有必要特意去记,使用Emmet语法是为了加快我们前端代码编写的效率。掌握基本的 *,>,+,div.class,ul>li * 5 等十分常用的,清楚这些就够用了。