emmet语法简介及在Vscode中使用Emmet快速编辑代码

小灰灰 2023-01-16 12:27 454阅读 0赞

### 文章目录 ###

*   *  Emmet语法
     *   *  一、Emmet语法简介
         *   *  1、什么是Emmet？
         *  二、基础用法
         *   *  1、元素(Elements)
             *  2、文本操作符(Text)
             *  3、属性操作符(Attribute operators)
             *  4、嵌套操作符(Nesting operators)
             *  5、分组操作符(Grouping)
             *  6、乘法(Multiplication)
             *  7、自动计数(numbering)
         *  三、常见用法及举例
         *   *  1.生成后代元素：>
             *  2.生成兄弟元素：+
             *  3.生成上级元素：^
             *  4.生成多个元素：\*
             *  5.生成类名和id：. 和\#
             *  6.生成文本内容：\{\}
             *  7.生成属性：\[\]
             *  8.生成编号：$
             *  9.生成分组：()

## Emmet语法 ##

### 一、Emmet语法简介 ###

#### 1、什么是Emmet？ ####

> Emmet is a plugin for many popular text editors which greatly improves HTML & CSS workflow

Emmet (前身为 Zen Coding) 是一个能大幅度提高前端开发效率的一个工具. 在前端开发的过程中，一大部分的工作是写 HTML、CSS 代码。特别是手动编写 HTML 代码的时候，效率会特别低下，因为需要敲打很多尖括号，而且很多标签都需要闭合标签等。于是，就有了 Emmet，它可以极大的提高代码编写的效率，它提供了一种非常简练的语法规则，然后立刻生成对应的 HTML 结构或者 CSS 代码，同时还有多种实用的功能帮助进行前端开发。  
VsCode内置了Emmet语法,在后缀为.html/.css中输入缩写后按Tab键即会自动生成相应代码

> 请注意在VsCode新版本中按Tab不再默认启用Emmet展开缩写!需要在首选项配置中将emmet.triggerExpansionOnTab设置为true值!

语法基本规则如下:

E 代表HTML标签。
    E#id 代表id属性。
    E.class 代表class属性。
    E[attr=foo] 代表某一个特定属性。
    E{ foo} 代表标签包含的内容是foo。
    E>N 代表N是E的子元素。
    E+N 代表N是E的同级元素。
    E^N 代表N是E的上级元素。

### 二、基础用法 ###

#### 1、元素(Elements) ####

我们可以使用元素的名称，如div或p来生成HTML标签。Emmet没有一组可用的标签名称，可以写任何单词并将其转换为标签。也就是只要知道元素的缩写,Emmet会自动转换成对应标签.

div => <div> </div>
    foo => <foo> </foo>
    html:5 => 将生成html5标准的包含body为空基本dom
    html:xt => 生成XHTML过渡文档类型,DOCTYPE为XHTML
    html:4s => 生成HTML4严格文档类型,DOCTYPE为HTML 4.01
    a:mail          => <a href="mailto:"></a>
    a:link          => <a href="http://"></a>
    base            => <base href="">
    br              => <br>
    link            => <link rel="stylesheet" href="">
    script:src      => <script src=""></script>
    form:get        => <form action="" method="get"></form>
    label           => <label for=""></label>
    input           => <input type="text">
    inp             => <input type="text" name="" id="">
    input:hidden    => <input type="hidden" name=""> input:h亦可
    input:email     => <input type="email" name="" id="">
    input:password  => <input type="password" name="" id="">
    input:checkbox  => <input type="checkbox" name="" id="">
    input:radio     => <input type="radio" name="" id="">
    select          => <select name="" id=""></select>
    option          => <option value=""></option>
    bq              => <blockquote></blockquote>
    btn             => <button></button>
    btn:s           => <button type="submit"></button>
    btn:r           => <button type="reset"></button>

#### 2、文本操作符(Text) ####

如果想在生成元素的同时添加文本内容可以使用\{\}

Copydiv{ 这是一段文本}
    <div>这是一段文本</div>
    a{ 点我点我}
    <a href="">点我点我</a>

#### 3、属性操作符(Attribute operators) ####

属性运算符用于修改输出元素的属性.

