html用emmt写菜单,前端开发工具Emmet的介绍

曾经也为写HTML/CSS代码而烦恼过，不愿再写下去，感觉很烦琐，写那么多的尖括号，用的标签都是在重复写，而且绝大多数标题都需要闭合标签，再多几个无序列表就更头疼。

Emmet，一个强大的插件，可以为我们解决这些问题，是前端开发人员必备的工具包。可以在许多流行的文本编辑器中安装使用，大大提高了编写HTML和CSS代码的工作效率。

Emmet是用纯JavaScript编写的，是一款跨平台的强大HTML/CSS代码编辑插件，超高速的完成HTML/CSS的开发。

最初知道有这样神奇的插件是寻找Sublime Text插件时，知道Zen Coding，一个可以快速编写HTML/CSS代码的工具，看到演示效果，只有用神奇来表达，现在有了Emmet，而且是在Zen Coding基础上再次开发，功能各方面肯定是更加强大。

下面就在Sublime Text和Notepad++这两款编辑器中安装，一些代码编写还是以Sublime Text为例(推荐大家使用Sublime Text编辑器，用了你肯定会喜欢，而Notepad++是相当好的开源文本编辑器，舍不得删除。)

Emmet的安装：

1、在Sublime Text安装：

没有用过Sublime Text编辑器的朋友还是先看下这篇文章：Sublime Text 2 - 性感无比的代码编辑器！

在Sublime Text中按“Ctrl+Shift+p”快捷键或在菜单-工具中打开“命令面板”，输入：Install Package (安装扩展)后回车，弹出新的窗口，再查找“Emmet”确定安装：

2、在Notepad++安装：

打开菜单：插件-Plugin Manager-Show Plugin Manager面板，找到“Emmet”勾选后，点击“Install”，中途会弹窗提示需要安装或更新文件，确定就OK。

用Emmet编写时需要再转换成HTML/CSS代码，而Sublime Text和Notepad++的快捷键是不一样，分别是：Tab和Ctrl+Alt+Enter。

Emmet快速编写HTML/CSS：

缩写是Emmet的核心，Emmet中特殊的表达式在运行时解析和转化为结构化代码块，缩写的语法看起来就是CSS选择器和一些特定的HTML代码，所以稍微了解了就能看明白和如果使用。

我们先举个例，在编辑器中输入：

#page>div.logo+ul#navigation>li*5>a{Item $}

[slidenormal borderleft="4px solid #ddd" color="#000"]再按Tab键你会看到它神奇的效果，得到的HTML代码是：[/slidenormal]

Item1
Item2
Item3
Item4
Item5

html用emmt写菜单,前端开发工具Emmet的介绍相关推荐

纯前端大数据处理技术：葡萄城纯前端开发工具应用实践
SpreadJS 是一款基于 HTML5 的纯 JavaScript 电子表格和网格功能控件,满足多平台.跨平台的表格数据处理和类 Excel 的表格应用开发. WijmoJS 前端开发工具包由多款纯 ...
2012年度最佳Web前端开发工具和框架总结
2012年度最佳Web前端开发工具和框架总结 2013/01/18 | 分类: 工具与资源 | 1 条评论 | 标签: 前端, 开发工具, 开发框架分享到:0 来源:梦想天空技术的快速发展让很多人 ...
开发人员必须了解的 10 大前端开发工具
全文 2960 字阅读时间约 9 分钟目录第一类:常规前端开发工具 React编辑 Angular编辑 Flutter编辑 Bootstrap编辑 Vue.js编辑第二类:可视化开发 ...
前端开发工具 —— VSCode - Snipaste - Photoshop - Fireworks - Icomoon字库
视频参考:https://www.bilibili.com/video/av80149248 笔记参考:https://www.bilibili.com/video/av78942920/?spm_i ...
2012年度最佳Web前端开发工具和框架
摘要:技术的快速发展让很多人学习起来无所适从,幸运的是,很多优秀的 Web 开发人员和设计人员在努力寻找各种有特色的解决方案. 因此,我们有了很多优秀的小工具和库,每一个都是用来解决特定的问题或维护一 ...
前端分离的前端开发工具_使我成为前端开发人员工作的工具和资源
前端分离的前端开发工具 Learning front-end development can be a bit overwhelming at times. There are so many res ...
超级棒的170+款web前端开发工具汇总，千万要收藏好！
作者:web前端开发我们与企业内部的Web开发团队进行了很多次交流,研究了很长时间,最后将Debug工具与Web前端开发工具整理汇总在了一起,这些工具对每个Web开发人员都非常有用. 这些工具将使您 ...
chrome前端开发工具_精通Chrome开发人员工具：更高级别的前端开发技术
chrome前端开发工具 by Ben Edelstein 通过本·爱德斯坦 You may already be familiar with the basic features of the Ch ...
细数那些年我用过的前端开发工具
图片发自简书App 一:HBuilder 下载地址:http://www.dcloud.io/ 飞速编码的极客工具,大幅提升HTML.js.css的开发效率. 使用HTML5开发,然后使用HBuild ...

html用emmt写菜单,前端开发工具Emmet的介绍

html用emmt写菜单,前端开发工具Emmet的介绍相关推荐

最新文章

热门文章