写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/996.htm" title="整洁代码的4个提示">整洁代码的4个提示</a><p>虽然这样的文章非常的多，并且，就算是对于编程新手来说，也是非常的简单和显而见，但是，在我们进行Code Review过程中，我们还是能够看到那些非常混乱的代码，所以，有些时候，…</p></div><div><a href="https://www.hesudu.com/683.htm" title="请问这段 Java 代码能保证线程安全吗">请问这段 Java 代码能保证线程安全吗</a><p>代码的意图是针对每个 lockKey 同一时刻只能有一个线程处理 private final Map lockMap = new ConcurrentHashMap(32); …</p></div><div><a href="https://www.hesudu.com/759.htm" title="想入手一个 steam deck, 请教一下使用场景是否适合?">想入手一个 steam deck, 请教一下使用场景是否适合?</a><p>之前用 intel 的 macbook pro 的时候配备 2 个外置 4k 显示器。现在换了 M2 以后只能插一个。多余了一个显示器。一直有玩游戏习惯。但是 Mac 最多玩…</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/859.htm" title="PHP v5.3的新鲜玩意">PHP v5.3的新鲜玩意</a></li><li><a href="https://www.hesudu.com/438.htm" title="有抢菜程序吗">有抢菜程序吗</a></li><li><a href="https://www.hesudu.com/iWJIe.htm" title="国产安卓平台有哪些支持 WebDAV 的播放器 APP？">国产安卓平台有哪些支持 WebDAV 的播放器 APP？</a></li><li><a href="https://www.hesudu.com/kDvpp.htm" title="go run 如何走代理?">go run 如何走代理?</a></li><li><a href="https://www.hesudu.com/1255.htm" title="偷了世界的程序员">偷了世界的程序员</a></li><li><a href="https://www.hesudu.com/1645.htm" title="设备局域网内访问问题，熬夜五天依旧无解，求解惑">设备局域网内访问问题，熬夜五天依旧无解，求解惑</a></li><li><a href="https://www.hesudu.com/q2mu6.htm" title="win10 笔记本常常无故风扇狂转，对微软很失望">win10 笔记本常常无故风扇狂转，对微软很失望</a></li><li><a href="https://www.hesudu.com/vHT9x.htm" title="再次惊叹 cursor 的能力，最近正在写 ha 的 dashboard，几乎所有代码都有 cursor 完成">再次惊叹 cursor 的能力，最近正在写 ha 的 dashboard，几乎所有代码都有 cursor 完成</a></li><li><a href="https://www.hesudu.com/6A4es.htm" title="有什么快速在两台电脑上切换键鼠显示器的方案吗？">有什么快速在两台电脑上切换键鼠显示器的方案吗？</a></li><li><a href="https://www.hesudu.com/1292.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/604.htm" title="在 Java 中为什么不全部使用 static 方法？">在 Java 中为什么不全部使用 static 方法？</a></li><li><a href="https://www.hesudu.com/1582.htm" title="感染新冠的经历">感染新冠的经历</a></li><li><a href="https://www.hesudu.com/0xndx.htm" title="有喜欢用谷歌助理的吗？">有喜欢用谷歌助理的吗？</a></li><li><a href="https://www.hesudu.com/MXukZ.htm" title="还是以前 windows 主题好看">还是以前 windows 主题好看</a></li><li><a href="https://www.hesudu.com/pRQR9.htm" title="安装报失败 INSTALL FAILED INVALID APK 求解正常安装软件的姿势 in 车机">安装报失败 INSTALL FAILED INVALID APK 求解正常安装软件的姿势 in 车机</a></li><li><a href="https://www.hesudu.com/UPYCL.htm" title="2024 年， C++ 开发机选择： Mac 远程还是 Ubuntu 本地？">2024 年， C++ 开发机选择： Mac 远程还是 Ubuntu 本地？</a></li><li><a href="https://www.hesudu.com/fgN35.htm" title="大佬们，自建机房的 k8s 有什么好的部署和运维工具？">大佬们，自建机房的 k8s 有什么好的部署和运维工具？</a></li><li><a href="https://www.hesudu.com/1380.htm" title="来信，创业和移动互联网">来信，创业和移动互联网</a></li><li><a href="https://www.hesudu.com/1055.htm" title="一张关于操作系统的图">一张关于操作系统的图</a></li><li><a href="https://www.hesudu.com/cPHEC.htm" title="Arch Linux 发行版采用 Valkey 取代 Redis">Arch Linux 发行版采用 Valkey 取代 Redis</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>