前言
相信每一个程序员都有自己的大厂梦，大厂程序员要做好开发，效率非常关键。高效的开发能够更快地完成项目任务，提高产品质量，还能让自己有更多的时间去学习新技术和提升自己。因此，作为一个小白一定要打好自己的基础，首先我们从Emmet语法谈起，养成良好习惯，提升自己和团队的开发效率。
Emmet语法
Emmet是一个Web开发工具，用于加快HTML和CSS代码的编写速度。使用Emmet能够通过简短的表达式生成HTML或CSS代码片段。下面是一些常用的Emmet语法规则：
-
初始化HTML结构：新建一个html结构后可以使用!+ tab键初始化HTML结构。
-
id（#）和class（.）：id使用#号，class使用.号，id和class不能同时使用。
- 例如生成一个带有id或者类名的emmet语法：id为div#main+ tab
- class为div.head+ tab
- 多个类可以继续追加div.head.box+ tab
- 事实上div是我们用的最多的标签，因此在我们使用div标签时可以省略div，例如.head就可以直接生成类名为head的div标签
-
子节点（>）、上级节点（^)、兄弟结点（+）：
- 子节点使用>连接两个标签名，后者会加在前者的内部（即成为前者的子元素）。例子：div>input
- 上级节点与>符号常常同时使用，在^符号后的元素名会与前一个元素的父级元素同级，可以连续使用，表示上升多级。例子：div>p^a
- 兄弟结点被+符号相连的元素最后生成同级元素。例子：div+p
-
重复（）：有时候需要生成多个同样的标签，可以直接使用 生成而不用一个个复制。如div*5
-
属性（(attr)）：为元素添加其它任意属性，与id和class比较类似。假设要创建一个带有
data - attribute属性的div元素，可以输入div[data - attribute = "value"]，然后按下Tab键，将生成<div data - attribute = "value">。 -
编号（）：代表一位数字，后面跟的和数字代表从递增到紧跟的数字，可以在后加@-实现倒序，在$后面添加@N改变编号的起始基数。
less
例如：从 1 递增到 5：
可以输入 ul>li*$*5，按下 Tab 键后，将生成一个包含 5 个列表项的无序列表。
每个列表项的编号从 1 到 5。
即 `<ul>
<li>1</li><li>2</li><li>3</li><li>4</li><li>5</li>
</ul>`。
再如：从 5 倒序到 1：
输入 ul>li$@-*5，按下 Tab 键，生成的无序列表的列表项编号从 5 到 1 倒序排列。
即 <ul>
<li>5</li><li>4</li><li>3</li><li>2</li><li>1</li>
</ul>。
变更起始基数：
从 3 开始递增到 7：
使用 ul>li$@3*4，然后按 `Tab` 键，会得到一个无序列表，其中列表项的编号从 3 开始，递增到 7。
即 <ul>
<li>3</li><li>4</li><li>5</li><li>6</li><li>7</li>
</ul>。- 文本（{}）：元素后面使用{}符号可以在元素内部加入{}内容。
- 例如div>{我是div}
- 分组（()）：组合代码块，写较长的emmet语法时用来分隔。例如：
css
main.container>(label.custom-file-upload>input#file-upload)+#image-container+p#starts
类名为container的main标签中
包含一个类名为custom-file-upload的label标签
并且label还包含一个id为file-upload的input标签
与label同为兄弟，也就是一同包含在main中的还有id为image-container的div标签和id为starts的p标签
结语
学会了emmet语法的理论以后，希望大家一定要通过手敲进行实战，养成良好编程习惯，厚积薄发冲刺大厂！