写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/1537.htm" title="Go编程模式：泛型编程">Go编程模式：泛型编程</a><p>Go语言的1.17版本发布了，其中开始正式支持泛型了。虽然还有一些限制（比如，不能把泛型函数export），但是，可以体验了。我的这个《Go编程模式》的系列终于有了真正的泛型编…</p></div><div><a href="https://www.hesudu.com/AkmA8.htm" title="求推荐 idea 好用的写代码的 AI 插件">求推荐 idea 好用的写代码的 AI 插件</a><p>目前一直在用通义灵码，今天试了下 AI Assistant 竟然还要收费，模型还是基于阿里云的通义千问模型，感觉跟通义灵码应该差不多。各位有推荐的好用的插件吗？或者模型的 …</p></div><div><a href="https://www.hesudu.com/r9lRE.htm" title="求助怎么打包一个体积小兼容性和微信电脑版接近的能够正常渲染 Angular 13 网页的专用浏览器">求助怎么打包一个体积小兼容性和微信电脑版接近的能够正常渲染 Angular 13 网页的专用浏览器</a><p>公司有一个 Angular 13 写的网页版加盟店管理系统，用户用的浏览器什么妖魔鬼怪都有，2345 浏览器、QQ 浏览器已经算好了，还有什么魔方浏览器的，都是各种魔改精简的远…</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/xrLG0.htm" title="如图所示这种定制过的 Linux 系统，如何做到一开机就进入这种自定义的页面的？">如图所示这种定制过的 Linux 系统，如何做到一开机就进入这种自定义的页面的？</a></li><li><a href="https://www.hesudu.com/QsBf2.htm" title="有什么提升编程的办法吗？">有什么提升编程的办法吗？</a></li><li><a href="https://www.hesudu.com/885.htm" title="Linux 相关的资源站makelinux.net">Linux 相关的资源站makelinux.net</a></li><li><a href="https://www.hesudu.com/vEXYz.htm" title="算法备案-需要在职证明啊">算法备案-需要在职证明啊</a></li><li><a href="https://www.hesudu.com/NxcbB.htm" title="晴天霹雳，一加 8 系统崩溃自动恢复出厂，所有的资料都没了">晴天霹雳，一加 8 系统崩溃自动恢复出厂，所有的资料都没了</a></li><li><a href="https://www.hesudu.com/1524.htm" title="性能测试应该怎么做？">性能测试应该怎么做？</a></li><li><a href="https://www.hesudu.com/1290.htm" title="[转]TDD到底美还是不美？">[转]TDD到底美还是不美？</a></li><li><a href="https://www.hesudu.com/mrX3f.htm" title="吐槽一下，建议避雷群晖的新品，均不支持第三方硬盘了。">吐槽一下，建议避雷群晖的新品，均不支持第三方硬盘了。</a></li><li><a href="https://www.hesudu.com/yD3Qm.htm" title="你们在实际业务中都见过哪些好玩的数据？">你们在实际业务中都见过哪些好玩的数据？</a></li><li><a href="https://www.hesudu.com/24.htm" title="升级 win11 后蓝牙连接 airpods 3 的声音变得很小，大家有遇到吗？">升级 win11 后蓝牙连接 airpods 3 的声音变得很小，大家有遇到吗？</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/531.htm" title="管理视频文件和少量个人文件的方案求助">管理视频文件和少量个人文件的方案求助</a></li><li><a href="https://www.hesudu.com/1054.htm" title="bash 函数级重定向">bash 函数级重定向</a></li><li><a href="https://www.hesudu.com/276TL.htm" title="Linux 接显示器终端登陆和 ssh 登录都超慢，但是帐户登陆进去后执行运行各种就很流程，如何排查？">Linux 接显示器终端登陆和 ssh 登录都超慢，但是帐户登陆进去后执行运行各种就很流程，如何排查？</a></li><li><a href="https://www.hesudu.com/e9jIx.htm" title="时隔两年， TrafficMonitor 迎来更新">时隔两年， TrafficMonitor 迎来更新</a></li><li><a href="https://www.hesudu.com/ovmDW.htm" title="结合自己写代码的一些经验，提炼几点思考。">结合自己写代码的一些经验，提炼几点思考。</a></li><li><a href="https://www.hesudu.com/X3rSN.htm" title="浅浅体验了一下 vivo x200 ultra，不太满意">浅浅体验了一下 vivo x200 ultra，不太满意</a></li><li><a href="https://www.hesudu.com/vXgsa.htm" title="校园网和公司的网络监控能监控到哪些内容？">校园网和公司的网络监控能监控到哪些内容？</a></li><li><a href="https://www.hesudu.com/63.htm" title="能否控制 Android 对按下耳机播放键的响应方式？">能否控制 Android 对按下耳机播放键的响应方式？</a></li><li><a href="https://www.hesudu.com/6mxas.htm" title="关于今天给前端返回数据的结构的争论">关于今天给前端返回数据的结构的争论</a></li><li><a href="https://www.hesudu.com/Htk2x.htm" title="app 开发人手不够，我，今年写完 Android 写 iOS，明年写完 Android 写 iOS 再写‘不兼容的’？">app 开发人手不够，我，今年写完 Android 写 iOS，明年写完 Android 写 iOS 再写‘不兼容的’？</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>