**Id和Class (elem\#id and elem.class )**

Copydiv.test  => <div class="test"></div>
    div#pageId => <div id="pageId"></div>

隐式标签则会自动联想生成对应元素,根据配置规则不同生成的结果也是不同的.

Copy.class
    =>
    <div class></div>
    em>.class
    =>
    <em><span class></span></em>
    table>.row>.col
    =>
    <table>
        <tr class="row">
            <td class="col"></td>
        </tr>
    </table>

绑定多个类名用.符号连续起来即可

Copydiv.test1.test2.test3
    =>
    <div class="test1 test2 test3"></div>

**自定义属性使用 \[attr1=’’ attr2=’’\]**

Copya[href='#' data-title='customer' target='_blank']
    =>
    <a href="#" data-title="customer" target="_blank"></a>

#### 4、嵌套操作符(Nesting operators) ####

嵌套操作符用于将缩写元素放置在生成的树中,是否应放置在上下文元素的内部或附近.

**子级:>**

通过>标识元素可以生成嵌套子级元素,可以配合元素属性进行连写

Copydiv#pageId>ul>li 
    => 
    <div id="pageId">
        <ul>
            <li></li>
        </ul>
    </div>

**同级:+**

\+字符表示生成兄弟级元素.

Copydiv#pageId+div.child
    =>
    <div id="pageId"></div>
    <div class="child"></div>

**父级:^**

用于生成父级元素的同级元素,从这个

字符所在位置开始,查找左侧最近的元素的父级元素并生成其兄弟级元素.

Copydiv>p.parent>span.child^ul.brother>li
    =>
    <div>
        <p class="parent"><span class="child"></span></p>
        <ul class="brother">
            <li></li>
        </ul>
    </div>

#### 5、分组操作符(Grouping) ####

分组使用()来实现缩写的分离.比如这个例子,如果不加括号那么a将作为span的子级元素生成.加上括号a将于()内的元素同级.

Copydiv>(ul>li+span)>a
    =>
    <div>
        <ul>
            <li></li>
            <span></span>
        </ul>
        <a href=""></a>
    </div>

#### 6、乘法(Multiplication) ####

使用*N即可自动生成重复项.N是一个正整数.在使用时请注意*N所在位置,位置不同生成的结果不同.

Copyul>li*3
    =>
    <ul>
        <li></li>
        <li></li>
        <li></li>
    </ul>

#### 7、自动计数(numbering) ####

这个功能挺方便的对于生成重复项时增加一个序号,只需要加上$符号即可.

Copyul>li.item${ item number:$}*3
    <ul>
        <li class="item1">item number:1</li>
        <li class="item2">item number:2</li>
        <li class="item3">item number:3</li>
    </ul>

如果生成两位数则使用两个连续的$ , 更 多 位 数 以 此 类 推 . . . 使 用 @ 修 饰 符 ， 可 以 更 改 编 号 方 向 （ 升 序 或 降 序 ） 和 基 数 （ 例 如 起 始 值 ） . 注 意 这 个 操 作 符 在 ,更多位数以此类推... 使用@修饰符，可以更改编号方向（升序或降序）和基数（例如起始值）.注意这个操作符在 ,更多位数以此类推...使用@修饰符，可以更改编号方向（升序或降序）和基数（例如起始值）.注意这个操作符在之后添加  
@-表示降序,@+表示升序,默认使用升序.  
@N可以改变起始值.需要注意的是如果配合升降序使用的话N是放到±符后.

Copyul>li.item$@-*3
    =>
    <ul>
        <li class="item3"></li>
        <li class="item2"></li>
        <li class="item1"></li>
    </ul>
    ---------------------------
    ul>li.item$@-10*3
    =>
    <ul>
        <li class="item12"></li>
        <li class="item11"></li>
        <li class="item10"></li>
    </ul>

### 三、常见用法及举例 ###

Emmet语法是有很多高级用法的。例如`模拟文本/随机文本`和`包装文本`等等之类的操作。还有一些特别特别复杂的组合

比如下面这段东西:

table.table-row[role='table']>(thead>tr>td{ item $@120}*5)+(tbody>tr>(td.item$$@-)lorem10*5)

生成的东西：

<table class="table-row" role="table">
        <thead>
            <tr>
                <td>item 120</td>
                <td>item 121</td>
                <td>item 122</td>
                <td>item 123</td>
                <td>item 124</td>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>
                    <td class="item05">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit, assumenda.</td>
                </td>
                <td>
                    <td class="item04">Magnam possimus molestias ipsum animi rem placeat, ut obcaecati laudantium.</td>
                </td>
                <td>
                    <td class="item03">Consequuntur, labore ad optio cupiditate iusto dolores fugit quidem officiis.</td>
                </td>
                <td>
                    <td class="item02">Veniam, explicabo consequuntur blanditiis at dicta fuga ratione eos beatae.</td>
                </td>
                <td>
                    <td class="item01">Fuga voluptatum illo quis ducimus ad eveniet non. Saepe, eveniet.</td>
                </td>
            </tr>
        </tbody>
    </table>

但是在我看来，不好意思， 我宁愿自己去敲下面这些代码，也不愿意去记这些花里胡哨的东西。本身我们使用Emmet语法就是为了偷懒而不用写大量的重复性的HTML代码而来的。如果使用了那些过于复杂的Emmet语法。是不是我们就失去了一开始的偷懒的初心呢？虽然看起来很牛逼，但是没有必要。

所以，我仅在下面举例一些比较常用，和普通程序员可能用到的使用方式。如果有大佬想要了解那些高级用法。可以去[Emmet官网文档][Emmet]自行了解

#### 1.生成后代元素：> ####

`tag1>tag2`表示在标签(元素)tag1内生成后代标签(元素)tag2

ul>li>a>img

效果:

#### 2.生成兄弟元素：+ ####

`tag1+tag2`表示在标签(元素)tag1后生成兄弟标签(元素)tag2

ul+li+a+img

效果:

#### 3.生成上级元素：^ ####

`tag1^tag2`表示在标签(元素)tag1的父级后生成兄弟标签(元素)tag2，如果有两个`^`符号，则再提升一级(向上找父亲)，以此类推