写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/406.htm" title="使用 redis 如何维护一个动态的区间和？">使用 redis 如何维护一个动态的区间和？</a><p>需求是这样: 有一个队列，队列中的元素是不断变化的，想知道这个队列中所有元素的和。队列元素的增加: 当一个请求到来时，就往队列中添加元素。可能同时到来上百个请求队列元素的…</p></div><div><a href="https://www.hesudu.com/hzZEX.htm" title="发现函数计算在某些场景下真的可以省钱">发现函数计算在某些场景下真的可以省钱</a><p>最近用阿里云的函数计算部署 stable-diffusion 玩，发现竟然可以挂载 nas ，所以它就能实现数据持久化。 (题外话，跑 stable-diffusion 并不便…</p></div><div><a href="https://www.hesudu.com/0PYj1.htm" title="天塌了， NAS 被勒索了，如何数据恢复？">天塌了， NAS 被勒索了，如何数据恢复？</a><p>被加密隐藏索要比特币。。。有没有成功案例可以恢复的？求助！推荐靠谱的恢复公司也行 www.solarsecurity.cn/ nas 在家里放着吗个人数…</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/603.htm" title="pycharm 自动推断 typing">pycharm 自动推断 typing</a></li><li><a href="https://www.hesudu.com/Ua0U8.htm" title="运行 100 万个异步并发任务需要多少内存">运行 100 万个异步并发任务需要多少内存</a></li><li><a href="https://www.hesudu.com/cqyvq.htm" title="AI 成本太高怎么办？">AI 成本太高怎么办？</a></li><li><a href="https://www.hesudu.com/95.htm" title="宣传一下自己封装的 NPM 库-处理 JSON 数据">宣传一下自己封装的 NPM 库-处理 JSON 数据</a></li><li><a href="https://www.hesudu.com/471.htm" title="mac 真就那么香吗">mac 真就那么香吗</a></li><li><a href="https://www.hesudu.com/uTx4Y.htm" title="有大佬比较过 windsurf 与 Cursor 吗？ windsurf 有 Cursor 强吗?">有大佬比较过 windsurf 与 Cursor 吗？ windsurf 有 Cursor 强吗?</a></li><li><a href="https://www.hesudu.com/1431.htm" title="InfoQ的ArchSummit大会对我的采访">InfoQ的ArchSummit大会对我的采访</a></li><li><a href="https://www.hesudu.com/9ZI24.htm" title="安卓手机卡顿和硬件有关还是和系统有关，想给红米 k30 5g 版刷机，想再用几年，又怕刷机不解决问题。">安卓手机卡顿和硬件有关还是和系统有关，想给红米 k30 5g 版刷机，想再用几年，又怕刷机不解决问题。</a></li><li><a href="https://www.hesudu.com/OaWx0.htm" title="人身上有没有一个东西类似于总线（bus)">人身上有没有一个东西类似于总线（bus)</a></li><li><a href="https://www.hesudu.com/MMhED.htm" title="请教各位 v 友，有什么合适好用的免费服务器、域名注册的服务商？">请教各位 v 友，有什么合适好用的免费服务器、域名注册的服务商？</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/4.htm" title="vue3 里面父组件向子组件传值的一个问题">vue3 里面父组件向子组件传值的一个问题</a></li><li><a href="https://www.hesudu.com/ghsqI.htm" title="分享远程在外企工作近两个月的感受">分享远程在外企工作近两个月的感受</a></li><li><a href="https://www.hesudu.com/860.htm" title="Java书籍Top 10">Java书籍Top 10</a></li><li><a href="https://www.hesudu.com/33.htm" title="nginx 的 access_log 设置成 off 和/dev/null，二者有区别吗？">nginx 的 access_log 设置成 off 和/dev/null，二者有区别吗？</a></li><li><a href="https://www.hesudu.com/vuKoC.htm" title="大佬帮忙分析下，发卡网站被入侵，改成了他的收款，如何查到这个人">大佬帮忙分析下，发卡网站被入侵，改成了他的收款，如何查到这个人</a></li><li><a href="https://www.hesudu.com/WjPYO.htm" title="PHPer 现在写后台业务实现高并发只有 swoole 吗">PHPer 现在写后台业务实现高并发只有 swoole 吗</a></li><li><a href="https://www.hesudu.com/1250.htm" title="Groovy是怎么实现createArray的">Groovy是怎么实现createArray的</a></li><li><a href="https://www.hesudu.com/TczHh.htm" title="反思，我写的前端的 react 味是不是太重了">反思，我写的前端的 react 味是不是太重了</a></li><li><a href="https://www.hesudu.com/kpokl.htm" title="请问这是在说哪一个?">请问这是在说哪一个?</a></li><li><a href="https://www.hesudu.com/n9sYm.htm" title="容器连通性(容器到某个网络是否畅通)检查方案">容器连通性(容器到某个网络是否畅通)检查方案</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>