写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/690mM.htm" title="做一个调查,大家如果正在做或想做独立开发,首选的语言有哪些?">做一个调查,大家如果正在做或想做独立开发,首选的语言有哪些?</a><p>比如 java,js(vue) 1.后端选择 java,因为自己有多年的 java 开发经验,而且 java 的生态非常丰富 2.vue 底层是用的 js,同时 web 端有成…</p></div><div><a href="https://www.hesudu.com/810.htm" title="腾讯 CDN 爆计费漏洞，每月可能产生数千元 https 请求费用">腾讯 CDN 爆计费漏洞，每月可能产生数千元 https 请求费用</a><p>腾讯 CDN 在 2023 年 1 月 5 日开始对 cdn 的 https 请求计费。价格为每万次请求 0.05 元 /万次请求。但是在恶意攻击时，用户会产生天价的可能会产…</p></div><div><a href="https://www.hesudu.com/ZmVXi.htm" title="七年之痒！一个 PHP 程序员职业生涯的自述">七年之痒！一个 PHP 程序员职业生涯的自述</a><p>看到这个楼主 www.hesudu.com/t/1047948＃reply5 的经历和我的很相似，作为同经历的人很有感触，前段时间我也对自己的职业生涯做了一个复盘《七年之痒！…</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/Ze2z9.htm" title="旧版 android 是完全停止支持了吗？">旧版 android 是完全停止支持了吗？</a></li><li><a href="https://www.hesudu.com/1165.htm" title="四个流行的Java连接池">四个流行的Java连接池</a></li><li><a href="https://www.hesudu.com/1349.htm" title="程序员技术练级攻略">程序员技术练级攻略</a></li><li><a href="https://www.hesudu.com/773.htm" title="真心想建个社区，求老哥们给点建议~~~~">真心想建个社区，求老哥们给点建议~~~~</a></li><li><a href="https://www.hesudu.com/CA5Ar.htm" title="1024，喜提大礼包">1024，喜提大礼包</a></li><li><a href="https://www.hesudu.com/KEVbU.htm" title="自建什么项目能够大家的欢迎？">自建什么项目能够大家的欢迎？</a></li><li><a href="https://www.hesudu.com/772.htm" title="找个靠谱合适的 Java 开发不容易">找个靠谱合适的 Java 开发不容易</a></li><li><a href="https://www.hesudu.com/1315.htm" title="JavaMail使用">JavaMail使用</a></li><li><a href="https://www.hesudu.com/B4M94.htm" title="各位程序员，你们日常「中文与英文间添加空格」吗">各位程序员，你们日常「中文与英文间添加空格」吗</a></li><li><a href="https://www.hesudu.com/JlHCg.htm" title="手机无限重启，去售后也检测不出问题，请问还有什么补救数据的方式吗？">手机无限重启，去售后也检测不出问题，请问还有什么补救数据的方式吗？</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/n95v5.htm" title="大佬们，为什么我感觉 go 文档要比前端文档难懂">大佬们，为什么我感觉 go 文档要比前端文档难懂</a></li><li><a href="https://www.hesudu.com/7B3C3.htm" title="周经贴，求推荐手机，预算 2800-3200">周经贴，求推荐手机，预算 2800-3200</a></li><li><a href="https://www.hesudu.com/ZuDNU.htm" title="Win10 打不开 Windows store 是什么个情况">Win10 打不开 Windows store 是什么个情况</a></li><li><a href="https://www.hesudu.com/9rJwR.htm" title="手机 APP 怎么做到动态切换域名？">手机 APP 怎么做到动态切换域名？</a></li><li><a href="https://www.hesudu.com/NQf04.htm" title="有没有什么安全软件可以管控文件的读取的">有没有什么安全软件可以管控文件的读取的</a></li><li><a href="https://www.hesudu.com/5tMcr.htm" title="有无好用的 RSS 全平台服务/客户端">有无好用的 RSS 全平台服务/客户端</a></li><li><a href="https://www.hesudu.com/251.htm" title="想 1500-2000 左右弄个安卓">想 1500-2000 左右弄个安卓</a></li><li><a href="https://www.hesudu.com/435.htm" title="vue 是不是在理论上，任何情况下都不需要操作 dom？">vue 是不是在理论上，任何情况下都不需要操作 dom？</a></li><li><a href="https://www.hesudu.com/tzNCL.htm" title="各位写 C++有成就感吗">各位写 C++有成就感吗</a></li><li><a href="https://www.hesudu.com/3ZjXW.htm" title="各位大佬，我想做一些 App，但不知道做什么，？？">各位大佬，我想做一些 App，但不知道做什么，？？</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>