编程效率宝典——Emmet语法
编程效率永远是大厂程序员的追求。那么，到底有哪些方法可以帮助我们提高编程效率呢？今天就让我来揭秘一下大厂程序员的“效率宝典”——Emmet语法。
先来个例子：
<main class="container">
<label for="file-upload" class="custom-file-upload">
<input type="file" accept="image/*" id="file-upload">
上传图片
</label>
<div id="image-container"></div>
<p id="status"></p>
</main>
这个常见的HTML结构，你打出来需要多久呢？
其实非常迅速，只需要写好以下语句，按下enter键就可以一键生成以上结构了
main.container>(label[for='file-upload'].custom-file-upload>input[type='file' accept='image/*']#file-upload)+.image-container+p.status
是不是很迅速，仅仅使用一行代码就生成了一个复杂的HTML结构。下面让我们来讲解语法把
emmet语法介绍与示例
1. HTML初始结构
可以使用 ! + tab 生成HTML初始结构。
！
生成：
<!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. .（类选择器）
为元素添加class属性。
div.image-container
或者（当标签为div时，div可省略）
.image-container
生成：
<div class="image-container"></div>
3. #（id选择器）
为元素添加id属性。
p#status
生成：
<p id="status"></p>
4. >（子元素）
将元素嵌套在内部。
label>input
生成：
<label for="">
<input type="text">
</label>
5. + (兄弟元素)
将元素放在同一层级。
div#imahe-container+p#sratus
生成：
<div id="imahe-container"></div>
<p id="sratus"></p>
6. ^ （返回上层）
向上爬一个层次，并更改上下文。
label>input^div
生成：
<label for="">
<input type="text">
</label>
<div></div>
此时div就和label在一个层级了。
当然，可以利用多个 ^ 返回多层，但最多返回到与第一个元素同级。
7. () （分组）
括号内的代码块内部嵌套与外部无关。
main>(label>input)+div+p
生成：
<main>
<label for="">
<input type="text">
</label>
<div></div>
<p></p>
</main>
8. * （重复）
生成多个相同元素。
div*3
生成：
<div></div>
<div></div>
<div></div>
9. $ （编号）
Ⅰ、对元素进行编号。
ul>li.item$*3
与 * 相结合生成多个：
<ul>
<li class="item1"></li>
<li class="item2"></li>
<li class="item3"></li>
</ul>
Ⅱ、连续多个 $ 可以生成带有前导的编号。
ul>li.item$$*3
生成：
<ul>
<li class="item01"></li>
<li class="item02"></li>
<li class="item03"></li>
</ul>
10. @ （更改编号方向/起点）
Ⅰ、更改编号方向 @- 实现降序排序
ul>li.item$@-*3
生成：
<ul>
<li class="item3"></li>
<li class="item2"></li>
<li class="item1"></li>
</ul>
Ⅱ、更改编号起点 @N N为编号开始数值
ul>li.item$@2*3
生成：
<ul>
<li class="item2"></li>
<li class="item3"></li>
<li class="item4"></li>
</ul>
11. {} （文本）
为元素添加文本
div{这是div$}*3
生成：
<div>这是div1</div>
<div>这是div2</div>
<div>这是div3</div>
12. [] （属性）
为元素添加属性
label[for='file-upload'].custom-file-upload
生成：
<label for="file-upload" class="custom-file-upload"></label>
当然，要想熟练使用，刻意练习是必不可少的。通过刻意练习，使其成为提高编程效率的得力工具。希望今天的分享能给大家一些启发，让我们一起在不断提升编程效率的道路上茁壮成长。一起加油！
