写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/140.htm" title="如果我想配置某个产品库存为无限的话，值设置为 -1 好吗？">如果我想配置某个产品库存为无限的话，值设置为 -1 好吗？</a><p>如果我想配置某个产品库存为无限的话，值设置为 -1 好吗？我看我们生产环境这样做的，但是我觉得有问题。这得看具体逻辑吧。如果超发了，库存变为-1 ，这不得出大问题 …</p></div><div><a href="https://www.hesudu.com/T7h5E.htm" title="世界上还是坏人多啊">世界上还是坏人多啊</a><p>nas 上跑的 Gitlab ce 快把小内存炸了，于是试试搭了个 gitea ，看着还凑合想把 Gitlab 上的一坨东西转过来，自己写不如集体智慧，于是开搜，但是搜到的都…</p></div><div><a href="https://www.hesudu.com/1132.htm" title="中国仍然是一个很穷的国家">中国仍然是一个很穷的国家</a><p>Google最近发布了一个全世界可以开放查询的数据平台，其中包含了多种宏观数据，并且有很方便的作图方式。 http://www.google.com/publicdata/di…</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/LBk2p.htm" title="吐槽一下 Trae">吐槽一下 Trae</a></li><li><a href="https://www.hesudu.com/652FH.htm" title="搞了个 rocketmq 分支，做了 10W+的可读性优化，对应的书也开始周更，有没有一起研究 MQ 的呀？">搞了个 rocketmq 分支，做了 10W+的可读性优化，对应的书也开始周更，有没有一起研究 MQ 的呀？</a></li><li><a href="https://www.hesudu.com/219.htm" title="群晖 6.2.4 要不要升 7.0.1？">群晖 6.2.4 要不要升 7.0.1？</a></li><li><a href="https://www.hesudu.com/bA99b.htm" title="第一次申请应用上架，丢了个大人，忘了申请备案了">第一次申请应用上架，丢了个大人，忘了申请备案了</a></li><li><a href="https://www.hesudu.com/ftX5A.htm" title="为什么 Python 、Node.js 就不能学习一下 C#这种优雅的依赖管理方式？">为什么 Python 、Node.js 就不能学习一下 C#这种优雅的依赖管理方式？</a></li><li><a href="https://www.hesudu.com/bNDCP.htm" title="计算机专业最重要一门课程是哪个？">计算机专业最重要一门课程是哪个？</a></li><li><a href="https://www.hesudu.com/642.htm" title="Google IPV6 Doh/Dot 目前(202208)在国内是可用状态">Google IPV6 Doh/Dot 目前(202208)在国内是可用状态</a></li><li><a href="https://www.hesudu.com/YfBIn.htm" title="好家伙, GitHub Copilot 今天免费了!">好家伙, GitHub Copilot 今天免费了!</a></li><li><a href="https://www.hesudu.com/VeThL.htm" title="Nas 求推荐少折腾、备份文件、至少 8t、不算盘 3000 左右">Nas 求推荐少折腾、备份文件、至少 8t、不算盘 3000 左右</a></li><li><a href="https://www.hesudu.com/157.htm" title="关于 win10 中复制一串字符串后再粘贴结果不一致 bug">关于 win10 中复制一串字符串后再粘贴结果不一致 bug</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/xDB6W.htm" title="国内外的 DNS 如何分流？">国内外的 DNS 如何分流？</a></li><li><a href="https://www.hesudu.com/kpokl.htm" title="请问这是在说哪一个?">请问这是在说哪一个?</a></li><li><a href="https://www.hesudu.com/3HNOo.htm" title="你们有玩过 JetBrains 家的远程开发吗？">你们有玩过 JetBrains 家的远程开发吗？</a></li><li><a href="https://www.hesudu.com/bZZCR.htm" title="虚心求教，数据量上亿的爬虫数据用什么该用什么数据库呢">虚心求教，数据量上亿的爬虫数据用什么该用什么数据库呢</a></li><li><a href="https://www.hesudu.com/449.htm" title="go 程序无故退出， panic 也捕获不到，求解决方案">go 程序无故退出， panic 也捕获不到，求解决方案</a></li><li><a href="https://www.hesudu.com/296.htm" title="求推荐一款 nuc 或者笔记本主要编译 llvm 和 rustc">求推荐一款 nuc 或者笔记本主要编译 llvm 和 rustc</a></li><li><a href="https://www.hesudu.com/11.htm" title="现在带公司内 Go 的开发工具中 VSC 和 Goland 哪个更流行呢?">现在带公司内 Go 的开发工具中 VSC 和 Goland 哪个更流行呢?</a></li><li><a href="https://www.hesudu.com/Gpm4Z.htm" title="想在电脑显示器上玩 FC 游戏，需要什么设备？">想在电脑显示器上玩 FC 游戏，需要什么设备？</a></li><li><a href="https://www.hesudu.com/d9sbs.htm" title="都说安卓手机有广告，我咋没感觉？">都说安卓手机有广告，我咋没感觉？</a></li><li><a href="https://www.hesudu.com/B8Jvy.htm" title="字节 Trae Agent 的 rust 版本讨论">字节 Trae Agent 的 rust 版本讨论</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>