邹城建网站,网站建设征税标准,上海专业网站推广公司,色彩设计网站zen-Coding是一款快速编写HTML,CSS#xff08;或其他格式化语言#xff09;代码的编辑器插件#xff0c;这个插件可以用缩写方式完成大量重复的编码工作#xff0c;是web前端从业者的利器。 zen-Coding插件支持多种编辑器#xff0c;如UltraEdit#xff0c;Notepad等。 温… zen-Coding是一款快速编写HTML,CSS或其他格式化语言代码的编辑器插件这个插件可以用缩写方式完成大量重复的编码工作是web前端从业者的利器。 zen-Coding插件支持多种编辑器如UltraEditNotepad等。 温馨提示zen-Coding已经改名Emmet并且搭建了一个新的网站docs.emmet.io。 zen-Conding下载地址http://code.google.com/p/zen-coding/downloads/list (进入下载页选择相应的编辑器插件下载) Notepad 是一款无比轻巧便捷的代码编辑工具。它无可挑剔的启动速度优秀的语法高亮干净整齐的代码缩进便捷的括号高亮匹配赢得了无数人的喜爱。 但其代码自动补全很“鸡肋”或者说Notepad根本就没有代码补全功能。平时改点源代码很方便但是想单独的写点源代码就比较麻烦了难道要一点点的都敲吗先上段视频 怎么样惊呆了吧。Zen Coding–一款使用仿CSS选择器的语法来快速开发HTML和CSS的插件。它无视了编辑器的自动提示和自动完成秒杀了你自定义的各种快捷键或者 AHK 的热字符串以智能简洁高效的缩短输入带给你超快速地书写各种复杂而枯燥的 HTML 和 CSS 代码的体验。 1.下载zen-Coding的Notepad插件;(zen-Coding for Notepad)2.解压后将压缩包中的文件放入Notepad安装目录下的plugins文件夹中;3.重新启动Notepad编辑器就能看到菜单栏上增加了一项Zen Coding。如下图所示 二、zen-Coding的使用 zen-Coding的使用需要掌握CSS和HTML相关知识。其实只要对CSS的选择器比较熟悉就可以得用简短的类似于CSS选择器的代码高效的编写出HTML代码。打开Notepad编辑器输入以下代码div#name 然后接着按一下快捷键ctrlE就会自动生成如下的HTML代码 1 div idname/div 接下来看一个更高效的例子 div#headerdiv#logoul.navli.item-$*5a 按ctrlE生成如下代码 1 2 3 4 5 6 7 8 9 10 div idheader div idlogo/div ul classnav li classitem-1a href/a/li li classitem-2a href/a/li li classitem-3a href/a/li li classitem-4a href/a/li li classitem-5a href/a/li /ul /div Zend Coding语法 1.E | E#name | E.name 这里E表示元素如p,div等。#name和.name分别表示ID和class属性。例 div 1 div/div div#main 1 div idmain/div ul.item 1 li classitem/li 如要显示一个id和多个class属性时可以这样写 ul#nav.one.two 1 ul idnav classone two/ul 2.EE | E#nameE#name | E.#nameE.name | E.nameE.name 表示父级嵌套子级。例 divspan 1 divspan/span/div div#navul.main 1 2 3 div idnav ul classmain/ul /div 3.EE | E#nameE#name | E.#nameE.name | E.nameE.name 号表示兄弟关系。例 pp 1 2 p/p p/p div#headerdiv#contentdiv#footer 1 2 3 div idheader/div div idcontent/div div idfooter/div E (号表示会生成默认的子元素) table 1 2 3 4 5 table tr td/td /tr /table ul 1 2 3 ul li/li /ul dl 1 2 3 4 dl dt/dt dd/dd /dl 4.E*N N:表示某个元素需要重复的次数。例 p*3 1 2 3 p/p p/p p/p ul#navli.item*4 1 2 3 4 5 6 ul idnav li classitem/li li classitem/li li classitem/li li classitem/li /ul 5.E*N$ $:表示序号。例 ul#navli.item-$*4 1 2 3 4 5 6 ul idnav li classitem-1/li li classitem-2/li li classitem-3/li li classitem-4/li /ul 6.E[attr] attr:表示元素属性。例: a[title] 1 a href title/a td[colspan2] 1 td colspan2/td 7.E|filter E|e |e输出转义字符 div#wrapdiv.contentp|e 1 2 3 4 5 lt;div idwrapgt; lt;div classcontentgt; lt;pgt;lt;/pgt; lt;/divgt; lt;/divgt; 8.( )控制嵌套分组关系 div#header(h1.logoa)ul.navli.item*5a 1 2 3 4 5 6 7 8 9 10 div idheader h1 classlogoa href/a/h1 /*h1和ul是兄弟关系*/ ul classnav li classitema href/a/li li classitema href/a/li li classitema href/a/li li classitema href/a/li li classitema href/a/li /ul /div div#headerh1.logoaul.navli.item*5a 1 2 3 4 5 6 7 8 9 10 11 12 div idheader h1 classlogo /*h1和ul是父子关系*/ a href/a ul classnav li classitema href/a/li li classitema href/a/li li classitema href/a/li li classitema href/a/li li classitema href/a/li /ul /h1 /div 以上两种写法得到的结构是不一样的。 请大家注意观察。 练习将以下代码用zen-coding写出来。 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 div idpage div idheader ul idnav lia href/a/li lia href/a/li lia href/a/li lia href/a/li /ul /div div idpage h1span/span/h1 p/p p/p /div div idfooter/div /div 答案(选中下一空行试试)div#page(div#headerul#navli*4a)(div#page(h1span)p*2)div#footer 三、Notepad中zen-coding的使用 Expand Abbreviation(CtrlE):展开缩写 用法输入缩写代码后在代码末尾直接按快捷键得到完整代码。 Wrap with Abbreviation(CtrlShiftA):嵌套父级元素 用法选中需要嵌套父级元素的标签按快捷键在弹出的对话框中输入父级标签回车即可。例 1 2 3 4 5 list1 list2 list3 list4 list5 选中以上内容然后按【CtrlShiftA】在弹出的对话框中输入ul.navli.item-$*a[title]后按【Enter】键就会生成如下代码 1 2 3 4 5 6 7 ul classnav li classitem-1a href titlelist1/a/li li classitem-2a href titlelist2/a/li li classitem-3a href titlelist3/a/li li classitem-4a href titlelist4/a/li li classitem-5a href titlelist5/a/li /ul Balance TagInward/Outward(CtrlShiftD):选中代码块 选中当前光标所在的标记再次按下可以依次选中其父标签。 Go to Next/Previous Edit Point( CtrlAlt] / CtrlAlt[ ):转到下一个/上一个编辑点 Merge Lines(CtrlAltM):合并行 将选中的多行代码合并为一行。压缩css、js代码为一行时这个很方便。CtrlA然后CtrlAltM两下即可搞定免去了动用压缩工具的麻烦。当然这个只是简单地将代码合并为一行并不能做更深入的代码压缩 Toggle Comment(Alt/):添加、移除注释 注释掉光标所在的代码块 Notepad 自带的CtrlShiftQ也可以用来注释代码 Split/Join Tag(Ctrl’ ):空标签转化 比如将 div/div 转化为 div/ 反向亦可。 Remove Tag(CtrlShift’ ):移除标签 比如将 divhello world/div 移除div标签留下hello world。 zen-coding常用缩写 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 html:4t (HTML 4.01 Transitional) html:4s (HTML 4.01) html:xt (XHTML 1.0) html:xs (XHTML 1.0 Strict) html:xxs (XHTML 1.1) html:5 (HTML5) meta:utf, meta:compat style, link:css, link:print, link:favicon, link:rss, script, script:src div, p, a, ul, ol, input:t, input:r ol, dl, table, tr, select, map, optg cc:ie6, cc:ie, cc:noie 可以打开plugins\NppScripting\includes\Zen Coding.js这个JS文件看一看熟悉Zen Coding自带的一些缩写规则。 Zen Coding PDF缩写下载 www.songxiaodong.com.cn 转载于:https://www.cnblogs.com/goodbeypeterpan/p/3962820.html