> 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 的介绍](https://2438386763-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MUwZ8vRqdRbYWSAy90Y%2Fsync%2F0cb634dfd48d821804e5f2f57204ea7dd8f5d1fa.gif?generation=1614850214980364\&alt=media)

![Emmet 的介绍](https://2438386763-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MUwZ8vRqdRbYWSAy90Y%2Fsync%2F9cd7d536cb3f93f8b1fe4f6a5093e8c7ffd7c58b.gif?generation=1614850215059455\&alt=media)

> * 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 的设置](https://2438386763-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MUwZ8vRqdRbYWSAy90Y%2Fsync%2Fd6767649af2d1fe0c2be156826d418b733dd470a.jpg?generation=1614850215512893\&alt=media)

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

![Emmet 的设置](https://2438386763-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MUwZ8vRqdRbYWSAy90Y%2Fsync%2F9732dc8684ac84a0c12a23c9ecd2f59a8b5b1f61.gif?generation=1614850215319387\&alt=media)

![Emmet 的设置](https://2438386763-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MUwZ8vRqdRbYWSAy90Y%2Fsync%2F8dd30689a4718eaed5ae618df5835a2449ee1b15.jpg?generation=1614850215047153\&alt=media)

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