写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/Oik3K.htm" title="关于安卓 windows 与 wifi direct 互传">关于安卓 windows 与 wifi direct 互传</a><p>背景：我手上有一个 windows 笔记本，刚从 ios 换来的一加 13 color os ，刷了类原生系统的联想 pad 需求：有的时候在外面临时需要传一些 pdf 等小文…</p></div><div><a href="https://www.hesudu.com/1603.htm" title="开车时间不久的司机如何高效的有遇见性的看地图导航">开车时间不久的司机如何高效的有遇见性的看地图导航</a><p>目前遇到的状况 1- 对于陌生路段不敢走，怕走错逆向车道（之前夜晚开车差点逆向） 2- 看导航走错，比如前方还有几百米右转，错过路口或者提前右转，把握不住这个距离感 3- 陌生…</p></div><div><a href="https://www.hesudu.com/mDOKQ.htm" title="看到一些 C++ 或者 C#项目驼峰和下划线一块用，为啥泥？">看到一些 C++ 或者 C#项目驼峰和下划线一块用，为啥泥？</a><p>比如 void Function_Name(); 有一个是台湾的一个工控项目有一个是 B 站上看到的一个嵌入式项目 C++里面驼峰或者 pascal 命名一般变量。下…</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/283.htm" title="求助，想把几个静态页面放到网上让别人能访问，选什么做后端或者服务器呢？">求助，想把几个静态页面放到网上让别人能访问，选什么做后端或者服务器呢？</a></li><li><a href="https://www.hesudu.com/1001.htm" title="程序员犯的非技术错误(Top 5)">程序员犯的非技术错误(Top 5)</a></li><li><a href="https://www.hesudu.com/27.htm" title="请推荐几个类似 Joplin 的个人笔记软件，要选一个终身使用">请推荐几个类似 Joplin 的个人笔记软件，要选一个终身使用</a></li><li><a href="https://www.hesudu.com/16qQJ.htm" title="从黄 xx 送车看到安卓和 iPhone 的区别">从黄 xx 送车看到安卓和 iPhone 的区别</a></li><li><a href="https://www.hesudu.com/1410.htm" title="游戏：VIM大冒险">游戏：VIM大冒险</a></li><li><a href="https://www.hesudu.com/176e4.htm" title="一回到家里，手机定位就飘到十万八千里以外，可能是什么原因？">一回到家里，手机定位就飘到十万八千里以外，可能是什么原因？</a></li><li><a href="https://www.hesudu.com/v08XY.htm" title="来 v2 挂个小 idc 老板">来 v2 挂个小 idc 老板</a></li><li><a href="https://www.hesudu.com/316.htm" title="用 Win Server 替换掉用途相对单一的 Win 10 LTSC 2021 合适吗？">用 Win Server 替换掉用途相对单一的 Win 10 LTSC 2021 合适吗？</a></li><li><a href="https://www.hesudu.com/1sYxg.htm" title="将代码中的密码等信息发给 chatgpt 等模型安全吗？">将代码中的密码等信息发给 chatgpt 等模型安全吗？</a></li><li><a href="https://www.hesudu.com/tM232.htm" title="最近用 Cursor 分别开发了 Web、Android、iOS 的应用...">最近用 Cursor 分别开发了 Web、Android、iOS 的应用...</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/EAvLc.htm" title="2025 年了，大家服务器用的什么 Linux 版本">2025 年了，大家服务器用的什么 Linux 版本</a></li><li><a href="https://www.hesudu.com/607.htm" title="各位用哪家的 TTS 引擎，有没有可以根据语气情感进行发声的">各位用哪家的 TTS 引擎，有没有可以根据语气情感进行发声的</a></li><li><a href="https://www.hesudu.com/hoEUk.htm" title="请教下 Python 上的包管理器和虚拟环境">请教下 Python 上的包管理器和虚拟环境</a></li><li><a href="https://www.hesudu.com/298.htm" title="如果你家不止你一个人，请不要说笔记本不用贴膜">如果你家不止你一个人，请不要说笔记本不用贴膜</a></li><li><a href="https://www.hesudu.com/olhLk.htm" title="黑马程序员-传智播客要退市了">黑马程序员-传智播客要退市了</a></li><li><a href="https://www.hesudu.com/874.htm" title="Linux Distribution Timeline">Linux Distribution Timeline</a></li><li><a href="https://www.hesudu.com/McfOf.htm" title="29 岁了我的坎坷人生与职场经历">29 岁了我的坎坷人生与职场经历</a></li><li><a href="https://www.hesudu.com/855.htm" title="50套Web开发图标">50套Web开发图标</a></li><li><a href="https://www.hesudu.com/OfZ6Z.htm" title="项目开发完了，发现部署上的问题逻辑走不通，求大佬指点一下优化方案？">项目开发完了，发现部署上的问题逻辑走不通，求大佬指点一下优化方案？</a></li><li><a href="https://www.hesudu.com/asWTf.htm" title="分享一个关于购买的双开微信包有异常风险行为的事情">分享一个关于购买的双开微信包有异常风险行为的事情</a></li></ul> </section> </div> </div> </div> <footer id="footer"> <div class="container"> <p>2018-2026 © <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>