> For the complete documentation index, see [llms.txt](https://cdk8s.gitbook.io/github/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://cdk8s.gitbook.io/github/emmet-introduce.md).

# 19. 前端代码模板：Emmet

## Emmet 的介绍

Emmet 的前身叫做：Zen Coding，也许熟知旧名的人不在少数。Emmet 一般前端工程师用得比较多，具体它是做什么的，我们通过下面两张 Gif 演示图来说明：

![Emmet 的介绍](/files/-MUwZWmgTuSTTqFOR6Xk)

![Emmet 的介绍](/files/-MUwZWmhRxR_Ke8Rb-9k)

> * IntelliJ IDEA 自带 Emmet 功能，使用的快捷键是 `Tab`。

Emmet 资料介绍：

> * Emmet 官网：<http://emmet.io>
> * Emmet 官网文档：<http://docs.emmet.io/>
> * Emmet 速查表：<http://docs.emmet.io/cheat-sheet/>
> * Emmet 项目主页：<https://github.com/emmetio/emmet>

## Emmet 的设置

![Emmet 的设置](/files/-MUwZWmjjvDDwqBFWZEC)

> * 如上图标注 1 所示，IntelliJ IDEA 支持主流四个浏览器内核的一些特别 CSS 书写。
> * 如上图标注 2 所示，可以增加或是删除某些属性。
> * 具体使用，如下图 Gif 演示。

![Emmet 的设置](/files/-MUwZWmksLJkunlQ-0kD)

![Emmet 的设置](/files/-MUwZWmlVjkViptQjMBA)

> * 如上图标注红圈所示，在 `Live Templates` 中也有预设三套代码模板。