Emmet语法快速学习

落日映苍穹つ 2023-01-10 14:37 252阅读 0赞

![2021012421124854.png][]

在进行前端开发的时候，经常要手动写一些Html和CSS代码，有时候手写比较的繁琐。所以Emmet语法就出现了，主要作用就是类似于快捷键的作用，只需要敲出几个字母就可以快速自动生成一段代码，大大提高开发效率。

Emmet是一款插件，只要能安装他的编辑器都能使用，大部分编辑器都可以使用该语法规则,我们平时开发的：`Sublime Text、Eclipse、Notepad++、VS code、Atom、Dreamweaver`等等编辑器都可以使用。

那么接下来，就通过官方的文档给大家讲解，简单直接。

## **一、基础语法示例：** ##

**子节点（Child）：>**

输入：nav>ul>li

自动生成：

**重复（Multiplication）：\***

输入：ul>li\*5

自动生成：

**编号（Item numbering）：$**

输入：ul>li.item$\*5

自动生成：

输入：h$\[title=item$\]\{Header $\}\*3

自动生成：

<h1 title="item1">Header 1</h1>
    <h2 title="item2">Header 2</h2>
    <h3 title="item3">Header 3</h3>

输入：ul>li.item$$$\*5

自动生成：

输入：ul>li.item$@-\*5

自动生成：

输入：ul>li.item$@3\*5

自动生成：

**重复（Sibling）：+**

输入：div+p+bq

自动生成：

**上级结点（Climb-up）：^**

输入：div+div>p>span+em^bq

自动生成：

输入：div+div>p>span+em^^bq

自动生成：

**分组（Grouping）：()**

输入：div>(header>ul>li\*2>a)+footer>p

自动生成：

输入：(div>dl>(dt+dd)\*3)+footer>p

自动生成：

**ID和类属性（**ID and CLASS attributes**）**

输入：\#header

自动生成：

输入：.title

自动生成：

输入：form\#search.wide

自动生成：

输入：p.class1.class2.class3

自动生成：

**自定义属性（**Custom attributes**）**

输入：p\[title="Hello world"\]

自动生成：

输入：td\[rowspan=2 colspan=3 title\]

自动生成：

输入：\[a='value1' b="value2"\]

自动生成：

**文本（**Text**）****：**\{\}

输入：a\{Click me\}

自动生成：

<a href="">Click me</a>

输入：p>\{Click \}+a\{here\}+\{ to continue\}

自动生成：

<p>Click <a href="">here</a> to continue</p>

**饮食标签（**Implicit tag names**）**

输入：.class

自动生成：

输入：em>.class

自动生成：

输入：ul>.class

自动生成：

输入：table>.row>.col

自动生成：

## **二、**HTML结构： ##

输入：！或 html:5

自动生成：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8" />
        <title>Document</title>
    </head>
    <body>
        
    </body>
    </html>

输入：a

自动生成：

输入：a:link

自动生成：

输入：br

自动生成：

<br />

输入：link

自动生成：

输入：link:css

自动生成：

输入：style

自动生成：

输入：script

自动生成：

输入：script:src

自动生成：

输入：input:text 或 input:t

自动生成：

输入：html:xml

自动生成：

输入：bq

自动生成：

输入：doc

自动生成：

<html>
    <head>
        <meta charset="UTF-8" />
        <title>Document</title>
    </head>
    <body>
        
    </body>
    </html>

输入：doc4

自动生成：

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
        <title>Document</title>
    </head>
    <body>
        
    </body>
    </html>

输入：ol+

自动生成：

输入：ul+

自动生成：

输入：!!!

自动生成：

<!DOCTYPE html>

## **三、**CSS结构： ##

输入：pos

自动生成：

position:relative;

输入：pos:s

自动生成：

position:static;

输入：pos:a

自动生成：

position:absolute;

输入：m

自动生成：

margin:;

输入：m:a

自动生成：

margin:auto;

输入：bxz

自动生成：

box-sizing:border-box;

输入：bg

自动生成：

background:#000;

输入：!

自动生成：

!important

输入：@f

自动生成：

@font-face {
        font-family:;
        src:url(|);
    }

输入：@i或@import

自动生成：

@import url();

输入：@kf

自动生成：

@-webkit-keyframes identifier {
        from {  }
        to {  }
    }
    @-o-keyframes identifier {
        from {  }
        to {  }
    }
    @-moz-keyframes identifier {
        from {  }
        to {  }
    }
    @keyframes identifier {
        from {  }
        to {  }
    }

大致列举这么多，更多详细的其他用法类似。

大家也可以查看官方示例文档：[https://docs.emmet.io/cheat-sheet/][https_docs.emmet.io_cheat-sheet]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2pheTEwMDUwMA_size_16_color_FFFFFF_t_70][]

[2021012421124854.png]: /images/20221119/9bd82d70fc104cb88cb8e1b445e45c5b.png
[https_docs.emmet.io_cheat-sheet]: https://docs.emmet.io/cheat-sheet/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2pheTEwMDUwMA_size_16_color_FFFFFF_t_70]: /images/20221119/9eacab0fa8e64f29afbd0ebb7635ca2f.png