Emmet语法及使用介绍

Emmet语法及使用介绍

什么是Emmet？

Emmet is a plugin for many popular text editors which greatly improves HTML & CSS workflow
Emmet 是一个支持大多数流行文本编辑器的极大改善 html 和 css 的工作流的一个插件。
这里选择用vscode来演示效果:

ul>li.item${这是item$}*3

在输入表达式时会出现提示和预览效果，如下图所示：

在出现提示后，按下tab键或enter键，即可出现完整结构：

Emmet基础语法

1.生成后代元素：>

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

ul>li>a>img

<ul>
	<li><a href=""><img src="" alt=""></a></li>
</ul>

2.生成兄弟元素：+

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

ul+li+a+img

<ul></ul>
<li></li>
<a href=""></a>
<img src="" alt="">

3.生成上级元素：^

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

ul>li>a^li>span^^input

<ul>
	<li><a href=""></a></li>
    <li><span></span></li>
</ul>
<input type="text">

4.生成多个元素：*

tag1*n表示生成n个标签(元素)tag1

ul>li*3

<ul>
	<li></li>
    <li></li>
    <li></li>
</ul>

5.生成类名：.

tag1.classname1表示给标签(元素)tag1添加类名classname1，可添加多个类名，若没有写tag1则默认创建一个类名为classname1的div

ul.father>li.son.abc.hhh*3

<ul class="father">
	<li class="son abc hhh"></li>
    <li class="son abc hhh"></li>
    <li class="son abc hhh"></li>
</ul>

6.生成id名：#

tag1#idname1表示给标签(元素)tag1添加id名classname1，可添加多个id名(可以但没必要)，若没有写tag1则默认创建一个id名为idname1的div

ul#father>li#son

<ul id="father">
	<li id="son"></li>
</ul>

7.生成文本内容：{}

tag1{msg}表示在tag1内添加内容msg

h1{哈哈哈哈}

<h1>哈哈哈哈</h1>

8.生成属性：[]

tag1[attr1]表示给标签(元素)tag1添加属性attr1，可包含多个属性

img[src='pic.jpg' alt='图片']

<img src="pic.jpg" alt="图片">

9.生成编号：$

$一般用在id名，类名，内容中；当只有一个$时，数字从1开始，当有多个$时，数字从0开始
另外，可在$后加上@-来实现倒序排序； (使用中存在问题)
@n可以让数字从n开始
$需搭配*使用，否则将会原样输出

ul>li.item$$${666$}*3

<ul>
	<li class="item001">6661</li>
	<li class="item002">6662</li>
	<li class="item003">6663</li>
</ul>

10.生成分组：()

可更加明确地表示层次关系

ul>li>a^^input

可写为

(ul>li>a)+input

<ul>
	<li><a href=""></a></li>
</ul>
<input type="text">