Zen Coding – 超快地写网页代码

上次在北京看到善用佳软的 xBeta 演示 VIM 的时候，@sfufoet 我就被强烈震撼到了。VIM 的确是个强大的编辑器，它可以折腾出很多种强大的功能。今天看到这个叫 Zen Coding 的东西，我强烈推荐给经常和 HTML CSS 打交道的朋友。@appinn

下面的动态演示图，只是它强大功能的一部分而已。它无视了编辑器的自动提示和自动完成，秒杀了你自定义的各种快捷键或者 AHK 的热字符串，以智能简洁高效的缩短输入，带给你超快速地书写各种复杂而枯燥的 HTML 和 CSS 代码的体验。

先举一个复杂的例子：zen-coding 可以把这样的代码：div#header>ul.navigation>li*4>a，变成下面的 HTML 代码

看到这熟悉的语法结构，会 CSS 的朋友一定会惊声尖叫！最妙的是那个“*4”，直接生成 4 个 li 代码了。没错，Zen Coding 就是这样牛叉的东西，Zen Coding 分为 Zen HTML 和 Zen CSS 两部分。这两部分功能是以插件的形式来实现的。如果你用 NetBeans、SlickEdit、Sublime、TextMate、TopStyle、UltraEdit、WebIDE and IntelliJ IDEA、Dreamweaver、Aptana 都可以在官方下载页面找到相关的插件。

