一篇文章搞懂【Emmet】语法

以VScode编辑器为例

1.初始化HTML结构

新建一个html结构后可以使用! + tab建初始化HTML结构

1）输入

2）按tab或回车后

2.id(#) 和 class(.)

生成一个带有id或者类名的emmet语法：

1.id：div#main +tab

2.class:div.head+tab;多个类可以继续追加div.head.box+tab

3.组合：div#main2.body+tab和div#main2.body.box+tab

注意：输入完一行要紧接着按tab！！！

输入

div#main
div.head
div#main2.body
div#main2.body.box

每一行后面紧接着按tab后：

3.子节点(>)、上级节点(^)、兄弟节点(+)

3.1子节点(>)

使用>连接两个标签名，后者会加在前者的内部（即成为前者的子元素）

列如输入如下：

div>p
div>p>span

每一行按tab会生成：

3.2上级节点(^)

与>

符号常常同事使用；在^符号后的元素名会与前一名元素的父级元素同级。^可以连续使用，表示上升多级。

具体看实例：

div>p^a

div>ul>li^p

div>ul>li^^p

每行会生成：

3.3兄弟节点(+)

输入例子：

div+p

div+a+p

结果：

4.重复(*)

有时候需要生成多个同样的标签，可以直接yong*生成而不用一个个复制。

输入例子：

h2*5

ul>li*6

结果：

5.属性([attr])

与id和calss比较类似，是为元素添加其他任意属性的。

例子：

div[name='main']

a[href="www.baidu.com" name="baidu"]

结果：

6.编号($)

动态生成的序号，$代表一位数字，后面跟的*和数字代表从1递增到紧跟的数字

例子：

ul>li.item$*6

结果：

补充：

• 可以设置多位数字（一个$代表一位数字，就可以连写多个会在前面补0）

  例子：

  ul>li.item$$$*6
  

  结果：

  

• 可以在$后加@-实现倒序

例子

ul>li.item$@-*6

结果：

• 在$后面添加@N改变编号的起始基数

例子：

ul>li.item$@3*5

结果：

7.文本({})

元素后面使用{}符号可以在元素内部加人{}内容。

例子：

p{一段文本}

a[href="www.baidu.com"]{百度}

结果：

8.分组(())

可以组合代码块，写较长的emmet语法时用来分隔。

div>(ul>li>a[href="www.baidu.com"])+p

结果：

综合：

这里有三个综合的题目，大家只看emmet语法看看能不能猜到会生成什么结构呢？

div#main>ul>li.item$*6

(div#head>ul>li>a[href="www.baidu.com"])+(div#main>p*6{$})+div#footer{版权}

div#main.main.box>(ul>(li>a[href="www.baidu.com"]{百度})*6)+p*5

你若盛开，蝴蝶自来！！！