同学们一定有过这样的感觉：前端程序员在开发过程中输入了小行代码，很快出现了很多写的代码，感觉很高。 今天小千会教你如何实现这个效果。
我们平时进行开发时最需要时间的工作是写HTML、CSS代码。 很多标签、属性、括号等，让人头疼。 也经常写结构重复的html。 如果按重复的代码复制粘贴，会很麻烦！
你也知道，程序猴子很懒惰，所以有一个叫emmet的插件。 你是想说你没有安装过吗？ 放心，这个工具内置在大多数编辑器中。
例如，hbuilderX、Sublime Text、Notepad、vs代码、Dreamweaver等。
接下来，让我们来看看名为emmet的插件的使用！
请在您的编辑器中创建新的html文件，编写基本的html结构代码，并与我一起体验emmet！
没错！ 没错，首先是我们常用的html的初始结构； 这个块状的html的初期结构，如果是每次手打的话，请考虑一下。
以vscode为例，直接一个！ 然后按Tab解决战斗； 以hbuilderX为例，直接传递一个html，然后返回车上解决战斗；
介绍一般的结构语法
1、后代嵌套
如果要编写ul，请在ul内部编写li，在li内部编写span，然后在html文档中键入ullispan并按tab键，将生成以下代码：
2、兄弟
如果你想写h2，下面有p。 在html文档中键入h2 p，然后按tab键生成以下代码
3、群嵌套
如果要在你的div上写h2和HP的话。 在html文档中键入div(h2p )，然后按tab键生成以下代码：
4、乘法
我是来解决你们的问题的！ 如果想写一个ul，想在ul内部写多个li，想在每个li内部写一个span，怎么写？ 在html文档中输入ulli*5span，然后按您的选项卡将生成以下代码：
5、自动增长
尝试创建ul时，其中有五个li，li的类名仍然类似于item-1。 在html文档中键入ulli.item-$*5，然后按选项卡生成以下代码：
6、id和类
7、文本
以上总结介绍了一般的emmet插件的使用方法。 马上安装使用吧。 请在你的伙伴面前展示。 他们一定会偷走羡慕的眼睛吧。
本文来自千锋教育，转载请注明出处。