快速开发插件emmet，前端程序员炫技必备！

同学们肯定看到过有前端程序员在开发的时候输入一小行代码然后立马就出现一大串写好的代码，感觉很高大上的感觉。今天小千就来教大家如何实现这个效果。

平时我们在做开发的时候最费时间的工作就是写 HTML、CSS 代码。一堆的标签、属性、括号等，头疼。还经常会写一些结构重复的html。如果每个重复的代码都去复制粘贴，就会很麻烦！

你也知道程序猿都很懒惰，所以就有了一个叫 emmet 的插件，是不是想说你没有安装过？放心这个工具绝大部分的编辑器都内置了。

例如：hbuilderX、Sublime Text、Notepad++、VS code、Dreamweaver 等等。

接下来我们来看一下 emmet 这个插件的使用！

在你的编辑器新建一个html文件，创建基本的html结构代码，然后跟我一起来体验 emmet ！

对！没错错，首先就是咱们常用的 html初始结构；这一坨的html初始结构，如果每次要手打，想想都。。。

vscode为例：直接一个！然后按 Tab 解决战斗；hbuilderX为例：直接一个html 然后回车解决战斗；

下面介绍常用的结构语法

1、后代嵌套

如果你想写一个ul，ul内部写一个li，li内部写一个span，就可以在html文档中输入 ul>li>span，然后按下你的tab键，就会生成以下代码。

2、兄弟

如果你想写一个h2，下面跟着一个p。在html文档中输入 h2+p，然后按下你的tab键，就会生成以下代码

3、分组嵌套

如果你的div中要写一个h2和p。在html文档中输入 div>(h2+p)，然后按下你的tab键，就会生成以下代码：

4、乘法

解决你们问题的来喽！！！如果你想写一个ul，ul内部写多个li，每个li内部写一个span，那怎么写呢？我们在html文档中输入 ul>li*5>span，然后按下你的tab键，就会生成以下代码：

5、自动增长

如果你想创建一个ul，里面有5个li，并且li的类名还是类似item-1这的形式，在html文档中输入 ul>li.item-$*5，然后按下你的tab键，就会生成以下代码：

6、id和类

7、文本

以上就是集中常见的emmet插件的使用方法介绍了，赶紧去安装和使用吧，在你的小伙伴面前展示一下，他们一定会偷来羡慕的眼光！

本文来自千锋教育，转载请注明出处。

快速开发插件emmet，前端程序员炫技必备！相关推荐

python程序员专用壁纸_程序员炫技必备：用Python生成马赛克画！（文末附源码）...
原标题:程序员炫技必备:用Python生成马赛克画!(文末附源码) 源 | Python与数据分析文 | 强哥大家知道马赛克画是什么吗?不是动作片里的马赛克哦~~ 马赛克画是一张由小图拼成的大图,本 ...
前端快速开发插件emmet，炫技必备
同学们肯定看到过有前端程序员在开发的时候输入一小行代码然后立马就出现一大串写好的代码,感觉很高大上的感觉,今天小千就来教大家如何实现这个效果. 平时我们在做开发的时候最费时间的工作就是写 HTML.C ...
程序员炫技：探索高级编程之美
程序员常常被视为具有超强技术能力的人才,他们的代码充满了令普通人惊叹的炫技操作.在这篇文章中,我们将一起探讨程序员的炫技代码写法,分享一些高级编程技巧,同时提供一些学习建议,让你也能成为编程高手. 一 ...
程序员炫技：用c语言开发对对碰游戏，你打几分？
我发现不少游戏都是这样,泡泡龙,对对碰,连连看,三重镇--众多游戏都是汇集三个单位便会进行消除.那么今天小编就用C语言开发出一款对对碰小游戏这篇文章主要为大家分享了C语言对对碰游戏源码,具有一定的参 ...
前端开发需要掌握什么技术，成为一个高薪的web前端程序员很难吗？
一位优秀的前端开发工程师,技术是非常重要的.每年前端技术不断更替,学前端要掌握最新的知识才能赢在起跑线上.前端开发本身是一个高薪职业,但你的技术决定你的发展方向.那么,前端开发需要掌握什么技术,如何才 ...
前端开发如日中天，怎样成为一名优秀的WEB前端程序员？
近些年,越来越多的程序员转移阵地,搞起前端开发. 有不少的Android开发的程序员直接转到了前端开发. 而就拿JavaScript来说,就因前端流行使得它在各种编程语言排行榜上名列前茅. 那么,如何 ...
80%的前端程序员都遇到的问题，你中招了吗？
接近80%的前端程序员们都遇到过这一问题:工作有几年的时间了,为什么自己技术水平提高缓慢,薪资也不如人意? 对于大多数人来说,问题的关键在于没有找到正确的发展方向去发力. 找到正确的发展方向是重中之重 ...
初中级前端程序员面试中小型公司会问哪些问题?
初中级前端程序员面试中小型公司会问哪些问题?不同的公司面试内容也不尽相同,有的面试过程很轻松,有的面试官是个架构师level 挺高不会问八股文,给出了几个现实中的场景,然后转换成代码的逻辑去让实现. ...
前端程序员常用的9大构建工具
构建工具是一个把源代码生成可执行应用程序的过程自动化的程序(例如Android app生成apk).构建包括编译.连接跟把代码打包成可用的或可执行的形式. 在小型项目中,开发者往往手动调用构建过程,这 ...

快速开发插件emmet，前端程序员炫技必备！

快速开发插件emmet，前端程序员炫技必备！相关推荐

最新文章

热门文章