前言

相信每一个程序员都有自己的大厂梦，大厂程序员要做好开发，效率非常关键。高效的开发能够更快地完成项目任务，提高产品质量，还能让自己有更多的时间去学习新技术和提升自己。因此，作为一个小白一定要打好自己的基础，首先我们从Emmet语法谈起，养成良好习惯，提升自己和团队的开发效率。

Emmet语法

Emmet是一个Web开发工具，用于加快HTML和CSS代码的编写速度。使用Emmet能够通过简短的表达式生成HTML或CSS代码片段。下面是一些常用的Emmet语法规则：

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

• id（#）和class（.）：id使用#号，class使用.号，id和class不能同时使用。

  1. 例如生成一个带有id或者类名的emmet语法：id为div#main+ tab
  2. class为div.head+ tab
  3. 多个类可以继续追加div.head.box+ tab
  4. 事实上div是我们用的最多的标签，因此在我们使用div标签时可以省略div，例如.head就可以直接生成类名为head的div标签

• 子节点（>）、上级节点（^)、兄弟结点（+）：

  1. 子节点使用>连接两个标签名，后者会加在前者的内部（即成为前者的子元素）。例子：div>input
  2. 上级节点与>符号常常同时使用，在^符号后的元素名会与前一个元素的父级元素同级，可以连续使用，表示上升多级。例子：div>p^a
  3. 兄弟结点被+符号相连的元素最后生成同级元素。例子：div+p

• 重复（）：有时候需要生成多个同样的标签，可以直接使用生成而不用一个个复制。如div*5

• 属性（(attr)）：为元素添加其它任意属性，与id和class比较类似。假设要创建一个带有 data - attribute 属性的 div 元素，可以输入 div[data - attribute = "value"]，然后按下 Tab 键，将生成 <div data - attribute = "value">。

• 编号（）：代表一位数字，后面跟的和数字代表从递增到紧跟的数字，可以在后加@-实现倒序，在$后面添加@N改变编号的起始基数。

例如：从 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语法时用来分隔。例如：

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语法的理论以后，希望大家一定要通过手敲进行实战，养成良好编程习惯，厚积薄发冲刺大厂！