即使你不使用上面提到的编辑器，那么还有一种选择，点击下载页面的最后一个链接： Zen Coding for 。这是一个网页版的 Zen Coding！打开 example.html 之后，把光标定位到文本框里面，按下 Ctrl + E 试试吧。</p> <p>网页版快捷键说明：</p> <ol> <li>Ctrl + E：展开代码</li> <li>Ctrl + D：向外快速选中代码块</li> <li>Shift + Ctrl + D：向内快速选中代码块</li> <li>Shift + Ctrl + A：输入一个缩写，自动展开并包围所选代码</li> <li>Ctrl + Alt+→ ：光标智能跳转到下一个编辑点（自己试试就知道多体贴了）</li> <li>Ctrl + Alt+←：光标智能跳转到上一个编辑点</li> <li>Ctrl + L：选择一行</li> </ol> <p>官方演示视频：Zen CSS 和 Zen HTML。另外，缩写的含义请看：Zen CSS Properties 和 Zen HTML Elements，各种插件的安装方法请看官方 wiki。</p> <p>最后提醒一点：在这个墙外的官方演示视频(高清)中，墙内观看地址，还出现了自定义缩写的演示。具体设置过程请参考官方 wiki。</p> <p><img width="83" height="26" decoding="async" style="float: left;" class="imgdown" src="/uploads/ueditor/20240326/-2403260Z9512W.jpg" alt="小众软件下载" title="点击右侧的链接下载本软件" />下载：官方网站</p> <p>P.S. 前端观察已经写了详细的教程 Zen Coding:快速编写 HTML/CSS 代码</p> <p>update: 多谢 SULei 的提醒：EditPlus 也有了，zen code for EditPlus</p> <input type='hidden' class='lgw_asciicontent_content' value='1' /> </div> <div class="post-entry-categories"><a href='/tags/20138.html'>精选</a><a href='/tags/20281.html'>编程</a><a href='/tags/20485.html'>网页</a> <a href='https://howsos.com/' target="_blank" style="color:#fff;background-color:#fff">破解软件下载</a></div> <div class="text-banquan">链接如若失效请反馈；网络整理资源若侵权留言处理！</div>  <script type="text/javascript"> if (!window.jQuery) { document.write(unescape("%3Cscript src='/public/static/common/js/jquery.min.js' type='text/javascript'%3E%3C/script%3E")); document.write(unescape("%3Cscript type='text/javascript'%3E try{jQuery.noConflict();}catch(e){} %3C/script%3E")); } // 引入jquery开关，下面这行代码请勿删除！ console.log('ey_is_jquery'); </script> <script type="text/javascript" src="/public/plugins/layer-v3.1.0/layer.js?t=1559034826"></script><script type="text/javascript" src="/template/plugins/comment/pc/skin/js/reply.js?t=1573555078"></script><link rel="stylesheet" type="text/css" href="/template/plugins/comment/pc/skin/css/reply.css?t=1573557208" />  <script type="text/javascript" src="/public/plugins/Ueditor/ueditor.config.js?t=1624931143"></script><script type="text/javascript" src="/public/plugins/Ueditor/ueditor.all.min.js?t=1634698710"></script><script type="text/javascript" src="/public/plugins/Ueditor/lang/zh-cn/zh-cn.js?t=1624931113"></script> <main class="ey_comment_row" id='ey_comment'>  加载中~ </main> <script type="text/javascript"> // 第一次刷新，自动加载执行 ajaxComment_1572491762("18293", ''); </script>  </div> <div class="posts-cjtz content-cjtz clearfix"></div> <div class="next-prev-posts clearfix"> <div class="prev-post" > <a href="/Windows/18292.html" class="prev has-background" style="background-image: url(/uploads/ueditor/20240326/-2403260Z944D5.jpg"> <span>上一篇</span> <h4>QQ 影像 – 腾讯发布图片管理软件</h4> </a> </div> <div class="next-post" > <a href="/Windows/18294.html" class="nextv has-background" style="background-image: url(/uploads/ueditor/20240326/-2403260Z953551.jpg"> <span>下一篇</span> <h4>PicPick v2.2 添加分享社会化网络功能</h4> </a> </div> </div> <div class="related-post"> <h3><span>猜你喜欢</span></h3> <ul> <li> <div class="item"> <a href="/Windows/18014.html" title="Appinn lock – AHK 版的 U 盘锁"> <div class="overlay"></div> <img class="thumbnail" src="/uploads/ueditor/20240325/-24032509192O30.jpg" alt="Appinn lock – AHK 版的 U 盘锁"> <h4><span>Appinn lock – AHK 版的 U 盘锁</span></h4> </a> </div> </li> <li> <div class="item"> <a href="/android/6389.html" title="微信APP(WeChat) v8.0.37.2366 微信谷歌版"> <div class="overlay"></div> <img class="thumbnail" src="/uploads/ueditor/20230825/2-230R51A940218.jpg" alt="微信APP(WeChat) v8.0.37.2366 微信谷歌版"> <h4><span>微信APP(WeChat) v8.0.37.2366 微信谷歌版</span></h4> </a> </div> </li> <li> <div class="item"> <a href="/Windows/8580.html" title="Optim_Me(windows服务优化工具) v0.0.1 绿色版"> <div class="overlay"></div> <img class="thumbnail" src="/uploads/ueditor/20240307/-24030G43611c1.jpg" alt="Optim_Me(windows服务优化工具) v0.0.1 绿色版"> <h4><span>Optim_Me(windows服务优化工具) v0.0.1 绿色版</span></h4> </a> </div> </li> <li> <div class="item"> <a href="/Windows/21195.html" title="PasteBar(剪贴板管理器) v0.6.2"> <div class="overlay"></div> <img class="thumbnail" src="/uploads/ueditor/20240906/-240Z61A11QY.jpg" alt="PasteBar(剪贴板管理器) v0.6.2"> <h4><span>PasteBar(剪贴板管理器) v0.6.2</span></h4> </a> </div> </li> <li> <div class="item"> <a href="/android/6033.html" title="腾讯新闻App_v6.1.30_纯净无广告华为定制版"> <div class="overlay"></div> <img class="thumbnail" src="/uploads/ueditor/20230825/2-230R5164124117.jpg" alt="腾讯新闻App_v6.1.30_纯净无广告华为定制版"> <h4><span>腾讯新闻App_v6.1.30_纯净无广告华为定制版</span></h4> </a> </div> </li> <li> <div class="item"> <a href="/Windows/20889.html" title="Kutools for Outlook v19.0 Outlook增强插件中文特别版"> <div class="overlay"></div> <img class="thumbnail" src="/uploads/ueditor/20240706/-240F6000200339.jpg" alt="Kutools for Outlook v19.0 Outlook增强插件中文特别版"> <h4><span>Kutools for Outlook v19.0 Outlook增强插件中文特别版</span></h4> </a> </div> </li> </ul> </div> <div class="clear"></div> </div> <div class="sidebar col-xs-12 col-sm-4 col-md-4"> <div class="widget widget_suxingme_postlist">  <h3><span>随便看看</span></h3> <ul class="recent-posts-widget"> <li class="one"> <a href="/Windows/13259.html" title="用 DriverStore Explorer 清理 DriverStore 驱动文件夹，释放系统盘空间"> <div class="overlay"></div> <img class="thumbnail" src="/uploads/ueditor/20240313/-24031309255A34.jpg" alt="用 DriverStore Explorer 清理 DriverStore 驱动文件夹，释放系统盘空间" /> <div class="title"> <span>2024-03-13</span> <h4>用 DriverStore Explorer 清理 DriverStore 驱动文件夹，释放系统盘空间</h4> </div> </a> </li> <li class="others"> <div class="image"> <a href="/Windows/7614.html" title="JetBrains PyCharm 2020.3.5 Professional"> <img src="/uploads/ueditor/20231121/2-23112110121R51.jpg" alt="JetBrains PyCharm 2020.3.5 Professional" class="thumbnail" /> </a> </div> <div class="title"> <h4><a href="/Windows/7614.html" title="JetBrains PyCharm 2020.3.5 Professional">JetBrains PyCharm 2020.3.5 Professional</a></h4> <span>2023-11-27</span> </div> </li> <li class="others"> <div class="image"> <a href="/Windows/19401.html" title="[GD]Democreator – 录制屏幕软件"> <img src="/uploads/ueditor/20240329/-24032ZZ455560.jpg" alt="[GD]Democreator – 录制屏幕软件" class="thumbnail" /> </a> </div> <div class="title"> <h4><a href="/Windows/19401.html" title="[GD]Democreator – 录制屏幕软件">[GD]Democreator – 录制屏幕软件</a></h4> <span>2024-03-29</span> </div> </li> <li class="others"> <div class="image"> <a href="/Windows/16367.html" title="水印相机 – 给照片添加漂亮的水印[Android]"> <img src="/uploads/ueditor/20240321/-2403210Z91H08.jpg" alt="水印相机 – 给照片添加漂亮的水印[Android]" class="thumbnail" /> </a> </div> <div class="title"> <h4><a href="/Windows/16367.html" title="水印相机 – 给照片添加漂亮的水印[Android]">水印相机 – 给照片添加漂亮的水印[Android]</a></h4> <span>2024-03-21</span> </div> </li></ul> </div> <div class="widget widget_suxingme_hotpost"> <h3><span>热门文章</span></h3> <ul class="widget_suxingme_post"> <li> <a href="/chajian/5051.html" title="无水印解析下载小视频方法（脚本和插件）"> <div class="overlay"></div> <img class="thumbnail" src="/uploads/ueditor/20221119/1-22111Z951264O.jpg" alt="无水印解析下载小视频方法（脚本和插件）" /> <div class="title"> <div class="entry-meta"><span>2022-11-19</span> </div> <h4>无水印解析下载小视频方法（脚本和插件）</h4> </div> </a> </li> <li> <a href="/macos/2925.html" title="越狱工具Unc0ver v8.0.2 支持iOS 14.6-14.8系统 "> <div class="overlay"></div> <img class="thumbnail" src="/uploads/ueditor/20220915/1-22091522234M18.jpg" alt="越狱工具Unc0ver v8.0.2 支持iOS 14.6-14.8系统 " /> <div class="title"> <div class="entry-meta"><span>2022-09-15</span> </div> <h4>越狱工具Unc0ver v8.0.2 支持iOS 14.6-14.8系统 </h4> </div> </a> </li> <li> <a href="/chajian/5044.html" title="无水印下载小视频插件（资源嗅探插件）"> <div class="overlay"></div> <img class="thumbnail" src="/uploads/ueditor/20221118/1-22111Q131044M.jpg" alt="无水印下载小视频插件（资源嗅探插件）" /> <div class="title"> <div class="entry-meta"><span>2022-11-17</span> </div> <h4>无水印下载小视频插件（资源嗅探插件）</h4> </div> </a> </li></ul> </div> <div class="widget suxingme_tag"> <h3><span>热门标签</span></h3> <div class="widge_tags"> <div class="tag-items"> <a href="/tags/20041.html" class="tag-item">视频无水印下载</a> <a href="/tags/20040.html" class="tag-item">视频无水印解析</a> <a href="/tags/20012.html" class="tag-item">浏览器插件</a> <a href="/tags/20038.html" class="tag-item">抖音去水印</a> <a href="/tags/1071.html" class="tag-item">广发信用卡app下载安装</a> <a href="/tags/201.html" class="tag-item">绿色破解版</a> <a href="/tags/1026.html" class="tag-item">优酷视频app下载安装</a> <a href="/tags/285.html" class="tag-item">南瓜配音app下载安装</a> <a href="/tags/202.html" class="tag-item">绿色便携版</a> <a href="/tags/20028.html" class="tag-item">office免激活版</a> <a href="/tags/197.html" class="tag-item">中文破解版</a> <a href="/tags/4864.html" class="tag-item">软件彩票app下载安装</a> <a href="/tags/203.html" class="tag-item">多语言版</a> <a href="/tags/12032.html" class="tag-item">白象app下载安装</a> <a href="/tags/1792.html" class="tag-item">早晚听课文app下载安装</a> <a href="/tags/2048.html" class="tag-item">有度app下载安装</a> <a href="/tags/16128.html" class="tag-item">宝宝听听app下载安装</a> <a href="/tags/19271.html" class="tag-item">淘盈app下载安装</a> <a href="/tags/195.html" class="tag-item">去广告</a> <a href="/tags/196.html" class="tag-item">绿色纯净版</a> <a href="/tags/198.html" class="tag-item">官方正式版</a> <a href="/tags/199.html" class="tag-item">官方最新版</a> <a href="/tags/200.html" class="tag-item">绿色单文件</a> <a href="/tags/204.html" class="tag-item">无损音乐下载</a> <a href="/tags/205.html" class="tag-item">vip音乐下载</a> <a href="/tags/206.html" class="tag-item">无损歌曲下载</a> <a href="/tags/276.html" class="tag-item">菜鸟收书app下载安装</a> <a href="/tags/278.html" class="tag-item">大象电脑app下载安装</a> <a href="/tags/513.html" class="tag-item">乐视网app下载安装</a> <a href="/tags/1024.html" class="tag-item">安全教育app下载安装</a> <a href="/tags/1536.html" class="tag-item">玖富万卡app下载安装</a> <a href="/tags/20027.html" class="tag-item">office精简版</a> </div> </div> </div> </div> </div> </div> </div> <div class="clearfix"></div> <div id="footer" class="two-s-footer clearfix"> <div class="footer-box"> <div class="container"> <div class="links-footer"> <span>友情链接：</span> <a href="/chajian/5051.html" target="_blank" >快手去水印 </a><a href="/chajian/5044.html" target="_blank" >抖音去水印 </a><a href="/chajian/5051.html" target="_blank" >皮皮虾去水印 </a> </div> <div class="copyright-footer"> <p>© 2024 <a href="https://beian.miit.gov.cn/" rel="nofollow" target="_blank">闽ICP备2021012909号-2</a></p> </div> </div> </div> </div> <div class="search-form"> <form class="sidebar-search" method="get" action="/search.html"> <div class="search-form-inner"> <div class="search-form-box"> <input class="form-search" type="text" name="keywords" placeholder="键入搜索关键词"> <button type="submit" id="btn-search"><i class="icon-search"></i> </button> </div> </div> </form> <div class="close-search"> <span class="close-top"></span> <span class="close-bottom"></span> </div> </div> <div class="f-weixin-dropdown"> <div class="tooltip-weixin-inner"> <h3>关注我们的公众号</h3> <div class="qcode"> <img src="" width="160" height="160" alt="微信公众号"> </div> </div> <div class="close-weixin"> <span class="close-top"></span> <span class="close-bottom"></span> </div> </div> <div style="display:none"><script type='text/javascript' src='/template/pc/skin/js/tj.js'></script></div>   <script type="text/javascript">jQuery(document).ready(function($) {$(".fancybox").fancybox()});</script> <script type='text/javascript' src='/template/pc/skin/js/bootstrap.min.js'></script> <script type='text/javascript' src='/template/pc/skin/js/jquery.mcustomscrollbar.concat.min.js'></script> <script type='text/javascript' src='/template/pc/skin/js/jquery.resizeend.js'></script> <script type='text/javascript'> var suxingme_url = {"roll":"","headfixed":"1","slidestyle":"index_no_slide","wow":"1"}; </script> <script type='text/javascript' src='/template/pc/skin/js/suxingme.js'></script> <script type='text/javascript' src='/template/pc/skin/js/jquery.bootstrap-autohidingnavbar.min.js'></script> <script type='text/javascript' src='/template/pc/skin/js/jquery.lazyload.min.js'></script> <script type='text/javascript' src='/template/pc/skin/js/wow.min.js'></script> <script type='text/javascript' src='/template/pc/skin/js/fancybox.js'></script> <script type="text/javascript" src="/public/static/common/js/ey_global.js?t=v1.5.5"></script> <script> var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?0e957421803db8331b9bad398d99b9d3"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script> <script type="text/javascript" src="/public/static/common/js/footprint.js?v=v1.5.5"></script> <script type="text/javascript">footprint_1606269933('18293', '');</script> </body> </html>