用作一个WEB前端工笔者,是不是考虑过那些主题素材:对于代码的编写作用是或不是有比不小的上进,恐怕对于好些个人的话都有三个瓶颈,怎么样突破它,怎样加强工效,需求大家温馨深入钻研了。

编写制定 HTML、CSS 代码始终攻陷了不小的行事比例,非常是手动编写 HTML
代码,成效非常低下,因为需求敲打种种“尖括号”、闭合标签等,时间一长感到单调无比,脑壳发胀啊。职业之余无意中在有些调换群里开掘存人提到过几个插件:Emmet;然后切磋了下,开掘它实际便是Zen
Coding晋级版了,只但是换了个“马甲”而已,接下去就详细介绍下Emmet。

Emmet如今帮忙的编辑器:

DreamweaverSublime Text 2Sublime Text 3 TextMate 1.xEclipse/AptanaCoda
1.6 and 2.xEspressoChocolat (能够透过 “Install Mixin” 对话框安装卡塔尔Komodo
Edit/IDE Notepad++PSPad

CodeMirror2/3Brackets

安装Emmet:

本人眼下采取的是Dreamweaver CS6和Sublime
text3,看大家习贯了。笔者就讲讲什么样在Dreamweaver CS6中使用emmet。

Emmet官方下载地址: 。

如若您早就安装了Adobe的Extension
Manager,间接双击安装就足以啦!假设木有,点击这里下载。

手拉手“是”和“选用”到底,装完重启DW,然后点击最上部导航“命令”就可以以知道见Emmet啦。如下图:

急迅键的安装:

未有飞速键在写代码的时候不是很有利,上面包车型客车精简的牵线下:

1、点击“编辑”》“火速键”,然后在“当前设置”里选用“Emmet”,如图:

2、点击“命令”》“Emmet”,然后选中“Expand
Abbreviation”,然后在上面包车型客车火速键里就足以设置了,如图:

至于应该怎么设置快速键,在这里间就不啰嗦了,相信大家能够解决。平常安装的是“TAB”,看个人习贯了。

有备无患粮草先行职业解决了,先看四个实例:

大家在DW里面输入 Emmet
的下令:#page>div.logo+ul#navigation>li*5>a{Item $}

下一场按下大家写的火速键“TAB”,发掘美妙的朝气蓬勃幕现身了,发掘那行指令产生了上边的HTML 结构:

  • Item 1
  • Item 2
  • Item 3
  • Item 4
  • Item 5

相关文章

网站地图xml地图