提高新手写代码效率的Emmet插件怎么使用

  平常写代码的时候通常会要写很多结构重复甚至相同的html，如果每一个重复的代码都去c+v，就会非常浪费时间。

  所有就有了今天要推荐给各位小白新手的插件：Emmet，现在大部分编辑器都内置了emmet插件，例如：hbuilderX、Sublime Text、Notepad++、VS code等等，省去了安装的步骤。

  接下来跟我一起看看怎么使用吧。

  在你的编辑器新建一个html文件，创建基本的html结构代码

vscode为例：打出一个！然后按 Tab ；hbuilderX为例：打出html 然后回车。

  下面介绍常用的结构语法：

 1、> 嵌套

如果想写一个ul里面是li，每一个li里是span标签，可以在html里输入ul>li>span，按下tab就会生成。

 

2、*  代表重复几次

如果想写一个ul里面是li，每一个li里是span标签，该怎么写呢？我们在html里输入ul>li*5>span，按下tab就会生成。

3、() 整体嵌套

如果在div中想写一个span和p的话，可以在html里输入div>(span+p)，按下tab就会生成。

 4、+ 同级

如果想写一个div，下面跟着一个span，可以在html里输入div+span，按下tab就会生成。

 

 5、{} 文本

如果你想在你的div里写文本，可以在html里输入div{text}，按下tab就会生成。

 6、￥ 递增

如果你想在你的ul里创建5个li，并且li里面的内容是从某个数字开始递增的话，可以在html里输入ul>li*5>{$}，按下tab就会生成。

 7、id和类

盒子的id和类名可以直接快捷写出来，如下

div#(要命名的id) id

.(要命名的类名)box

以上常见的emmet插件的使用方法啦，希望对刚刚接触html的小白带来帮助，加油！