Emmet插件使用技巧.docxVIP

键盘输入HTML非常不符合人类的输入习惯，因为有大量的诸如 “” =之类的特殊符号，看似简单的HTML，真正手打是个让人伤脑筋的事情。使用Jacky Emmet(以前名为zencoding)插件（广泛支持各种平台），一切就变得明朗起来，它让我们能使用CSS的风格来高度缩略HTML语句。zencoding拥有高效快捷的缩略输入，极大地提高了生产力。?下面我以visual studio2013为例，插件下载地址/427e078e-4885-424b-8667-6485b7937145,下载后自动安装，打开vs2013会看到在菜单栏多出了一个Emmet Emmet官方文档以及视频演示http://emmet.io/?，需要注意的是不同的编辑器下面快捷键是不一样的，例如在大多平台上都是tab键，但是在vs2013 tab已经是微软设置好了的vs的快捷键了，所以在这里emmet展开的快捷键是ctrl+1。特殊操作符（务必注意，这些操作符都是对它后面的元素进行操作的）例如^p+strong意思是把让p和strong标签上爬后代Child:?兄弟姐妹Sibling:?+多项:Multi:*越级上爬Climb-up: ^编号Item numbering:?$文本Text:?{}本文作者澳大利亚悉尼大学电子与信息工程学院张志刚快捷输入达成效果div再按tabdiv/divdivli*3（再按ctrl+1,后面的全都是这样）p+strong+bulli*3span+strongdiv+divpspan+em^bqdiv(headerulli*2a)+footerpdiv#menu_wrapperdiv.leftcol(h4{Dinner Entrees}+ul.menu_entrees(liul.menu_listli*3)*3)strong$*5 当然这么写是错误的ulli.item$*5或者 ulli.item$@+*5ulli.NB$*5ulli.item$@3*5ulli.item$@-3*5降序编号 ulli.item$@-*5文本a{Click me}p{Click }+a{here}+{ to continue}注意{text}在解析的时候，Emmet把当标签一样看待注意，千万别在标签和操作符之间加空格，Emmet认为空格是结束解析缩写的符号,Emmet也不支持中文，不要打汉字