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="/android/4493.html" title="宇宙工具箱 v1.5.1 VIP破解版_最强万能工具箱 "> <div class="overlay"></div> <img class="thumbnail" src="/uploads/ueditor/20221007/1-22100G22Q4330.jpg" alt="宇宙工具箱 v1.5.1 VIP破解版_最强万能工具箱 "> <h4><span>宇宙工具箱 v1.5.1 VIP破解版_最强万能工具箱 </span></h4> </a> </div> </li> <li> <div class="item"> <a href="/android/8210.html" title="Android Notification History Log Pro v16.3.1 专业版"> <div class="overlay"></div> <img class="thumbnail" src="/uploads/ueditor/20240307/-24030G41600947.jpg" alt="Android Notification History Log Pro v16.3.1 专业版"> <h4><span>Android Notification History Log Pro v16.3.1 专业版</span></h4> </a> </div> </li> <li> <div class="item"> <a href="/Windows/20285.html" title="Materials Studio 2023 v23.1.0.3829 x64 材料模拟软件"> <div class="overlay"></div> <img class="thumbnail" src="/uploads/ueditor/20240417/-24041H00133E7.jpg" alt="Materials Studio 2023 v23.1.0.3829 x64 材料模拟软件"> <h4><span>Materials Studio 2023 v23.1.0.3829 x64 材料模拟软件</span></h4> </a> </div> </li> <li> <div class="item"> <a href="/Windows/5376.html" title="雨林木风OneKey一键还原 v8.2.3 去除广告版"> <div class="overlay"></div> <img class="thumbnail" src="/public/static/common/images/not_adv.jpg" alt="雨林木风OneKey一键还原 v8.2.3 去除广告版"> <h4><span>雨林木风OneKey一键还原 v8.2.3 去除广告版</span></h4> </a> </div> </li> <li> <div class="item"> <a href="/Windows/10480.html" title="统计数据分析 SAS JMP Pro 17.1 for Windows macOS"> <div class="overlay"></div> <img class="thumbnail" src="/uploads/ueditor/20240309/-240309131Z64F.jpg" alt="统计数据分析 SAS JMP Pro 17.1 for Windows macOS"> <h4><span>统计数据分析 SAS JMP Pro 17.1 for Windows macOS</span></h4> </a> </div> </li> <li> <div class="item"> <a href="/Windows/18241.html" title="File Bucket – 将不同地方的文件转移到一个文件夹"> <div class="overlay"></div> <img class="thumbnail" src="/uploads/ueditor/20240326/-2403260ZF0Z1.jpg" alt="File Bucket – 将不同地方的文件转移到一个文件夹"> <h4><span>File Bucket – 将不同地方的文件转移到一个文件夹</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/4680.html" title="CrystalDiskInfo中文版(硬盘检测工具) 8.17.8 "> <div class="overlay"></div> <img class="thumbnail" src="/uploads/ueditor/20221029/1-221029214953161.jpg" alt="CrystalDiskInfo中文版(硬盘检测工具) 8.17.8 " /> <div class="title"> <span>2022-10-30</span> <h4>CrystalDiskInfo中文版(硬盘检测工具) 8.17.8 </h4> </div> </a> </li> <li class="others"> <div class="image"> <a href="/Windows/12698.html" title="能在巴黎圣母院爬上爬下的《刺客信条：大革命》限免，但是买的游戏都不玩，送的游戏会玩？"> <img src="/uploads/ueditor/20240312/-24031209233c34.jpg" alt="能在巴黎圣母院爬上爬下的《刺客信条：大革命》限免，但是买的游戏都不玩，送的游戏会玩？" class="thumbnail" /> </a> </div> <div class="title"> <h4><a href="/Windows/12698.html" title="能在巴黎圣母院爬上爬下的《刺客信条：大革命》限免，但是买的游戏都不玩，送的游戏会玩？">能在巴黎圣母院爬上爬下的《刺客信条：大革命》限免，但是买的游戏都不玩，送的游戏会玩？</a></h4> <span>2024-03-12</span> </div> </li> <li class="others"> <div class="image"> <a href="/Windows/19012.html" title="DV3000 的混搭主义"> <img src="/uploads/ueditor/20240328/-24032PZHX26.jpg" alt="DV3000 的混搭主义" class="thumbnail" /> </a> </div> <div class="title"> <h4><a href="/Windows/19012.html" title="DV3000 的混搭主义">DV3000 的混搭主义</a></h4> <span>2024-03-28</span> </div> </li> <li class="others"> <div class="image"> <a href="/Windows/15272.html" title="[未解决]寻找追踪图书漂流项目的工具"> <img src="/uploads/ueditor/20240318/-24031P92305O9.jpg" alt="[未解决]寻找追踪图书漂流项目的工具" class="thumbnail" /> </a> </div> <div class="title"> <h4><a href="/Windows/15272.html" title="[未解决]寻找追踪图书漂流项目的工具">[未解决]寻找追踪图书漂流项目的工具</a></h4> <span>2024-03-18</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/20038.html" class="tag-item">抖音去水印</a> <a href="/tags/20012.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/20028.html" class="tag-item">office免激活版</a> <a href="/tags/202.html" class="tag-item">绿色便携版</a> <a href="/tags/19271.html" class="tag-item">淘盈app下载安装</a> <a href="/tags/4864.html" class="tag-item">软件彩票app下载安装</a> <a href="/tags/197.html" class="tag-item">中文破解版</a> <a href="/tags/278.html" class="tag-item">大象电脑app下载安装</a> <a href="/tags/12032.html" class="tag-item">白象app下载安装</a> <a href="/tags/203.html" class="tag-item">多语言版</a> <a href="/tags/20027.html" class="tag-item">office精简版</a> <a href="/tags/195.html" class="tag-item">去广告</a> <a href="/tags/196.html" class="tag-item">绿色纯净版</a> <a href="/tags/200.html" class="tag-item">绿色单文件</a> <a href="/tags/205.html" class="tag-item">vip音乐下载</a> <a href="/tags/276.html" class="tag-item">菜鸟收书app下载安装</a> <a href="/tags/16128.html" class="tag-item">宝宝听听app下载安装</a> <a href="/tags/199.html" class="tag-item">官方最新版</a> <a href="/tags/198.html" class="tag-item">官方正式版</a> <a href="/tags/1536.html" class="tag-item">玖富万卡app下载安装</a> <a href="/tags/204.html" class="tag-item">无损音乐下载</a> <a href="/tags/513.html" class="tag-item">乐视网app下载安装</a> <a href="/tags/1024.html" class="tag-item">安全教育app下载安装</a> <a href="/tags/206.html" class="tag-item">无损歌曲下载</a> <a href="/tags/2048.html" class="tag-item">有度app下载安装</a> <a href="/tags/1792.html" class="tag-item">早晚听课文app下载安装</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>