写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/VKSIh.htm" title="主路由推荐">主路由推荐</a><p>各位老铁，家里的网件 6400 跑了五年要不行了，想近期升级一下家里有一台 GEN10 esxi 打底的 NAS ，所以跑着软路由。但是想要一个硬路由专心做拨号上网的工作。科…</p></div><div><a href="https://www.hesudu.com/1338.htm" title="GNU/Linux下有多少是GNU的？">GNU/Linux下有多少是GNU的？</a><p>一个葡萄牙的学生写了一篇文章《How much GNU is there in GNU/Linux?》 – GNU/Linux下有多少是GNU的。他的这篇文章主要…</p></div><div><a href="https://www.hesudu.com/j3mq9.htm" title="盘点一下这一年我们上线的运维自动化系统">盘点一下这一年我们上线的运维自动化系统</a><p>本职工作为运维，目前负责公司运维自动化的建设，这两年陆续上线了很多运维自动化的工具系统，每到年底就做个盘点，今年的在这里，感兴趣的小伙伴可以看看 blog.ops-coffe…</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/QV3kk.htm" title="123 网盘 3 年 228 元这个活动值得入手不？">123 网盘 3 年 228 元这个活动值得入手不？</a></li><li><a href="https://www.hesudu.com/1219.htm" title="40个很不错的CSS技术">40个很不错的CSS技术</a></li><li><a href="https://www.hesudu.com/FPVJA.htm" title="Windows 的糟糕视觉设计依然没让人失望">Windows 的糟糕视觉设计依然没让人失望</a></li><li><a href="https://www.hesudu.com/pAKZw.htm" title="chrome 切换 edge 发现问题多多">chrome 切换 edge 发现问题多多</a></li><li><a href="https://www.hesudu.com/590.htm" title="［讨论帖］为什么会出现“一边公司招人难，一边求职者找工作难”的问题">［讨论帖］为什么会出现“一边公司招人难，一边求职者找工作难”的问题</a></li><li><a href="https://www.hesudu.com/757.htm" title="AMD 处理器装了 WIN11 简直是恐怖">AMD 处理器装了 WIN11 简直是恐怖</a></li><li><a href="https://www.hesudu.com/LvtUZ.htm" title="为啥 vivo iqoo 的 Origin os 把以太网网络共享这个功能删掉了">为啥 vivo iqoo 的 Origin os 把以太网网络共享这个功能删掉了</a></li><li><a href="https://www.hesudu.com/yiUVr.htm" title="Python 3.12 稳定版发布啦，哪个改动最有吸引力？">Python 3.12 稳定版发布啦，哪个改动最有吸引力？</a></li><li><a href="https://www.hesudu.com/cpAS3.htm" title="双卡， 5G，小巧的安卓机外出当热点用">双卡， 5G，小巧的安卓机外出当热点用</a></li><li><a href="https://www.hesudu.com/zY8I0.htm" title="[困惑] 写好的 Python 应用如何分发？">[困惑] 写好的 Python 应用如何分发？</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/hgF3J.htm" title="请问: 合并 C 盘和 D 盘后, 今后使用有啥麻烦吗?">请问: 合并 C 盘和 D 盘后, 今后使用有啥麻烦吗?</a></li><li><a href="https://www.hesudu.com/512.htm" title="企业微信、钉钉、飞书只能三选一吗？">企业微信、钉钉、飞书只能三选一吗？</a></li><li><a href="https://www.hesudu.com/375.htm" title="各位大佬，你们都用 Python 干过什么有意思的事情？">各位大佬，你们都用 Python 干过什么有意思的事情？</a></li><li><a href="https://www.hesudu.com/482.htm" title="不得不吐槽一下 Python 的任务队列，异步支持太差了">不得不吐槽一下 Python 的任务队列，异步支持太差了</a></li><li><a href="https://www.hesudu.com/677.htm" title="中国天气网这是怎么了？">中国天气网这是怎么了？</a></li><li><a href="https://www.hesudu.com/1150.htm" title="谷歌Chrome取消”http://”">谷歌Chrome取消”http://”</a></li><li><a href="https://www.hesudu.com/8Q84O.htm" title="植物大战僵尸杂交(95)版是逆向改出来的吗？">植物大战僵尸杂交(95)版是逆向改出来的吗？</a></li><li><a href="https://www.hesudu.com/1311.htm" title="WSDL 1.1 中文规范">WSDL 1.1 中文规范</a></li><li><a href="https://www.hesudu.com/1037.htm" title="Alice梦游UNIX仙境">Alice梦游UNIX仙境</a></li><li><a href="https://www.hesudu.com/960.htm" title="Linux磁盘使用命令du的改进">Linux磁盘使用命令du的改进</a></li></ul> </section> </div> </div> </div> <footer id="footer"> <div class="container"> <p>2018-2024 © <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>