写HTML和CSS的新方法

Zen Coding 一个用来简化编写 HTML，XML， XSL （或是其它一些诸如此类格式的编辑器）。其主要是用一种缩写方式的语法来书写大量重复和无味的HTML，很像CSS语法。下面是一个例子：
div#page>div.logo+ul#navigation>li*5>a
展开后会成为下面这个样子：

可以看出来，#代表ID，>代表下一层。

如果你写下：
select>option#item-$*3
那么将会得到：

看上去很不错吧。目前，其支持如下的编辑器：

AptanaHowToEn
TextMate (Mac). Available in two flavors: basic snippets (Zen HTML and Zen CSS) and full-featured plugin (ZenCoding for TextMate). Bundles > Zen Coding menu item
Coda (Mac) — external download, via TEA for Coda. Plug-ins > TEA for Coda > Zen Coding menu item
Espresso (Mac) — external download, via TEA for Espresso. Zen Coding is bundled with Espresso by default, but you should upgrade ZC to latest version. Actions > HTML menu item
Komodo Edit/IDE (crossplatform) — external download. Tools > Zen Coding menu item
Notepad++ (Windows). Zen Coding menu item
PSPad (Windows). Scripts > Zen Coding menu item
(browser-based). See online demo.<br>editArea (browser-based). See online demo.</p><p>还有下面这些第三方的插件：</p><p>Dreamweaver (Windows, Mac)<br>Sublime Text (Windows)<br>UltraEdit (Windows)<br>TopStyle (Windows)<br>GEdit (crossplatform) — Franck Marcia’s plugin, Mike Crittenden’s plugin<br>BBEdit/TextWrangler (Mac) — external download<br>Visual Studio (Windows) — external download</p><p></p><p>转载于酷壳CoolShell 无删改仅以此纪念陈皓(左耳朵耗子)</p></div> <div><div><a href="https://www.hesudu.com/1012.htm" title="简单实用的Code Review工具">简单实用的Code Review工具</a><p>Code Review中文应该译作“代码审查”或是“代码评审”，这是一个流程，当开发人员写好代码后，需要让别人来review一下他的代码，这是一种有效发现BUG的方法。由此，我…</p></div><div><a href="https://www.hesudu.com/SV90e.htm" title="出海业务，要不要从国内云切换到 AWS">出海业务，要不要从国内云切换到 AWS</a><p>背景：本人公司的业务也算在稳步增长，服务国内客户 + 海外用户目前在使用腾讯云，部署新加坡使用的产品包括 EdgeOne ，容器 TKE ，对象存储，云 PG 等一直跑…</p></div><div><a href="https://www.hesudu.com/EXupS.htm" title="为什么 MIUI 的 Android 用户名是实名啊？">为什么 MIUI 的 Android 用户名是实名啊？</a><p>在 LSPosed 发现我有两个用户空间，一个是我的实名(打了马赛克），另一个 xspace 应该是 MIUI 的双开空间用户名，用 dumpsys account 命令看了下…</p></div></div> <p class="tags"><a href="https://www.hesudu.com/tag/%E9%85%B7%E5%A3%B3/">酷壳</a> <a href="https://www.hesudu.com/tag/CoolShell/">CoolShell</a> <a href="https://www.hesudu.com/tag/%E9%99%88%E7%9A%93/">陈皓</a> <a href="https://www.hesudu.com/tag/%E5%B7%A6%E8%80%B3%E6%9C%B5%E8%80%97%E5%AD%90/">左耳朵耗子</a> <a href="https://www.hesudu.com/tag/%E9%85%B7%E5%A3%B3%E9%99%88%E7%9A%93/">酷壳陈皓</a> <a href="https://www.hesudu.com/tag/web%E5%BC%80%E5%8F%91/">web开发</a> <a href="https://www.hesudu.com/tag/%E6%9D%82%E9%A1%B9%E8%B5%84%E6%BA%90/">杂项资源</a> <a href="https://www.hesudu.com/tag/html/">html</a> <a href="https://www.hesudu.com/tag/css/">css</a> <a href="https://www.hesudu.com/tag/zen/">zen</a></p> </article> <div class="post-near"> <span><a href="https://www.hesudu.com/1153.htm" title="新手该学哪门编程语言">新手该学哪门编程语言</a></span> <span class="you"><a href="https://www.hesudu.com/1155.htm" title="HTML 安全列表">HTML 安全列表</a></span> </div> </div> <div id="secondary" sidebar-fixed> <section class="widget"> <h3 class="ct">近期文章</h3> <ul class="widget-list alan"> <li><a href="https://www.hesudu.com/333.htm" title="为什么这么多人愿意在 CSDN 上写博客？能拿到广告分成吗？">为什么这么多人愿意在 CSDN 上写博客？能拿到广告分成吗？</a></li><li><a href="https://www.hesudu.com/00I50.htm" title="有大佬在用 warp 吗？ www.warp.dev/">有大佬在用 warp 吗？ www.warp.dev/</a></li><li><a href="https://www.hesudu.com/bOk9q.htm" title="生产力工具">生产力工具</a></li><li><a href="https://www.hesudu.com/c41WP.htm" title="有没有对输入法安全有过研究的？">有没有对输入法安全有过研究的？</a></li><li><a href="https://www.hesudu.com/3u62L.htm" title="关于一个前端数据和后端数据加密的问题,项目组长都急了!">关于一个前端数据和后端数据加密的问题,项目组长都急了!</a></li><li><a href="https://www.hesudu.com/1450.htm" title="Web工程师的工具箱">Web工程师的工具箱</a></li><li><a href="https://www.hesudu.com/69IW9.htm" title="2023 年，我又用回了 rss">2023 年，我又用回了 rss</a></li><li><a href="https://www.hesudu.com/qggEn.htm" title="为什么有的程序员能把很简单的业务逻辑抽象成超级复杂的系统">为什么有的程序员能把很简单的业务逻辑抽象成超级复杂的系统</a></li><li><a href="https://www.hesudu.com/fpAzl.htm" title="请问现在有啥工具可以替代 postman 吗">请问现在有啥工具可以替代 postman 吗</a></li><li><a href="https://www.hesudu.com/XHFKI.htm" title="手贱拿大模型试了下最近一次的 LeetCode 周赛，道心破碎了，成仙路已断，前路在何方？">手贱拿大模型试了下最近一次的 LeetCode 周赛，道心破碎了，成仙路已断，前路在何方？</a></li></ul>  <img src='https://www.hesudu.com/img/c1.jpg'> </section> <section class="widget"> <h3 class="ct">热门推荐</h3> <ul class="widget-list alan"> <li><a href="https://www.hesudu.com/1587.htm" title="一个显示排序过程的Python脚本">一个显示排序过程的Python脚本</a></li><li><a href="https://www.hesudu.com/Lvu84.htm" title="云市场开始卷了吗？">云市场开始卷了吗？</a></li><li><a href="https://www.hesudu.com/481.htm" title="给父母换 iPhone 以后，退役的红米 note 5a 3+32 ，刷国际版系统后，感觉很流畅">给父母换 iPhone 以后，退役的红米 note 5a 3+32 ，刷国际版系统后，感觉很流畅</a></li><li><a href="https://www.hesudu.com/XJPiD.htm" title="个人向的 vivo X200 Pro 优缺点总结">个人向的 vivo X200 Pro 优缺点总结</a></li><li><a href="https://www.hesudu.com/oesM0.htm" title="有人用 vscode 开发 Java 不，体验如何">有人用 vscode 开发 Java 不，体验如何</a></li><li><a href="https://www.hesudu.com/ntkT2.htm" title="Follow 公测开启">Follow 公测开启</a></li><li><a href="https://www.hesudu.com/o8p2G.htm" title="阿里云短信服务">阿里云短信服务</a></li><li><a href="https://www.hesudu.com/Oyfsj.htm" title="cursor 付费支持支付宝了">cursor 付费支持支付宝了</a></li><li><a href="https://www.hesudu.com/ueyAX.htm" title="全面屏潮流毁掉了安卓中低端手机的正面美感">全面屏潮流毁掉了安卓中低端手机的正面美感</a></li><li><a href="https://www.hesudu.com/nDQkX.htm" title="[请教]群晖支持 iCloud 照片同步吗？">[请教]群晖支持 iCloud 照片同步吗？</a></li></ul> </section> </div> </div> </div> <footer id="footer"> <div class="container"> <p>2018-2025 © <a href="https://www.hesudu.com/">合速度</a> 合力而为速度分享</p> </div> </footer> <div id="cornertool"> <ul> <li id="top" class="hidden"></li> </ul> </div> <script src="/img/main.js"></script> </body> </html>