`

ZenCoding资料

 
阅读更多

一款不错的编辑器Sublime Text

插件 zenCoding

 

div#content>ul>li*3>a[href="javascript:void(0);"]{Links$}

 

使用ZenCoding编写代码时,需要遵循一定的缩写规则:

 

E

元素名(div、p);

E#id

带Id的元素(div#content、p#intro、span#error);

E.class

带class的的元素(div.header、p.error),id和class可以连着写,div#content.column

E>N

子元素(div>p、div#footer>p>span)

E*N

多项元素(ul#nav>li*5>a)

E+N

多项元素

E$*N

带序号的元素

 

Sublime Text 中使用Zen Coding的一些技巧

 

1、缩写扩展(Expand Abbreviation)。(tab)

 

     之前知道,通过Control + Alt + Enter可以在一个新行中输入ZC的缩写,来生成代码。同时,如果我们在编辑中直接书写了ZC缩写,比如 div#content>p 当光标放置在p之后时,可以通过Tab键来扩展,ZC会从光标处开始向左侧搜索到第一个空白处,之间的代码作为ZC缩写,这样不必每次打开新行输入,提高了效率,缺点就是不能够实时预览。

 

 

2、嵌套代码(Wrap with Abbreviation)

 nodpad++

 Ctrl+E 展开缩写

分享到:
评论

相关推荐

    zencoding中文参考手册

    ZenCoding已经被广泛集成到各种代码编辑器中,如Sublime Text、Atom、VS Code等,它们通常通过插件形式提供ZenCoding的功能。在这些编辑器中,可以通过快捷键或命令面板触发ZenCoding的缩写扩展。 5. **ZenCoding...

    zencoding notepad++ 的资源

    解压缩后,将`ZenCoding.dll`文件复制到Notepad++的`plugins`目录下。然后重启Notepad++,Zen Coding就应该已经准备好了。 2. **启用Zen Coding**:在Notepad++中,确保你正在编辑一个HTML或CSS文件。按下`Ctrl+...

    电子书资源包 PDF

    4. **《ZenCoding CheatSheet.pdf》**:Zen Coding(现在被称为Emmet)是一种高效的HTML和CSS编码技术,它基于缩写和快捷方式,能快速生成复杂的代码结构。Zen Coding的作弊表是学习和记忆其语法的绝佳工具,能够...

    2021-2022年收藏的精品资料软件工程师快速编写HTML和CSS的工具集合.docx

    Zen Coding,现更名为Emmet,是一款强大的编码插件,支持多种编辑器,如Aptana、Eclipse、TextMate等。它提供了类似于CSS选择器的缩写方式,允许开发者快速构建复杂的HTML结构。例如,`ul>li*5>a`会自动生成包含五个...

    dreamweaver扩展插件emmet及用法速查表

    7. **Zen Coding模式**:在Dreamweaver中启用Zen Coding模式,可以实现更流畅的Emmet体验。 压缩包中的“Emmet Cheat Sheet.pdf”是Emmet的速查表,包含了所有常用命令和快捷方式,建议经常查阅以加深记忆。"Emmet....

    emmetText3插件

    值得注意的是,Emmet插件还有许多高级功能,如Zen Coding模式、嵌套语法支持、内联编辑、CSS属性排序等。通过熟悉和掌握这些功能,开发者可以在编码过程中更加得心应手。同时,Emmet插件的设置可以根据个人喜好进行...

    Emmet从一张图片学习

    Emmet(原名Zen Coding)最初是为Sublime Text和Notepad++等文本编辑器设计的,但现在已经被广泛支持,包括Visual Studio Code、Atom等现代代码编辑器。它的核心思想是通过简短的缩写来生成复杂的HTML结构,极大地...

    网页制作高级特效教材课件汇总完整版ppt全套课件最全教学教程整本书电子教案全书教案课件合集.ppt

    它的前身是Zen Coding。通过Emmet的简写语法,可以极大地提高编写代码的效率,例如`div>ul>li*4`会被自动扩展为`<div><ul><li></li><li></li><li></li><li></li></ul></div>`。 - 在Dreamweaver等编辑器中,Emmet...

    YellowDocEmmet.github.io

    6. **Zen Coding**: Emmet最初被称为Zen Coding,是其早期的名字,后来为了扩展更多功能并适应更广泛的开发者群体,改名为Emmet。 7. **GitHub Pages**: 使用GitHub Pages,开发者可以免费托管静态网站,如这个...

    c9.ide.ace.emmet:Cloud9核心插件c9.ide.ace.emmet的存储库

    Emmet(原名Zen Coding)是一种快速编写HTML和CSS的方法,通过简短的语法来生成复杂的代码片段。在Cloud9 IDE中,c9.ide.ace.emmet插件将Emmet的功能集成到了编辑器中,让开发者能够更加便捷地进行Web开发。 【描述...

Global site tag (gtag.js) - Google Analytics