🐟前言
Emmet 是一个非常高效的前端开发工具，可以在多种编辑器中使用，包括 我们切图仔最爱用的VS Code。Emmet 通过简短的缩写语法快速生成 HTML 和 CSS代码。以下是一些常用的 Emmet 快捷输入方法和示例,方便大家去理解这些快捷键从而更好的上手！
首先是我们最常用的一个快捷键，也是大家第一个学到的快捷键 ,就是它!，他是用来生成基本HTML代码结构的。
基本语法
基本语法想必是大家用的最多的了。
1. 生成 HTML 结构
!或html:5：生成一个基本的 HTML5 结构。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
2. 生成标签
div：生成<div></div>。p：生成<p></p>。
3. 生成带有类名的标签
div.container：生成<div class="container"></div>。p.text-center：生成<p class="text-center"></p>。
4. 生成带有 ID 的标签
div#header：生成<div id="header"></div>。p#intro：生成<p id="intro"></p>。
嵌套标签
这个在一次性写多行重复代码标签时，非常的高效！
1. 嵌套标签：
-
ul>li*3：生成一个包含三个<li>标签的<ul>。<ul> <li></li> <li></li> <li></li> </ul>
2. 多级嵌套：
-
nav>ul>li*3>a：生成一个包含三个带有<a>标签的<li>标签的<ul>，整个结构嵌套在<nav>标签中。<nav> <ul> <li><a href=""></a></li> <li><a href=""></a></li> <li><a href=""></a></li> </ul> </nav>
属性
1. 添加属性：
-
img[src="image.jpg"]：生成带有src属性的<img>标签。<img src="image.jpg">
2. 添加多个属性：
-
a[href="https://example.com" target="_blank"]：生成带有多个属性的<a>标签。<a href="https://example.com" target="_blank"></a>
文本内容
- 添加文本内容：
-
p{Hello World}：生成带有文本内容的<p>标签。<p>Hello World</p>
- 嵌套文本内容：
-
ul>li*3>{Item $}：生成带有编号文本内容的<li>标签。<ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ul>
递增计数
- 递增计数：
-
li.item$*3：生成带有递增计数的类名。<li class="item1"></li> <li class="item2"></li> <li class="item3"></li>
- 递增计数起始值：
-
li.item$@5*3：生成从 5 开始的递增计数。<li class="item5"></li> <li class="item6"></li> <li class="item7"></li>
分组
这个也是开发中常用的，可以迅速搭建好一个框架，结合上面的其他用法。
-
(header>h1)+(footer>p)：生成一个包含<h1>的<header>和一个包含<p>的<footer>。<header> <h1></h1> </header> <footer> <p></p> </footer>
🐟END
听我的老师说，在他们刚刚工作的呢个年代，还没有Emmet快捷键可以使用，更别提Ai了，只能纯手敲，Emmet提供如此多的快捷方法，选择器内容允许你快速生成带有特定属性和内容的 HTML 标签，用来生成复杂的 HTML 结构，我们是不是应该学起来，去加快我们的开发效率呀!!
