3.25 emmet语法

emmet 方言 蚂蚁。我不是说它这个意思。

今天用Visual Studio Code新装，在插件商店那里安装了简体中文，又安装了minapp。

在浏览的时候上面写着支持emmet写法，emmet是什么有些好奇，网上搜了一下。

什么是Emmet语法？简单说，就是可以快速构建HTML结构的快捷语法。

大多数已经用过，补充记录一下，新发现。

返回上级操作符（Climb-up）：^

div>div+p^div    结果如下

3.25 emmet语法

返回一层还好用，返回的层级太深，还是用分组操作符（Grouping）:()  好用。

(header>h1+div>p)+(main>p)+(footer>ul>li*3)    结果如下

3.25 emmet语法

定制属性（Custom attributes）

定制的属性，我们就不可以使用简单的写法啦，这时候，我们就需要使用中括号[] 来将其括起来。

比如我们的 a 标签，它默认只有 href 属性，如果我们还需要别的呢：

a[target='' title='hello world']*3 结果如下

3.25 emmet语法

（3）数值计算操作符（Item numbering）：$

我们有时候在给 class 添加它的属性时，我们希望它是按照一定的数字进行排列，那么我们就可以使用这个操作符。

div>ul>li.item-$*3

3.25 emmet语法

如果你想倒着写数值的话呢，可以在$操作符后面再加上@-，也就是这样：

div>ul>li.item-$@-*3

你想指定数字是从几开始，那么你需要在$后面加上@N，这里的 N 为开始的数值。

如果我想生成三位数的序号，那么要写三个 $：

ul>li.item$$$*5

输出：

<ul>

<li class="item001"></li>

<li class="item002"></li>

<li class="item003"></li>

<li class="item004"></li>

<li class="item005"></li>

</ul>

配合上面倒序输出，可以这样写：

ul>li.item$@-3*5

生成的就是以 3 为底倒序：

<ul>

<li class="item7"></li>

<li class="item6"></li>

<li class="item5"></li>

<li class="item4"></li>

<li class="item3"></li>

</ul>

文本操作符（Text）：{}

我们可以使用大括号{}来对其输入一定的内容。这个操作符就很简单啦。

div#news>p{Hello,World!}

3.25 emmet语法

也可以连着别的标签写。

p{What's your name?}+p{My name is Alice}

文中知识点一小部分参考了于江水（豆瓣）的文章，大部分转载自 Hushaby丶的文章链接：https://www.jianshu.com/p/9e2f55776bc0

来源：简书